テキスト広告のクリック率を高める為に見栄えを良くする方法

前回、「AdSenseのテキスト広告に似たアフィリエイトリンクを載せる」という記事を書きました。あれで充分と言えば十分なのですが、もっとクリック率を高めたいという方のために、バージョンアップ版をご紹介させて頂きます。

div全体がクリックできるようになっていた方が良いですし、AdSenseが誘導目的として禁止している、テキストの横にブースター的な画像があった方がいいですよね。

テキスト広告のクオリティを上げる

それぞれの広告枠に画像を用意するのが面倒だったので、矢印を真ん中においてみました。前回と異なり、テキスト部分にマウスを乗せてもクリックできることが分かると思います。

サンプルコード

HTML

<div class="ads_bn">
<div class="tbn">
<a href="リンクのURL"><span class="title">タイトル</span><br /><span class="text">ここに広告文が入ります。</span></a>
</div>
<div class="tbn">
<a href="リンクのURL"><span class="title">タイトル</span><br /><span class="text">ここに広告文が入ります。</span></a>
</div>
<div class="tbn">
<a href="リンクのURL"><span class="title">タイトル</span><br /><span class="text">ここに広告文が入ります。</span></a>
</div>
<div class="tbn">
<a href="リンクのURL"><span class="title">タイトル</span><br /><span class="text">ここに広告文が入ります。</span></a>
</div>
</div>

div全体をクリックできるようにするやり方が分からず、冒頭でツイートを紹介した石川さんにご紹介頂いたサイトを見たのですが、そのサイトでは、divをaタグで囲むという荒業を使っていたので、かなりアレンジしました。アレンジというか参考サイトの原形はありません。

要するに、aタグでタイトル部分とテキスト部分を囲んで、CSSで色やら領域やらを調整すればいいのだと思います。ただ、CSSを見てもらえればわかりますが、今回はかなり汚いというか無駄があるように感じます。

CSS

.ads_bn{
    height: 200px;
    width: 520px;
}
.ads_bn a{
    font-weight: bold;
    font-size: 16px;
    color: #00F;
    display: block;
    width: 510px;
    text-decoration: none;
    padding: 5px;
    }
.ads_bn a:visited{
    color: #00F;
    }
.ads_bn a:hover{
    color: #FF9900;
    background-color: #F3F3F3;
    background-image: url(画像のURL);
    background-repeat: no-repeat;
    background-position: left center;
    padding: 5px;
}
.ads_bn .tbn{
    line-height: 20px;
    font-size: 14px;
    margin-bottom: 10px;
    background-image: url(画像のURL);
    background-repeat: no-repeat;
    background-position: left center;
    }
.ads_bn .tbn .title {
    text-decoration: underline;
    padding-left: 15px;
    }
.ads_bn .tbn .text {
    color: #333;
    text-decoration: none;
    font-weight: normal;
    font-size: 14px;
    padding-left: 15px;
    }

ベストなやり方ではないと思いますが、途中でテキストの下線を消すのに苦労したり、マウスを乗せた時の背景色を変化させる領域が上手く指定できず、色々と修正していたらこんな形になってしまいました。とりあえずこのコードで機能するので良しとしておきましょう。

なお、広告ごとに異なる画像を用意する場合は、それぞれのtbnのclassを分けて、背景として読み込ませる画像の指定を変えればOKです。

色々と自分でやってみると面白いと思いますので、アフィリエイトリンクのクリック率を高めるために試行錯誤してアレンジしてみてください。