ブログサイトで収益がなかなか上がらない場合や、クリック率が低い場合の問題は、「リンク」のデザインに問題があるかもしれません。本記事ではアフィリエイトのテキストリンクをボタンにする超簡単な方法をご紹介します。
アフィリエイトリンクをボタン化する方法【超簡単】
サイト収益が上がらない問題点はいくつか挙げられますが、CVR(クリック率)の面で改善できることはリンクのデザインを変える事です。
ASPサイトで使用できるリンクはバナーリンクとテキストリンクの２つに大きく分けられますが、クリック率が高いのはテキストリンクです。
ボタン化するにはこのテキストリンクを使います。
ボタン化する手順
テキストリンクをボタンにする手順は２つ。
- 追加CSSを使う
- テキストリンクのコードにクラスをつける
全てコピペだけで作れるのでCSSやHTMLを知らない方でも簡単ですよ！
追加CSSを使う
まず追加CSSを登録するためにボタンのサンプルを紹介します。
サンプル1
登録はこちら
/*アフィリエイト用のボタン*/
.af_button>a{
margin: .5em .10em .5em 0;
text-decoration: none;
display: inline-block;
padding: .7em 2em;
border-radius: 3px;
box-shadow: 0 4px 4px rgba(0,0,0,.2), 0 2px 3px -2px rgba(0,0,0,.15);
background-color: #ee827c;/*背景の色*/
color: #fff;/*文字の色*/
font-weight: bold;/*文字の太さ*/
}
.af_button>a:hover{
text-decoration: none;
box-shadow: 0 13px 20px -3px rgba(0,0,0,.24);
-webkit-tap-highlight-color: transparent;
}
.af_button{
text-align:center;/*中央寄せ*/
}
サンプル2
/*アフィリエイト用のボタン*/
.af_button>a{
margin: .5em .10em .5em 0;
text-decoration: none;
display: inline-block;
padding: .7em 2em;
border-radius: 30px;
box-shadow: 0 4px 4px rgba(0,0,0,.2), 0 2px 3px -2px rgba(0,0,0,.15);
background-color: #ee827c;/*背景の色*/
color: #fff;/*文字の色*/
font-weight: bold;/*文字の太さ*/
}
.af_button>a:hover{
text-decoration: none;
box-shadow: 0 13px 20px -3px rgba(0,0,0,.24);
-webkit-tap-highlight-color: transparent;
}
.af_button{
text-align:center;/*中央寄せ*/
}
サンプル3
/*アフィリエイト用のボタン*/
.af_button>a{
margin: .5em .10em .5em 0;
text-decoration: none;
display: inline-block;
padding: .7em 2em;
border-radius: 30px;
box-shadow: 0 4px 4px rgba(0,0,0,.2), 0 2px 3px -2px rgba(0,0,0,.15);
background-color: #ee827c;/*背景の色*/
color: #fff;/*文字の色*/
font-weight: bold;/*文字の太さ*/
}
.af_button>a:hover{
text-decoration: none;
box-shadow: 0 13px 20px -3px rgba(0,0,0,.24);
-webkit-tap-highlight-color: transparent;
}
.af_button{
text-align:center;/*中央寄せ*/
}
サンプル4
/*アフィリエイト用のボタン*/
.af_button>a{
display: inline-block;
padding: 0.5em 2em;
text-decoration: none;
color: #ee827c;/*文字の色*/
border: solid 2px #ee827c;/*枠の色*/
border-radius: 25px;
transition: .4s;
font-weight: bold;
}
.af_button>a:hover{
background: #ee827c;/*ボタンの色*/
color: white;
}
.af_button{
text-align:center;/*中央寄せ*/
}
この4つのボタンサンプルから好きなデザインを１つ選んで下さい。
次にそのコードを追加CSSに貼り付けます。追加CSSの場所は、「外観」→「カスタマイズ」→「追加CSS」です。保存すれば準備は完了です。
リンクをボタン化するHTML
あとは実際のアフィリエイトリンクを下記のようにタグで挟んでテキストモードに貼り付けるだけ。
<div class="af_button">ここにアフィリエイトリンク</div>
これでリンクテキストをボタンに変えることができました。
ボタンのデザインを変更したい場合は追加CSSを変更しましょう。
ボタンの色とデザインの参考
ボタンの色とデザインの参考になるサイトを2つあげておきます。
一般的にクリック率が高い色は緑と言われていますが、サイトやブランドによって変わってくるので実際のところまちまちです。緑かオレンジ、赤あたりにしておけば問題ないかと思います。
まとめ
テキストリンクをボタンにする方法は追加CSSを使うこと。デザインを書いたCSSを追加CSSの欄に入力して、テキストリンクのコードをタグで挟む。これだけでボタンにできます。是非あなたもやってみてください！
