アフィリエイトリンクをボタン化する方法。2つ横並びボタンのやり方も紹介

アフィリエイトリンクをボタン化する方法。2つ横並びボタンのやり方も紹介アフィリエイトの基礎知識

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

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

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

一般的なアフィリエイトサイトでよく見かける「公式サイトへ」みたいなボタンですね。

ボタンの画像を用意して作成する方法と、CSSで作っちゃうパターンがあるんですが、今回作成するのはこのCSSのボタンです。

アフィリエイトリンクを以下のようにボタン化する事が可能です。

もしくは2つ横並びとか(スマホでは縦2列)。

こんな感じでリンクをボタン化できます。一応前提でWordPress。でも全部ではないですが、ほとんどの無料ブログでも多分できるかなと思います。

スタイルシートでボタン作成

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

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

ボタン単品(1つだけのやつ)

/* 赤ボタン単一 */

.red-btn {
    font-size:16px;
    margin-left: auto;
    margin-right: auto;
    display: block;
    width: 300px;
    margin-bottom: 1em;
}

.red-btn a {
    display: block;
    position: relative;
    z-index: 2;
    overflow: hidden;
    width: 100%;
    font-weight: bold ;
    box-shadow:2px 2px 2px #555;  
    border-radius: 5px;
    background-color:#ed254e;
    color: #ffffff !important;
    padding: 12px 0;
    text-align: center;
    text-decoration: none;
    transition: .25s linear;
    -webkit-transition: .25s linear;
    -moz-transition: .25s linear;
}

.red-btn a:hover {
    -ms-transform: translateY(4px);
    -webkit-transform: translateY(4px);
    transform: translateY(4px);/*下に動く*/
    border-bottom: none;/*線を消す*/
    box-shadow:none;
}

横並びボタン

/* 左ボタン(横並び) */
.left-btn {
    width: 100%;  /*ボタンの横幅 */
    text-align: center;  /*ボタン内の文字中央寄せ */
    border-radius: 5px;  /*ボタンの角を少し丸く */
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    font-weight: bold;  /*ボタン内文字は太字 */
}

.left-btn a {
    display: block;
    position: relative;
    z-index: 2;
    overflow: hidden;
    width: 100%;
    font-weight: bold ;
    box-shadow:2px 2px 2px #555;  
    border-radius: 5px;
    background-color: #1bb4d3;
    color: #ffffff !important;
    padding: 12px 0;
    text-align: center;
    text-decoration: none;
    transition: .25s linear;
    -webkit-transition: .25s linear;
    -moz-transition: .25s linear;
}

.left-btn a:hover {
    -ms-transform: translateY(4px);
    -webkit-transform: translateY(4px);
    transform: translateY(4px);/*下に動く*/
    border-bottom: none;/*線を消す*/
	box-shadow:none;
}

/* 右ボタン(横並び) */
.right-btn {
    text-align:center;
    width: 100%;
    float:left;
    color:#fff;
    font-weight:bold;
    border-radius: 5px;  
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
}

.right-btn a {
    display: block;
    position: relative;
    z-index: 2;
    overflow: hidden;
    width: 100%;
    font-weight: bold ;
    box-shadow:2px 2px 2px #555;  
    border-radius: 5px;
    background-color: #C81C1C;
    color: #ffffff !important;
    padding: 12px 0;
    text-align: center;
    text-decoration: none;
    transition: .25s linear;
    -webkit-transition: .25s linear;
    -moz-transition: .25s linear;
}

.right-btn a:hover {
    -ms-transform: translateY(4px);
    -webkit-transform: translateY(4px);
    transform: translateY(4px);/*下に動く*/
    border-bottom: none;/*線を消す*/
    box-shadow:none;
}

.box-main {
    text-align:center;
    font-size:15px;
    margin-bottom: 1em;
}

.box-main:after {
    content:"";
    display:block;
    clear:both;
}

@media screen and (min-width: 600px) {

.right-btn {
    width:48% !important;
    margin-left:10px;
}

.left-btn {
    width:48% !important;
    float:left;
    margin-right: 10px;
    margin-left:0;
}
}

@media screen and (max-width:599px){

.right-btn {
    margin-top: 15px;
}
}

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

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

記事投稿画面でボタンを呼び出す

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

単品のボタンの記述

<div class="red-btn">ココにテキストリンク</div>

※ボタン内のテキスト部分はリンクにして下さい。

横並びのボタン場合

<div class="box-main">
<div class="left-btn">リンク1</div>
<div class="right-btn">リンク2</div>
</div>

※ボタン内のテキスト部分はリンクにして下さい。

という感じです。コードが面倒なのでWordPressならプラグイン「AddQuicktag」で1つボタン、2つボタンのコードをそれぞれ登録しておけば投稿画面ですぐに呼び出せます。

よく使うタグを登録し簡単に挿入できるプラグイン【AddQuicktag】

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

今回CSSで作るボタンを紹介しましたが今回のやり方だとボタン内はリンクにしてないと装飾されませんのでボタン内のテキストは必ずリンクにして下さい

また、画像のボタンと違ってCSSで作成したボタンはボタン内の文字(テキスト)を自由に変更できます。

ただCSSで作成したボタンはボタン内のテキストが長くなると2列になります。2列になるとその分ボタンも分厚くなるので注意です(特にスマホページ)。

アフィリエイトボタンテキスト長いバージョン
↑こんな感じでテキストが長いと2列になってボタンが厚くなります。

以上アフィリエイトリンクをボタン化する方法。2つ横並びボタンのやり方も紹介でした!

↓私がメインで利用しているASPはこちら↓

アフィリエイトのASPとは?初心者におすすめのアフィリエイトASPと選び方
アフィリエイトを始めるにあたって必要になるのが広告なんですが、その広告を扱うため...

↓アフィリエイトで使える無料ツールはこちら↓

ブログアフィリエイトに役立つ無料ツール10選
今回は私がアフィリエイトのサイト作成に利用しているツールを紹介していきます。 ...

コメント

  1. kai より:

    しげぞう様

    ご回答ありがとうございます。言われた通りwidthを調整することで綺麗に表示され解決いたしました。これで快適にサイト作りができそうです。本当に助かりました(>_<)ありがとうございます。

  2. しげぞう より:

    kai様

    返信ありがとうございます。多分ボタンのサイズが横幅よりも大きくなっているために段落ちしてるのかと思います。

    追加している以下のコードですが、

    .left-btn {
        width:48% !important;
        float:left;
        margin-right: 10px;
        margin-left:0;
    }

    widthを45%など少し少なく調整して試してみてもらえますか?left-btnだけでなくright-btnも45%とかにして試してみてください。

  3. kai より:

    しげぞう様

    わざわざご回答ありがとうございます。
    試してスマートフォンで確認したところ、ボタンのサイズは短くなったのですが、改行になり赤ボタンが下の段になってしまうのですがこれは私のサイト仕様上の事でしょうか?ちなみにテーマはsangoを使用しております。

  4. しげぞう より:

    kai様

    スマホでのPCと同じように横並びできますよ。書き直すの面倒なのでコピペしたコードから条件分岐の部分を削除したらOKかと思います。

    @media screen and (min-width: 600px) {}
    @media screen and (max-width:599px){}

    ※中身を消さずに上記の記述だけ消したら行けると思います。

  5. kai より:

    オリジナルボタンを作りたくてこのページにたどり着きました。
    ありがたく参考にさせて頂いています。

    質問なのですが、横並びボタンはスマホ表示で縦に表示されると思うのですが、これをPC画面と同じ横並びのままスマホで表示させる事は可能でしょうか?

    お手数おかけしますがよろしくお願い致します。

  6. たーちゃん より:

    しげぞう様 

    お礼の返信が遅くなりまして大変申し訳ございませんでした。
    この度は初心者の無礼な質問に親切・丁寧に回答をいただき本当にありがとうございます。
    教えていただいたとおりにいろいろ試してみましたら、ちゃんと表示されるようになりました。感謝でいっぱいです。
    またわからないことがでてくると思いますので、そのときには是非教えていただきたくお願い申し上げます。ありがとうございました(*^^*)

  7. しげぞう より:

    たーちゃん様

    コメントありがとうございます。今私も同じデザインで試してみたのですが反映されました。ただ、注意点がいくつかあります。

    1.トップページでは反映されない

    トップページ(抜粋の記事一覧)が表示されるページでは記事中の装飾(CSS)が反映されません(見た目がテキストリンクのまま)。個別ページであれば反映されていると思います。

    2.設定によっては余計な改行が入る

    Enterで改行という設定にしていると余計な改行が入ってボタンの上に余計な余白ができます。これは見た目はボタンですが余計な余白が入ります。なので、divから/divまでをEnterの改行なしでつなげると余計なスペースが入りません。

    3.ブラウザにキャッシュ(以前のデータが残っている)

    これはありがちなんですが、ブラウザに以前のデータが残っててCSSが反映されない場合があります。その時はブログを表示させてリロード。もしくは一度コードを削除して保存し、再度追加して保存。また、別のブラウザで反映されていないか確認をしてみて下さい。

    上記でもし解決しない場合にはお手数ですが、ブログのURLを教えてもらえると助かります。URLはコメント公開時には削除しますのでどうぞよろしくお願い致します。

  8. たーちゃん より:

    はじめまして。いつも参考にさせていただきながらブログを書いています。
    初心者の私にも大変わかりやすくて感謝です!

    「アフィリエイトリンクのボタン化」について、どうしてもわからなかったので教えてください。
    シーサーブログに「Time Line Green」というテンプレートがございますが、このテンプレの場合だけボタンになってくれません。他のテンプレは成功しますが、これだけは見た目がテキストリンクのままとなります。テンプレをいじらない初期状態でCSSに追加して試してみましたが、やっぱりダメです。
    初心者なので教えていただけますと幸いです。よろしくお願い致します。

  9. しげぞう より:

    理系女子の美容オタクママ様

    コメントありがとうございます。楽天とAmazonと別々にCSSを書いている感じかなと思いますが、今の状態を横並びにするならどちらも修正が必要になります。

    まず、ボタンの横幅ですが、文字と同じ幅になるのは幅が「max-width:○○px」で指定しているからです。これは最大値を○○pxと設定するだけなので文字数に応じて広くなります。これを「max-width」ではなく、「width」にすると決まった幅にできますので、楽天のボタンもAmazonのボタンも幅はwidthで指定すれば同じ幅になるかと思います。

    ただ、1つ注意点としてはwidthで幅を指定した場合に、これは固定の幅になりますので、スマホなどで確認した時にボタンだけが横にはみ出す可能性がありますので、横幅の広さは確認しておいた方がいいです。

    それから高さはpaddingという部分で調整できます。現在「padding:10px;」となっている部分の数値を少し減らしてみて下さい。

  10. 理系女子の美容オタクママ より:

    はじめまして。参考にさせていただいてボタンを作成したのですが、うまくできないので教えてください。

    記事真ん中あたりと記事最下部に楽天とAmazonのアフィリエイトリンクをボタン化してみたのですが、文字数に合わせた横幅になってしまい楽天のボタンの方が横幅が狭くなってしまいます。

    Amazonと同じ横幅にしたいのですが、どのようにすればいいのでしょうか。

    またボタン全体の高さは逆にもう少し狭く(低く)したいのですが、余白をなくす場合の指定を足してみたのですが、文字がずれてしまいうまくできません。

    素人でチンプンカンプンなので、大変恐縮ですが教えていただけると助かります。
    よろしくお願いいたします。

  11. しげぞう より:

    ジン様

    コメントありがとうございます。無理ではないです。テキスト部分そのまま載せてもOKですし、テキストを変更してもボタン化はできます。ただ問題はそれがアフィリンクの改変になるかも?という部分なんですよね、ほとんどのASPでタグの改変は認められてませんし、きちんと成果が反映されてなかった場合に困ります。なので一応ASPへの確認は必須かと思います。

    もちろん確認しないでやっている方も多いです、インプレッション用のタグを外したり、リダイレクト設定をしたり。個人的には利用規約って一番怖い部分なのでできるだけ確認をとってからするようにしてます。

  12. ジン より:

    質問です。
    自由テキストもメール素材もない場合はボタン画像にアフィリリンクを組み込ませることは無理なのでしょうか?

  13. しげぞう より:

    カメ様

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

  14. カメ より:

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

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

  15. しげぞう より:

    カメ様

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

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

  16. カメ より:

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

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

  17. らんくる より:

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

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

    お世話になりました。

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

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

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

タイトルとURLをコピーしました