読者です 読者をやめる 読者になる 読者になる

攻めは飛車角銀桂守りは金銀三枚

ITとアコースティックギター、そして日常のひとこま。

クリック率アップを目指して文字広告リンクをCSSで装飾してみる。第2弾

アフィリエイト
スポンサーリンク

先日書いた記事
www.fair-skinned-monster.com
で、公開した後に「スマホ」で見ると文字が切れてるということに気が付きました。

いや、本当は気付いていましたが対応が面倒だったのでそのまま公開しました。ちょっと後悔。

クリック率アップを目指して文字広告リンクをCSSで装飾

で、今日はその「スマホ対応ぽい」ものをやって見たので、もう1回テスト。
(実際にスマホで確認取れない環境で記事書いてるので上手く行ってない時は・・・また家に帰ってから考えます。適当ですみません。)

テキスト記事を囲むCSS

まずはテキスト広告をボタンのように囲んで色を塗るCSSです。

.ad-link {
    width:250px;
    margin:0px;
    padding:0px;
    display:block;
    border-style : none;
} 
/* 768px以上 */
@media (min-width: 768px) {
.ad-link {
    width:500px;
    margin:0px;
    padding:0px;
    display:block;
    border-style : none;
} 
}
.ad-link > img{
    display: none;
}
.ad-link > a {
    clear: both;
    display:block;
    width:90%;
    text-decoration: none;
    text-align:center;
    vertical-align:middle;
    background-color:deepskyblue;
    font-weight: bold;
    color: white;
    margin: 0 auto;
    padding:5px;
    border-radius: 10px; 
    word-break: break-all;
}

です。
前回の記事との違いは実験段階でのこってしまっていた「clear:bott」を消したのと表示する広告タグの「aタグ」に「word-break: break-all;」を追加して「高さ」の指定外しました。

実際に表示させるには

<div class="ad-link">
表示させたいテキスト広告リンク
</div>


各ASP(アフィリエイト・サービス・プロバイダ)での表示テスト

以下に現在登録しているASP(アフィリエイト・サービス・プロバイダ)でのテキスト広告を表示してみます。

A8.net文字広告リンクをCSSで装飾

Amazonアソシエイト文字広告リンクをCSSで装飾

LinkShare文字広告リンクをCSSで装飾

バリューコマース文字広告リンクをCSSで装飾

i-mobile文字広告リンクをCSSで装飾

アフィリエイトB文字広告リンクをCSSで装飾


うまくできてますかねぇ?

もう少し目立てさせたければ「background-color」を赤にしたり、文字を太文字にしたりすればもう少し目立つかもしれません。

ダメならまた調査します、そのうちね。
でもわたしの技術ではこんなもんでしょう。

引き続きもっとカッコよくして公開してくれる人募集中。

万が一クリック率が上がっても成約率が上がるかどうかは不明です。