アフィリエイトリンクを中央に配置してボタン化したいんだけど？？
どうも、Linです。エプロン、破損しました。
アフィリエイトで稼ぐためにはリンクをクリックしてもらわなければ話になりません。
クリックしてもらったとしても、成果まで繋がらなければ報酬はありませんが、その手前のクリックがなければ何も始まらないわけです。
そこで、リンク のクリック率を上げるための施策としてよく見られるのが
アフィリエイトリンクをボタン化する
という施策ですよね？
例えばこんな感じ↓
僕は文章になじむようにテキストリンクでアフィリエイトリンクを貼るのは好きだったのですが、これでは文章をちゃんと読んでくれた方しかクリックしてくれません。
そこで、アフィリエイトリンク自体をボタン化して、さらに中央に寄せることでアフィリエイトリンク の視認性を高め、クリック率を高められるのではないか？と思うようになりました。
そのボタン化の方法を調べてみたところ、こちらの神記事に出会ったのです↓
今日はこちらの記事を参考にして、アフィリエイトリンクを中央に寄せてボタン化する方法をマスターしましたので忘れないうちにメモしておきます。
アフィリエイトリンクを中央に寄せて ボタン化する方法
早速、アフィリエイトリンクをボタンに中央に寄せていきましょう。
Step1. CSS を編集する
まずはデザインを司る CSS を編集していきます。
アフィリエイトリンクをボタン化するデザインを仕込んでやろうというわけですね。
ワードプレスでは style.css というファイルの末尾に次の CSS コードを追加すれば OK です。
.kime-btn {
font-size:16px;
margin-left: auto;
margin-right: auto;
display: block;
width: 300px;
margin-bottom: 1em;
}
.kime-btn a {
display: block;
position: relative;
z-index: 2;
overflow: hidden;
width: 100%;
font-weight: bold ;
box-shadow:2px 2px 2px #555;
border-radius: 5px;
background-color:#ed254e;
color: #ffffff !important;
padding: 12px 0;
text-align: center;
text-decoration: none;
transition: .25s linear;
-webkit-transition: .25s linear;
-moz-transition: .25s linear;
}
.kime-btn a:hover {
-ms-transform: translateY(4px);
-webkit-transform: translateY(4px);
transform: translateY(4px);/*下に動く*/
border-bottom: none;/*線を消す*/
box-shadow:none;
}
ボタン化のために必要なクラス名を「kime-btn」と名付けてみました。
Step2. アフィリエイトリンクを貼る
次にアフィリエイトリンクを普通に貼っていきます。
WordPress の場合は「テキスト編集モード」からテキストリンクを貼り付けてみてください。
今回は例として、
<a href="https://freesworder.net">購入はこちら</a>
というアフィリエイトリンク だとして話を進めていきますね。
Step3. div要素でリンクを挟む
先ほど追加したアフィリエイトリンクをdiv要素で挟んでいきます。
この div 要素のクラス名は先ほど CSS 追加したセレクタの「kime-btn」というもの。
今回の例では kime-btn というクラス名でしたので 、div 要素のにもこのクラス名を付けておきます。
kime-btnというクラス名でアフィリエイトリンク を挟むと、次のHTMLのようになるはず↓
<div class="kime-btn"><a href="https://freesworder.net">購入はこちら</a></div>
これで中央寄せになったボタン化されたアフィリエイトリンク が貼ることができたと思います↓
アフィリエイトリンクの改変は出来ないことに注意
以上がアフィリエイトリンクを中央に合わせてボタン化する方法でしたが、一点だけ、注意点があります。
それは、
アフィリエイトリンク自体は改変しない
ということ。
テキストの中身を変更したり、aタグの属性とかをいじってはいけないということですね。
自由テキストのリンクであればテキストの中身を変更してもいいのですが、あらかじめ文言が決まっているリンクに関しては編集は禁止されています。
今回施した 「中央寄せ＆ボタン化」は、アフィリエイトリンク自体をいじっているのではなく、その外に div 要素を追加しているだけなので改変にならないわけですね。
もし、
「リンクのテキスト内容も自由に変えたい・・・・！」
という方がいましたら、フリーテキストの多いASPでアフィリエイトリンクを作るのがいいと思います。
僕の経験上、
の2社に関しては自由テキスト広告の割合が多く、自由テキストラバーとして重宝しています。
よかったら使ってみてくださいね。
それでは！
Lin
おそらく、ブロガー。
今年でフリーランス 6年目。
