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

32 comments

以前コメントで質問があったので、今回は「アフィリエイトリンクをボタン化する方法」を解説してみたいと思います。注意点もあるので、一緒に解説していきます。

アフィリエイトリンクでなくて普通のリンクもボタンにする事は可能です。

おすすめのASP

⇒もしもアフィリエイトの登録や使い方

アフィリエイトリンクのボタン化する手順

一般的なアフィリエイトサイトでよく見かける「公式サイトへ」みたいなボタンですね。アフィリエイトリンクは以下のようにボタン化する事も可能です。

公式サイトへ

こんな感じでリンクをボタン化できます。もちろん無料ブログでもWordPressでもOKです。

スタイルシートへの記述

まずはスタイルシート（CSS）へ次の記述を追加します。スタイルシートは下に書いた物が優先的に反映されますので、一番下に追加でOKです。

背景色や文字の色、太さなどちょっとした事でクリック率も違ってくるのでカラーや文字色、文字の大きさなどはお好みで変更してみて下さい。

.kousiki {
    text-align:center; /*ボタンの中央配置 */
    margin:20px auto 20px auto;  /*ボタンの上右下左の余白 */
    max-width: 300px;  /*ボタンの横幅 */
    text-align: center;  /*ボタン内の文字中央寄せ */
    padding: 10px;  /*ボタン内文字の余白 */
    background-color: #E53935;  /*ボタンの背景色 */
    margin-right: auto;
    margin-left: auto;
    border-radius: 5px;  /*ボタンの角を少し丸く */
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    font-weight: bold;  /*ボタン内文字は太字 */
    color: #ffffff !important;  /*ボタン内の文字色 */
}

.kousiki a {
 text-decoration: none !important;  /*ボタン内テキストリンク下線無し */
 color: #ffffff !important;  /*ボタン内の文字色 */
 display: block;
}

一応必要な部分にコメントを入れてますので、それを見ながら背景色や文字色など変更して使えます。

数カ所「!important」というのを付けている部分があります。これを付けるとその記述が優先的に反映されますので、後で確認した時に反映されない部分がある場合にはその部分の記述に「!important」を付けてみて下さい。

上記スタイルシートを追加できたら保存します。これで準備はOKです。

記事投稿画面でボタン化の記述をする

スタイルシートの記述が保存できたら今度は記事を書く画面（投稿画面）で記事を書いていきます。アフィリエイトリンクのボタン化したい部分に次の記述をします。

<div class="kousiki">
ここにアフィリエイトリンク（テキストリンクね！）
</div>

これで保存して記事を確認すると冒頭のサンプルのようにボタン化できているはずです。

ボタンの下に余白ができる場合

ボタンの下に余計な余白が出来る場合があります。特にA8ネットのリンクの場合ですね。こんな感じ。

これはA8ネットのリンクコードに表示回数を計測するためのimgタグが付いているためです。タグの改変は利用規約違反になるので、この場合はCSSでボタンの高さを指定する事で解決できます。

再度スタイルシート（CSS）の一番下に次の記述を追加して保存します。

.kousiki {
  height: 25px;
  line-height:25px;
}

上記(ボタンの高さ)をスタイルシートに追加してもう一度確認をしてみて下さい。

ちなみにここの「hieght」と「line-height」を同じ数値にする事でボタンが上下方向の真ん中にきます。

アフィリエイトリンクボタン化の注意点

アフィリエイトリンクはテキストリンクを利用するのですが、アフィリエイトリンクによっては上記のような「公式サイトへ」みたいなテキスト文言がない場合もあります。

このテキストの文言は勝手に変更はできません。ほとんどのASPではリンクの改変は認められてはいませんので、注意が必要です。

自由テキストなどが使えるといいのですが、全てのアフィリエイトリンクで「自由テキスト」が使える訳ではありません。そのため、もし文言を自由に変更できる「自由テキスト」を使いたい場合には必ずそのASPへの問い合わせをしてみて下さい。

「自由テキストは無理です」と言われる事も多いですが、ASPによっては快く自由テキストを追加してくれる場合もあります。

個人的にはafbでお願いする事が多いです。初心者に優しいASPと言われるだけあって、結構色々注文に答えてもらっており、非常にありがたいASPの１つです。

という訳なので、使いたい広告がafbにある場合には自由テキストをお願いしてみる事をおすすめします。

いつも担当の方に激しくお世話になっているので、紹介させて頂きました。

以上アフィリエイトリンクをボタン化する方法でした！もし上手く反映されない場合などありましたらコメント頂けると助かります。どうぞよろしくお願い致します。

サイトのアクセスアップや稼ぐためにおすすめの無料レポート

個人的にアクセスアップや検索上位表示に役立った無料レポートです。登録にメールアドレスが必要ですが、フリーメールでもOKです。

【無料】キーワード選定に特化した無料教材＆動画「キーワード無双」

【期間限定無料】一億円ブロガーの電子書籍「自由な人生を手に入れる教科書」

ブログの更新はこちらから