アフィリエイトリンクを中央に配置してボタン化したいんだけど？？

どうも、Linです。エプロン、破損しました。

 

アフィリエイトで稼ぐためにはまずはクリックしてもらわなければ話になりません。

仮にクリックしてもらったとしても、成果まで繋がらなければ報酬はありませんが、その手前のクリックがなければ何も始まらないわけです。

そこで、アフィリエイトリンク のクリック率を上げるための施策としてよく見られるのが

アフィリエイトリンクをボタン化する

という施策ですよね？ 例えばこんな感じ↓

 

僕はこれまで文章になじむようにテキストリンクでアフィリエイトリンクを貼るのは好きだったのですが、これでは文章をちゃんと読んでくれた方しかクリックしてくれません。

そこで、アフィリエイトリンク自体をボタン化して、さらに中央に寄せることでアフィリエイトリンク の視認性を高め、クリック率を高められるのではないか？と思うようになりました。

そこでアフィリエイトリンクをボタン化する方法を調べてみたところ、こちらの神記事に出会いました↓

今日はこちらの記事を参考にして、アフィリエイトリンクを中央に寄せてボタン化する方法をマスターしましたので忘れないうちにメモしておきます。

 

 

アフィリエイトリンクを中央に寄せて ボタン化する方法

それでは早速、アフィリエイトリンクをボタンに中央に寄せていきましょう。

 

Step1. CSS を編集する

まずはアフィリエイトリンクをボタンにするためにデザインを司る CSS を編集していきます。

ワードプレスでは style.css というファイルの末尾に次の CSS コードを追加すれば OK です。

今回、アフィリエイトリンクのクラス名を「kime-btn」と名付けてみました。

 

Step2. アフィリエイトリンクを貼る

次にアフィリエイトリンクを普通に貼っていきます。

WordPress の場合は「テキスト編集モード」からテキストリンクを貼り付けてみてください。

今回は例として、

というアフィリエイトリンク だとして話を進めていきますね。

 

Step3. div要素でリンクを挟む

先ほど追加したアフィリエイトリンクをdiv要素で挟んで行きます。

 

 

この div 要素のクラス名は先ほど CSS 追加したセレクタの「kime-btn」というもの。

今回の例では kime-btn というクラス名でしたので 、div 要素のにもこのクラス名を付けておきます。

kime-btnというクラス名でアフィリエイトリンク を挟むと、次のHTMLのようになるはず↓

 

これで中央寄せになったボタン化されたアフィリエイトリンク が貼ることができたと思います↓

 

 

 

アフィリエイトリンクの改変は出来ないことに注意

以上がアフィリエイトリンクを中央に合わせてボタン化する方法でした。

ここで注意しておきたいのがアフィリエイトリンク自体は改変しないようにするということです。

つまり、テキストの中身を変更したり、aタグの属性とかをいじってはいけないということですね。

自由テキストのリンクであればテキストの中身を変更してもいいのですが、あらかじめ文言が決まっているリンクに関しては編集は禁止されています。

今回施した 「中央寄せ＆ボタン化」は、アフィリエイトリンク自体をいじっているのではなく、その外にある div 要素のスタイルを変更しているだけとなります。

そのため、これはアフィリエイトリンクの改変にならないわけですね。

 

もし、

「リンクのテキスト内容も自由に変えたい・・・・！」

という方がいましたら、フリーテキストの多いASPでアフィリエイトリンクを作るのがいいと思います。

僕の経験上、

1. もしもアフィリエイト
2. バリューコマース

の2社に関しては自由テキスト広告の割合が多く、自由テキストラバーとしてはありがたく重宝しています。

よかったら使ってみてくださいね。

 

それでは！

Lin