こんにちは、久川和人です。
読者さんから、「アフィリエイト広告をボタン化する方法について」のお問い合わせがありました。
アフィリエイト広告を以下のようなにボタン化することです（以下のボタンはクリックすると、このページの最初に飛びます）。
通常のリンクであれば、ワードプレステーマにあらかじめ準備されてるボタンを使用できることができます。しかし、アフィリエイトリンクとなると、CSSで作成しないと利用できない場合があります。
例えば、ワードプレステーマのSimplicity。Simplicityでは20種類以上のボタンが準備されていますが、アフィリエイトリンクにはそのまま利用できないのです。
そこで今回は、Simplicityでアフィリエイトリンクをボタン化する方法についてお話していきます。アフィリエイトリンクをボタン化する際の注意点もあるので、合わせて説明をしていきます。
また、この方法は基本的にはSimplicity以外のテーマでも利用することが可能です。Simplicity以外のテーマを使用している場合でも参考にしてみてください。
この記事の目次
アフィリエイトリンクをボタン化する際の注意点
アフィリエイトリンクをボタン化する方法を説明する前に、アフィリエイトリンクをボタン化する際の注意点を説明いたします。
それは、
大手ASPでは、広告素材の改変は禁止されてます。そのため、基本的にはテキストの文言を勝手に変更できません。
大手ASPとは、A8.net、インフォトップ、インフォカート、アクセストレード、リンクシェア、afb、バリューコマースなどです。規約にも改変についてはNGと記載されています。
改変したアフィリエイトリンクを経由した場合、報酬が発生しない場合がある。警告が来ることもあるようです。ただし、大手ASPでも、ASPや広告主に問い合わせをしてみると、可能な場合もあるようです。
なお、楽天アフィリエイトやAmazonアソシエイトの場合は、好きなテキスト文言を入れてから、アフィリエイトリンクを作成できるので、テキスト文言は自由に変えられます。
【事前準備】アフィリエイトリンク用のCSSの作成
Simplicityでアフィリエイトリンクをボタン化するためにCSSを作成します。
はじめに、以下のCSSをコピーします。
/*---------------------------------
アフィリエイトリンク用ボタン
--------------------------------*/
.btn-link {
max-width: 600px; /*最大文字幅 */
text-align: center;/*テキストを中央表示*/
margin:10px auto 10px auto;
font-weight: bold;/*テキストを太文字*/
color: #ffffff !important;
height: auto;
}
.btn-link > img{
display:inline !important;
}
.btn-link a {
text-decoration: none !important;
color: #ffffff !important;/*リンク文字の色*/
display:block;
padding: 10px;
background-color: #0000FF;/*背景色*/
margin-right: auto;
margin-left: auto;
border-radius: 10px;/*角を丸く*/
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
}
.btn-link a:hover {
text-decoration: none !important;
color:#0000FF !important;/*マウスを置いた時の文字色*/
background-color: #fff;/*マウスを置いた時の背景色*/
border:2px solid #0000FF;/*マウスを置いた時の枠線*/
}
/* アフィリエイトリンク終わり */
つぎに、WordPress管理画面の左メニューの【外観】⇒【カスタマイズ】をクリックします。
左メニューを下にスクロールして、【追加CSS】をクリックします。
先ほどのCSSを貼り付けます。すでに、別のCSSが記載されていた場合は、その後ろに貼り付けてください。
貼り付けたら、【公開】をクリックします。
これで、CSSの準備はできました。つぎに、アフィリエイトリンクをボタン化しています。
Simplicityでアフィリエイトリンクをボタン化する手順
アフィリエイトリンクをボタン化するには、つぎの順番に進めていきます。
- ASPなどでアフィリエイトリンクの取得
- 記事（投稿、固定ページなど）にアフィリエイトリンク用ボタンを設置
1.アフィリエイトリンクの取得
ASPなどで、アフィリエイトリンクをしたい広告（素材）を準備します。
広告リンクは、テキストのものを準備します（以下、A8.netの場合）。
A8.netの場合、上記の画面で【素材をコピーする】をクリックすると、広告のリンクをコピーすることができます。
2.記事（投稿、固定ページなど）にアフィリエイトリンク用ボタンを設置
アフィリエイトリンク用のボタンを設置する場合は、テキストモードで以下のコードを貼り付けます。
<span class="btn-link">ここにアフィリエイトリンクを貼ります</span>
上記のコードの”ここにアフィリエイトリンクを貼ります”の部分に、ASPなどから取得した広告コードに置き換えます。
まずは、記事を書く画面（投稿、固定ページ）で記事を書いていきます。アフィリエイトリンク用のボタンを貼り付ける場合は、【テキストモード】をクリックします。
アフィリエイトリンク用のボタンを設置したい位置に、先ほどのコードを貼り付けます。
”ここにアフィリエイトリンクを貼ります”の部分に、ASPなどから取得した広告コードをそのまま貼り付けます。
貼り付けたら、【プレビュー】をクリックし、実際の表示画面で確認します。
プレビューで見るとこのような感じで、アフィリエイトリンクがボタン化されています。
これで、記事（投稿、固定ページなど）を公開すれば、アフィリエイトリンクがボタン化されて表示されます。
アフィリエイトリンクのボタン化のカスタマイズ方法
アフィリエイトリンクのボタンのカスタマイズ方法を説明いたします。カスタマイズは、追加CSSの中身を変更していきます。
追加CSSの表示方法は、WordPress管理画面の左メニューの【外観】⇒【カスタマイズ】をクリックします。
つぎに、左メニューを下にスクロールして、【追加CSS】をクリックします。
ボタンの大きさの変更
文字の大きさに合わせたい時は、19行目を以下の記載を変更します（blockをinline-blockに変更する）。
display:inline-block;
※上記に変更すると、ボタンが左に寄るので、中央揃えに表示させたい場合は、ビジュアルモードで、中央揃えにすると簡単に変更できます。
背景色の変更
背景色は、21行目の以下の”#0000FF”を変更します。色の見本は、（https://hogehoge.tk/webdev/color/）のようなサイトが参考になります。
background-color: #0000ff;
マウスを置いた時に背景色の変更
マウスを置いた時の背景色の変更は、32行目の#fffを変更します。
background-color: #fff;
その他の変更
CSSにコメント（例えば、 /* リンク文字の色 */ ）のように記載されているので、該当の部分を変更します。
クリックされやすいボタンの色は？
アフィリエイトリンクに使用するボタンは何色がいいのでしょうか？
これは、記事の内容やデザイン、クリックしてほしい相手（ターゲット）にもよりますが、一般的には、オレンジや青にすると、クリック率が高くなるといわれています。
それは、オレンジや青のイメージは、つぎのような感じがするからでしょうか。
- オレンジは、温かさ、親しみ、陽気、社交性、元気
- 青は、堅実さ、信頼、知的、冷静
ただ、ボタンの色は、「読者さんの気持ちになってみる」、「読者さんの気持ちを後押しする」という想いで考えてみるとよいかもしれません。
その際に、迷うようであれば、”オレンジ”と”青”のいずれかで選択してみてください。
なお、先ほどのCSSの背景色を、オレンジは”#FFA500”、青は”#0000FF”にします。そうすると、以下のようなボタンになります。
Simplicityの標準で使用できるボタンの一覧
参考までに、Simplicityでは、20種類以上のボタンが用意されています。
ボタンのデザインの一覧については、Simplicity公式ページで確認できます。
↓
Simplicity文字装飾のボタン拡張クラスの使い方
しかしながら、これらのボタンは、アフィリエイトリンクの場合は使用できません。
おわりに
今回は、アフィリエイトリンクのボタン化する方法について説明いたしました。
追加CSSであれば、変更しても直接WordPressに影響を与えることはないので、ボタンの色や大きさなどいろいろと変えて試すといいですよ。ただし、アフィリエイトリンクで改変する場合は、かならず利用規約を確認するようにしてください。
クリックしたくなるボタンはクリック率も上がるので、ぜひあなたもアフィリエイトリンクのボタン化は効果的に利用して見てくださいね。
