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

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

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

スポンサーリンク

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

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

こんな感じでリンクをボタン化できます。もちろん無料ブログでも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ネットのリンクの場合ですね。こんな感じ。

アフィリエイトボタン-1

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

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

.kousiki {
    height: 25px;
}

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

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

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

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

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

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

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

という訳なので、使いたい広告がアフィリエイトBにある場合には自由テキストをお願いしてみる事をおすすめします。
アフィリエイトB詳細ページ

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

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

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

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

おすすめの無料セミナー

これまでお金に関する勉強をした事がない方は稼ぐサイト作りの前にお金に関する無料セミナーに参加してみて下さい。お金をためたり増やしたりするためにお金の知識があるとかなり有利。考え方の土台になる部分ですからね。

「1万円から始められる節約の方法」「お金に働いてもらう方法」「収入の2割を自動的に貯める方法」など、お金に関する基本的な知識が学べる2時間の無料のセミナーが毎日のように行われてますので、一度参加してみる事をおすすめします。

これまで全くお金の勉強していない方であればお金の知識を身につける事で考え方が大きく変化するはずです。無料の2時間程度のセミナーですが、内容は濃いのでおすすめです。
お金に関する教養無料セミナー

アフィリエイトリンクをボタン化する方法”に25件のコメントがあります。

※入院生活から復活しました!!またできるだけ返信しますのでよろしくお願いします(^^)

内容に問題なければ、下記の「コメントを送信する」ボタンを押してください。

  1. しげぞう 投稿作成者

    カメ様

    返信ありがとうございます。なるほど、そういう事だったんですね!初めて知りました(笑)。私もスマホページ確認させてもらったら反映されてました。良かったです。また何かあればいつでもコメント下さい。

  2. カメ

    しげぞうさん、ありがとうございます

    前半の方に書いても同じでした。
    はてなブログは
    はてなブログにはPC表示向けのcss編集ボックスはあるが、スマホ表示用のcss編集ボックスはないと、わかりました。
    タグで囲んだ部分にはCSSが記述できるとのことなのでしげぞうさんのを試したら上手くできました。

  3. しげぞう 投稿作成者

    カメ様

    コメントありがとうございます。はてなブログはほとんど使った事がないので、詳しくは分かりませんが、一度ボタンのCSSの記述を一番下ではなくて、上の方(前半の方)に書いても同じでしょうか?これ、一度試して見て下さい。

    また、ブログサービスによってはスマホ用のCSSが別になっているようなブログサービスもありますので、その辺も確認してみて下さい。

  4. カメ

    しげぞうさん、質問です。

    私ははてなブログの有料版、proで書いていたんですが
    PCだけ反映されてスマホは無理でした。
    デザインCSSのところにスタイルシートへの記述を張り付けたんですが
    スマホでどう表示されるかをpcからプレビューで見たところ、変化してなかったです。
    はてなブログではスマホからみてボタンをつけるのは難しいでしょうか?

  5. らんくる

    コピペ3回目で表示できました。

    下が大きいのはキャッシュで改善されました。

    お世話になりました。

    参考になる記事をありがとうございます。

    アフィリエイト ボタン で検索したら1位表示でした。

    ありがとうございました。