先日書いた記事
www.fair-skinned-monster.com
で、公開した後に「スマホ」で見ると文字が切れてるということに気が付きました。
いや、本当は気付いていましたが対応が面倒だったのでそのまま公開しました。ちょっと後悔。
で、今日はその「スマホ対応ぽい」ものをやって見たので、もう１回テスト。
（実際にスマホで確認取れない環境で記事書いてるので上手く行ってない時は・・・また家に帰ってから考えます。適当ですみません。）
テキスト記事を囲む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（アフィリエイト・サービス・プロバイダ）でのテキスト広告を表示してみます。
バリューコマース
i-mobile
アフィリエイトＢ
うまくできてますかねぇ？
もう少し目立てさせたければ「background-color」を赤にしたり、文字を太文字にしたりすればもう少し目立つかもしれません。
ダメならまた調査します、そのうちね。
でもわたしの技術ではこんなもんでしょう。
引き続きもっとカッコよくして公開してくれる人募集中。
万が一クリック率が上がっても成約率が上がるかどうかは不明です。