アドセンス広告をCSSで装飾してみました。
ちょっとしたお遊び的な実験です。
アドセンス広告はブログに溶け込ませるというのが鉄則ですが、ちょっと目立ちすぎましたね。
右サイドバーにある160×６００のワイドスカイスクレイパーをCSSで装飾してみました。
規約違反になるのかどうか気になるところですが、もともとブログはCSSの塊といっていいぐらいで、無料のブログテンプレートにしても、コンテンツ部分、サイドバー部分ともにCSSで画像を組み込んだものが多く、その上にアドセンス広告を表示させているので、同じことだろうと思いましたので、実験的にやってみました。
実際、こういったアドセンス広告用のCSSの装飾は販売している位なので大丈夫でしょう。
Web 2.0 Magazine: 29 Different Google Ads Style
上記ページで紹介されているようなスマートなものなら良かったのかもしれないですが、センスがないものでとんでもないデザインに仕上がってしまいました。
このことで、クリック率が上がったか？
答えはノーでした。
デザインのセンスもあるのでしょうが、今のところ効果は出ておりません。
（まだ半日しか経過していませんのではっきりとはわかりませんが）
というより、このブログで実験してもわかりにくいというのが反省点です。
なぜなら、このブログのようにアドセンス系のブログやサイトは経験上、クリック率が非常に低いのです。
当たり前ですよね。来訪される方は、アドセンスの事を知っている方ばかりですから、他人のサイトのアドセンス広告をクリックしたりはしませんよね。
私もそうです。自分のアドセンス広告をクリックしたら規約違反というのもあって、他人のブログやサイトでも心理的にクリックをしたらダメだってなってしまいます。
それにクリックしてもらっても単価が低いというのがアドセンス系キーワードの特徴です。
ほとんどが情報商材系。大きな企業が進出してくるような分野ではありませんからね。
話は戻って、CSSでの装飾の方法です。
このブログではこのようにして表示させています。
１．アドセンス広告のバック画像を用意する。（貼り付けるアドセンス広告の1～２割り増し位の大きさの画像）
２．画像のアップロード
３．スタイルシートの追加
<style type=”text/css” media=”screen”>
#ad_code {
width:200px;
text-align:center;
background:#FFFFFF url(２でアップロードした画像のURL) center center no-repeat;
padding:0px 0px 0px 0px;
}
</style>
※HTMLの<head></head>間に追加するか、スタイルシートに追加します。
設置が完了後padding:0px 0px 0px 0pxの数値を変えて位置を微調整します。
４．ウイジェットへの記述の追加（ウィジェットとはFC2ではプラグイン、Seesaaではコンテンツの事です）
<div id=”ad_code”>
[アドセンスのコード]
</div>
たったこれだけの作業です。
初心者の方でも十分挑戦できるかと思います。
※自己責任で挑戦してみてください。失敗してもこちらでは責任はもてません。
また、過度の装飾を施した場合も規約違反になる恐れがありますので自己責任で行ってください。
追記：あまりにクリック率が低かったので辞めました。 テスト失敗です。
後日デザインを考えて再度テストしてみます。
関連記事
タグ
2008年5月28日 | コメント／トラックバック(0) | トラックバックURL |
カテゴリー:アドセンスの設置応用編
