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

スポンサーリンク
Pocket

 

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

こんな感じでリンクをボタン化できます。もちろん無料ブログでもWordPressでもOKです。

スタイルシートへの記述

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

背景色や文字の色、太さなどちょっとした事でクリック率も違ってきます。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
.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です。

記事投稿画面でボタン化の記述をする

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

1
2
3
<div class="kousiki">
ここにアフィリエイトリンク(テキストリンクを貼る)
</div>

これで保存して記事を確認すると冒頭のサンプルのようにボタン化できています。

ボタンの下に余白ができる場合は・・・・

ボタンの下に余計な余白が出来る場合があります。A8ネットのリンクの場合

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

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

1
2
3
4
.kousiki {
  height: 25px;
  line-height:25px;
}

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

ちなみにここの「hieght」と「line-height」を同じ数値にする事でボタンが上下方向の真ん中にきます。

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

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

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

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

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

スポンサーリンク

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください