アフィリエイトリンクをボタン化する方法。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への無料会員登録が必要になります。 今回はアフィリエイトに必要な仲介役ASPと評判の良いおすすめのASPを紹介していきます。 アフィリ...

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

アフィリエイトやブログの運営で役立つ無料ツールまとめ
今回はブログのアクセスアップやSEO対策、アフィリエイトで役立つ便利な無料のツールを紹介していきます。「アクセスアップ」や「報酬アップ」には欠かせないツールで、私が個人的に多用しているツールを10個集めてみました。 1つ1つ説明も...

コメント

  1. 牡丹 より:

    しげぞうさま

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

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

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

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

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

  2. しげぞう より:

    牡丹様

    コメントありがとうございます。ボタンに関してですが、横並びにしてみたいという事でいいですか?ボタンを横並びにするのは可能なんですが、ボタン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は削除しますし、ブログの幅などを調べて改めて考えてみますね!

  3. 牡丹 より:

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

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

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

  4. 佐々木 より:

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

  5. しげぞう より:

    佐々木様

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

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

    .kousiki {
        height: 25px;
    }

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

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

  6. 佐々木 より:

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

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

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