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

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

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

スポンサーリンク

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

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

こんな感じでリンクをボタン化できます。もちろん無料ブログでも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時間程度のセミナーですが、内容は濃いのでおすすめです。
お金に関する教養無料セミナー

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

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

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

  1. しげぞう 投稿作成者

    らんくる様

    コメントありがとうございます。背景色なども反映されないという事はスタイルシートの記述にミスがある可能性が高いです。ボタン化自体のコードだけでなく、それ以前のコードの「 } 」が1つ抜けていたりするだけでその後の記述が反映されない場合もあります。

    また、ブラウザにキャッシュが残っていて反映されていないという事もあります。一度ブログを表示させて「Ctrl」と「F5」を一緒に押してリロード(再読込み)をしてから確認して下さい。

    原因として考えられるのは上位2つのどちらかの可能性が高いと思います。もしどうしても反映されない場合にはブログのURLを教えて頂けると助かります。コメント公開時にはURLは削除しますのでどうぞよろしくお願い致します。

  2. らんくる

    全く反映されませんでした。

    スタイルシートの子テーマに貼りました。

    記事はテキストタブです。

    テキストリンクの文面だけが表示されていつもと変わりない感じです。

    A8のテキストリンクでよろしいのでしょうか?

  3. しげぞう 投稿作成者

    REN様

    返信ありがとうございます。ちょっとチェックしてみたのですが、コード自体は間違っていない感じです。ただ、理由は分からないのですが、アフィリエイトリンクがPCとスマホで違う物になってしまいますね。

    通常はアフィリエイトリンクはリンクコード(a href=”○○”)とimgタグの組み合わせになります。PCではこの組み合わせのリンクなんですが、スマホに切り替えると何故かリンクコード(a href=”○○”)が2つに増えてimgタグという感じになっているようです。

    リンクコード(a href=”○○”)が2つに増えているためにボタンが2つになっているのが原因なんですが、これはSeesaaブログの仕様なのか、それともアフィリエイトリンクの仕様なのかがハッキリしません。ただ、私のWordPressで試した所、このような現象はないので、Seesaaブログの仕様に原因があるかも?と思います。確信はありませんが。

    そういえば以前にもSeesaaブログでA8のリンクではないですが、もしものリンクで同じような現象があった気がします。その時は諦めてボタン化にはせず、テキストリンクにしていたような記憶があります。

    なので、どうしてもボタン化でしたいという事であれば一度Seesaaブログ側に問い合わせをしてみるのが良いかもしれません。現象としては増えた2つ目のリンク(a href=”○○”)の中身がimgタグと同様の中身になっています。

  4. REN

    しげぞうさま
    すいません。こちらです。

    よろしくお願いします。

  5. しげぞう 投稿作成者

    REN様

    返信ありがとうございます。教えて頂いたURLで記事が見れませんでした。404 NOt Foundになってしまいますので、もう一度URLを確認して教えて頂けると助かります。スマホ用のURLではなくて、普通のPC版のURLで大丈夫です。

    それと、ちょっと今から明日にかけて用事があるため、返信は来週月曜以降になってしまうと思います。すみません!

  6. REN

    しげぞうさま
    返信ありがとうございます。

    これがスマホ用URLです。(削除お願いします)

    ちなみにkousikiのコードは、
    kousikiとkousiki2
    があり、kousikiのほうはインフォトップのリンクで、ボタンは綺麗に表示されます。
    kousiki2がA8ネットのリンクで、ボタンの二重化がおこります。検証お願いします。

  7. しげぞう 投稿作成者

    REN様

    返信ありがとうございます。とりあえずカエレバの方は大丈夫みたいですね。A8などのリンクのボタン化ですが、一度そのページを見せてもらえると助かります。おそらくちょっとCSSを変更する事で可能とは思うのですが、状況によっては違う場合もあるかと思いますので、どうぞよろしくお願い致します。

  8. REN

    しげぞうさま
    RENです。
    カエレバのカスタマイズはうまくいきました!ありがとうございます。
    ということで、公式サイトへのようなリンクをボタン化する部分でも
    同じようにつまずいております。
    A8のimgが邪魔をするので、どうしてもリンクボタンが縦に二つ繋がって
    出てきてしまいます。ご指摘の通り
    .kousiki {
    height: 25px;
    }
    をCSSに追加しても、上とか下とかにボタンがずれておしまいです。
    ボタンの二重化も直ってませんでした。
    カエレバで直ったときのように、
    .kaerebalink-link1 img{display:none;}
    のようなコードとして、
    .kousiki2 img{display:none !important;}
    みたいに作って入れてみましたが
    二重になった下のボタンが細くなった程度です。
    imgタグを消せば簡単に直るのですが違反になるので
    なにかいい方法知りませんか?

  9. アムステル

    しげぞうさま

    すぐにコメントをいただき
    ありがとうございます。

    スマホのブラウザキャッシュを消去して
    件のページを再表示したところ
    ボタンを表示することができました。

    お騒がせして申し訳ありませんでした。

  10. しげぞう 投稿作成者

    アムステル様

    コメントありがとうございます。ボタン化のコード自体は記事で書いているコードで大丈夫かと思います。PCページではボタンで表示されてますか?もし表示されているのであれば原因として考えられるのはスマホのブラウザのキャッシュ(以前のデータ)が残っているのかもしれません。

    WordPressでキャッシュ系のプラグインなどを使っているのであれば設定でキャッシュをクリアする事ができると思いますので、念のためキャッシュをクリア。それで再度スマホから確認し、スマホでの表示も再読み込み(リロード)して確認をしてみて下さい。

    それでもボタン化しない場合にはお手数ですがURLを教えてもらえると助かります。コメント公開時にはURLは削除しますので、どうぞよろしくお願い致します。

  11. アムステル

    しげぞうさま

    アフィリエイトサイトを構築するにあたり
    本サイトをいつも参考にさせていただきています。

    大変分かりやすい&タメになる
    記事をありがとうございます!

    現在、本ページで紹介されているボタンを
    私の運営しているサイトで導入しようとしているのですが
    スマホ(iOS/safari)でボタンを実装したページを見ると
    ボタン表示になりません。

    ですが、こちらのサイトのボタン表示を確認したところ
    しっかりボタンとして表示されていました。

    本ページで紹介されているCSS設定以外にも
    スマホ用に何か設定が必要なのでしょうか?

    お手数ではありますが
    ご教授していただけないでしょうか。

    以上です。

  12. 牡丹

    しげぞうさま

    ご指導のとおり試したところ、できました!

    スタイルシートのほうで、.box-redを作成して(.boxと書いてある項目をすべて.box-redに直したものをもう一つ作りました)

    記事のほうに

    ここにアフィリエイトリンク

    ここにアフィリエイトリンク

    と書いたら表示されました、どうしてこれだけでよいのかよくわからないのですけど(がなくていいのかなーと)
    うまく表示されましたので、安堵しております。

    しげぞうさんありがとうございました!

  13. しげぞう 投稿作成者

    牡丹様

    コメントありがとうございます。牡丹様の言われるように横並びにしたボタンがどちらも.boxなので同じ色になりますね。これを色分けしようと思ったらスタイルシートで.box-redとか別の名前で再度同じようなスタイルを書く必要があるかなと思います(色だけ違う記述で後は.boxと同じ記述のスタイル)。

    それで記事投稿の部分で色を変えたいdivを「class=”box-red”」という感じで書き換えたらOKだと思いますが、もし上手く反映されないという場合には再度コメント下さい。改めてちょっと考えてみますね!

  14. 牡丹

    しげぞうさま

    その節は、ボタン横並びについて詳細にわたる
    ご指導をありがとうございました!

    表示がうまくできて喜んで色など変えてみて
    それも成功しました(^^)/(色タグを変更しただけですが)

    更に片方だけを違う色にして、二色で並べて
    みようと試行錯誤(グーグル先生に問い合わせ)
    してみましたが、どうにもうまくいかず、再度ご質問することも
    大変申し訳ないのですが、コメントした次第です。

    .box というものをもう一つ別に作ってCSSに
    書き込む感じでしょうか?

    何かヒントがありましたら教えていただけますと幸いです。

  15. 牡丹

    しげぞうさま

    こんなに手間のかかるご説明をしていただいて
    ありがとうございます!感謝感激です!

    見事表示することができました!

    display: block;というものや更なるcssへの書き込みが必要なのですね、

    これは・・・私にはまったくわかりませんでした。
    とても勉強になりました、ありがとうございます。
    ブクマさせていただきました、これからもこっそり拝見して
    学びたく思います。

    このたびは貴重なお時間を割いて頂いてありがとうございました!

  16. しげぞう 投稿作成者

    牡丹様

    コメントありがとうございます。ボタンに関してですが、横並びにしてみたいという事でいいですか?ボタンを横並びにするのは可能なんですが、ボタン1つ中央寄せのコードと、2つ横並びのコードは別にしておいた方が良いと思います。なので、さらにもう1つコードを追加していきます。

    それと、牡丹様のブログの幅が分からないので、とりあえずのボタンサイズで以下書いてみますが、ブログの幅とボタンの幅の関係でブログの幅が狭いと横並びにはなりませんし、広すぎるとボタンが左に寄る形になります、その場合にはボタンの幅の数値を調整や余白の調整が必要になります。

    まず、スタイルシートですが、新たに以下のコードを追加してみて下さい。

    .box {
        text-align:center; /*ボタンの中央配置 */
        margin-bottom:15px;
        display: block;
        width: 100%;  /*ボタンの横幅 */
        text-align: center;  /*ボタン内の文字中央寄せ */
        padding: 10px;  /*ボタン内文字の余白 */
        background-color: #E53935;  /*ボタンの背景色 */
        color: #ffffff !important;  /*ボタン内の文字色 */
        float:left;
        margin-right: 15px;
        border-radius: 5px;  /*ボタンの角を少し丸く */
        -webkit-border-radius: 5px;
        -moz-border-radius: 5px;
        font-weight: bold;  /*ボタン内文字は太字 */
    }
    .box a {
     text-decoration: none !important;  /*ボタン内テキストリンク下線無し */
     color: #ffffff !important;  /*ボタン内の文字色 */
     display: block;
    }
    .box-main:after {
      content:"";
      display:block;
      clear:both;
    }
    .box-main {
     text-align:center;
    }
    
    @media screen and (min-width: 600px) {
    .box {width:250px;}
    .box-main {margin-left:10px;}
    }

    追加できたら保存でOKです。

    次に記事投稿画面でボタンを表示したい部分に次のようなコードを追加します。

    <div class="box-main">
    <div class="box">
    ここにアフィリエイトリンク(テキスト:左)
    </div>
    
    <div class="box">
    ここにアフィリエイトリンク(テキスト:右)
    </div>
    </div>

    これで一応横並びにはなると思いますが、先ほども書いたようにブログコンテンツの幅の関係で上手く表示されるかはやってみないと分かりませんので、一度試してみて下さい。PCで横並び、スマホからは縦に並ぶ感じになればOKです。

    それと注意点としてはボタンの幅が250pxで設定してますので、広告コードのテキスト部分が長すぎるとボタン内のテキストが2段になり、ボタンが縦長になります、なので上手く行きません。その場合はボタンの幅の調整が必要ですし、ボタンの幅を大きくし過ぎるとコンテンツの幅に収まらないので横並びにはなりません。

    ちょっと難しい部分ではありますが、もし上手く行かない場合にはブログのURLを教えて下さい。コメント公開時にはURLは削除しますし、ブログの幅などを調べて改めて考えてみますね!

  17. 牡丹

    とても分かりやすい記事で、すぐに
    ボタンが完成しました、しげぞうさんありがとうございます!

    こちらのボタンは中央寄せ表示されますが、
    並べて表示するにはどのようにすればよいのだろうと
    色々調べてトライしたのですがうまくできませんでした。

    しげぞうさんに聞くには申し訳ないのですが
    もしご存知でしたらこのボタンを並べる方法を
    教えていただけましたら幸いです。

  18. 佐々木

    なるほどheight使えば良かったんですね!
    解決しました、ありがとうございます
    お手数おかけしました!

  19. しげぞう 投稿作成者

    佐々木様

    重要なご指摘ありがとうございます。多分余白ができるのはA8ネットさんのリンクですよね。佐々木様の言われるようにimgタグですね。これは広告の表示回数を計測するためのタグなので、改変はオススメできません。

    なので、CSSでボタンの高さを指定する方法で解決できるのでは?と思います。具体的には以下のコードをスタイルシートに追加してみて下さい。

    .kousiki {
        height: 25px;
    }

    スタイルシートを保存したら再度ボタンの余白を確認して下さい。もしそれでも解決しない場合にはお手数ですが再度コメント頂けると助かります。

    PS:記事にも追記しておきました。ありがとうございます!

  20. 佐々木

    こんにちは、いつも素敵な記事を参考にさせて頂いています。

    リンクをボタン化してみたのですが、下に一行余白ができてしまいました。
    多分元からリンクにあるHTMLの「img」が原因かと思われるのですが、
    この場合って勝手にHTMLを変更・削除してもよろしいのでしょうか?