飯橋凛（いいはし りん）

CTR向上に繋がる！アフィリエイトリンクを中央にボタン化して貼る方法




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

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

 

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

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

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

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

という施策ですよね？

例えばこんな感じ↓

購入はこちら

 

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

 

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

そのボタン化の方法を調べてみたところ、こちらの神記事に出会ったのです↓

アフィリエイトで稼ぐ方法を全部話そうと思う
 
アフィリエイトリンクをボタン化する方法
https://affiliate150.com/link-button
以前コメントで質問があったので、今回は「アフィリエイトリンクをボタン化する方法」を解説してみたいと思います。注意点もあるので、一緒に解説していきます。 アフィリエイトリンクでなくて普通のリンクもボタン

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

 

 

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

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

 

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でアフィリエイトリンクを作るのがいいと思います。

僕の経験上、

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

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

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

 

それでは！

Lin

おすすめ記事よかったらもう1記事どうぞ




音生入力で楽にブログを書く技が満載！
ブログ音声入力術

音声入力の使い方から文章を書くコツまで完全網羅。ブログを書きたいすべての人向けの電子書籍

チェックする



コメントを残す

メールアドレスが公開されることはありません。