アフィリエイトリンクをボタンにするには?【CSS追加するだけで簡単です】

ブログ記事などにアフィリエイトのリンクを貼るには、「バナー」もしくは「テキストリンク」を使うのが一般的ですよね。

ただ、使う上で気をつけなければならないのが、多くの ASP で発行されたタグは「改変禁止」となっているということ。つまり、基本的にはタグを貼るだけとなります。

でも、よく「登録はこちら」みたなボタンにしているサイトがあるよね? どうすれば良いの?

くま五郎

オトマミ

「ボタン」を表示させるには、CSS を使えば簡単に表示できるよ!

ということで、タグを改変せずに ASP から発行されたタグを「ボタン」にする方法を紹介しましょう。

この記事が参考になる人
  • アフィリエイトリンクをボタン化したい人
  • コンバージョン率を上げたい人

リンクをボタンにする手順

アフィリエイトリンクとして発行されたタグを「ボタン」で表示するには、「テキストリンク」の方だけを使います。

どうやって表示させるのかというと…

アリンクをボタンで表示させるまで
  1. CSS を追記する
  2. リンクを指定した Class 要素のタグで囲む

たったのこれだけで、アフィリエイトの「テキストリンク」をボタン化させることができます。

「CSS なんて触ったことがない!」という人でも、基本的にはコピペでいけるのでチャレンジしてみてください。

CSS で作れる「ボタン」5つを紹介

とてもシンプルなデザインですが、アフィリエイトのリンクとしての「ボタン」に適したものを紹介します。

まずは、CSS を紹介します。

CSS で作るリンク用のボタンデザイン

これから紹介する CSS の部分を丸っとコピーして、WordPress であれば「外観」→「カスタマイズ」→「追加 CSS」に貼り付ければOKです。(もしくは、style.css に直接貼り付け)

ホワッと浮くタイプのボタン

affiliate button

CSS
/*アフィリエイト用のボタン*/
.af_button>a{
    margin: .5em .10em .5em 0;
    text-decoration: none;
    display: inline-block;
    padding: .7em 2em;
    border-radius: 3px;
    box-shadow: 0 4px 4px rgba(0,0,0,.2), 0 2px 3px -2px rgba(0,0,0,.15);
    background-color: #ee827c;/*背景の色*/
    color: #fff;/*文字の色*/
    font-weight: bold;/*文字の太さ*/
}
.af_button>a:hover{
    text-decoration: none;
    box-shadow: 0 13px 20px -3px rgba(0,0,0,.24);
    -webkit-tap-highlight-color: transparent;
}
.af_button{
text-align:center;/*中央寄せ*/
}

ホワッと浮くタイプのボタン(角丸)

affiliate button

CSS
/*アフィリエイト用のボタン*/
.af_button>a{
    margin: .5em .10em .5em 0;
    text-decoration: none;
    display: inline-block;
    padding: .7em 2em;
    border-radius: 30px;
    box-shadow: 0 4px 4px rgba(0,0,0,.2), 0 2px 3px -2px rgba(0,0,0,.15);
    background-color: #ee827c;/*背景の色*/
    color: #fff;/*文字の色*/
    font-weight: bold;/*文字の太さ*/
}
.af_button>a:hover{
    text-decoration: none;
    box-shadow: 0 13px 20px -3px rgba(0,0,0,.24);
    -webkit-tap-highlight-color: transparent;
}
.af_button{
text-align:center;/*中央寄せ*/
}

最初はちょっと控えめなボタン

affiliate button

CSS
/*アフィリエイト用のボタン*/
.af_button>a{
    position: relative;
    display: inline-block; 
    font-weight: bold; 
    padding: 0.7em 2em;
	  border-radius: 3px;
    text-decoration: none; 
    color: #ee827c;/*文字の色*/
    background: #ECECEC;/*背景の色*/
    transition: .4s;
}
.af_button>a:hover{
    background: #ee827c;/*ボタンの色*/
    color: white;
}
.af_button{
text-align:center;/*中央寄せ*/
}

最初は枠だけのボタン

affiliate button

CSS
/*アフィリエイト用のボタン*/
.af_button>a{
    display: inline-block; 
    padding: 0.5em 2em; 
    text-decoration: none; 
    color: #ee827c;/*文字の色*/
    border: solid 2px #ee827c;/*枠の色*/
    border-radius: 3px; 
    transition: .4s;
    font-weight: bold;
}
.af_button>a:hover{
    background: #ee827c;/*ボタンの色*/
    color: white;
}
.af_button{
text-align:center;/*中央寄せ*/
}

最初は枠だけのボタン(角丸)

affiliate button

CSS
/*アフィリエイト用のボタン*/
.af_button>a{
    display: inline-block; 
    padding: 0.5em 2em; 
    text-decoration: none; 
    color: #ee827c;/*文字の色*/
    border: solid 2px #ee827c;/*枠の色*/
    border-radius: 25px; 
    transition: .4s;
    font-weight: bold;
}
.af_button>a:hover{
    background: #ee827c;/*ボタンの色*/
    color: white;
}
.af_button{
text-align:center;/*中央寄せ*/
}

リンクをボタン化する HTML

CSS に上記を追加したら、あとは下記の HTML を使ってアフィリエイトリンクを貼り付けるだけ

HTML
<div class="af_button">ここにアフィリエイトリンク</div>

例として、A8.net ならこんな感じになります。

HTML
<div class="af_button"><a href="https://px.a8.net/svt/ejp?a8mat=000000+000000+00+0000" target="_blank" rel="nofollow">A8.net</a><img border="0" width="1" height="1" src="https://www15.a8.net/0.gif?a8mat=000000+000000+00+0000" alt=""></div>

プラグインでボタンを簡単表示させる

アフィリエイトのリンクを貼り付けるたびに、毎回上記のコードを入力したりコピペするのはちょっと面倒ですよね。

そんな時、WordPress ならプラグインAddQuicktagが便利です。

とはいえ、新エディタでは使えないプラグインなのですが、旧エディタで「AddQuicktag」を使えば投稿画面にコードを簡単に入力できるようにもできます。

もしアフィリエイトリンクを頻繁に貼りたいという人は、「AddQuicktag」の利用を検討しても良いと思います。

WordPress 5.0 のエディタを変えるプラグイン3つを紹介【無効化できます】

ボタンの色などを変えたい場合

上記で紹介したボタン用の CSS では、「甚三紅(#ee827c)」という色を使っています。もし色を変えたかったり、ボタンの大きさを変えたい場合には、値を変更することで可能となります。

下記の表と照らし合わせて、変更したい部分を見つけて値を変更してみてください。

色に関しては、「原色大辞典」を参考にされると良いと思います。

padding左側の値が上下の幅、右側が左右の幅
color表示する文字の色
borderボタンの枠の色や線の幅
backgroundボタンとしての色

ボタンの中に表示させる文字を太くしているのですが、もし標準にしたい場合には下記の部分を削除してください。

CSS
font-weight: bold;/

また、ボタンを中央に表示されるようにもしてあります。もし左寄りにしたい場合には、下記の部分を削除してください。

CSS
.af_button{
text-align:center;/*中央寄せ*/
}

さいごに

以前は ASP が発行したタグを改変して「ボタン」にしている人を見かけましたが、せっかくの成果なども無効となり提携解除などにもなるので、なるべくタグはそのまま貼り付けるようにしましょう。

もちろん改変が可能な ASP もありますけど、使っている ASP で改変NG となっている場合には上記の方法が最も適しています。

コンバージョン率を上げたいという人は、ボタン化を上手に利用してみてください!

たったの2文字で売り上げ倍増?注目のマイクロコピー【事例と考え方】