ココログ：フリー版に自動表示される広告の下に「注意書き」を表示してみた

昨日書いた記事「ココログ：フリー版の広告（Sponsored Link）表示がいつの間にか増えている件」の続き。

上記記事にコメントを下さった風柳さんに「『この広告はココログが表示してるんであって私が付けたんじゃないんです』って意思表示が出来るようにしたい。いい方法ないですか？」と相談したところ、CSSを利用して表示する方法を教えて頂いた。
普通にソースを見ただけでは判らないけど、スクリプトの中身を確認するとこの広告が表示されると自動的に付加されるclass、idがあるらしい。
なので、それに対してCSSで背景指定すれば表示された場合にだけ画像が付けられる、とのこと。

手順は下記の通り。

1. 表示用の画像を作成し、アップロードする。
2. デザイン画面の「カスタムCSSの編集」欄に下記のCSSを追加し保存する。
   
   #google_ads_top_entry {
   padding-bottom:14px;
   background:url( 画像のアドレス ) transparent no-repeat left bottom;
   }
   
   ※padding-bottomの数値は画像の大きさに合わせて設定して下さい。
   ※私の場合、画像を大きめに作ってしまったので35pxにしています。

上記設定をしたあとの表示がこちら（↓）。

きちんと広告の下にメッセージが表示されるようになった。
その分、記事本文が下に下がってしまうという難点はあるけど…、現状では仕方ないかな。

風柳さん、アドバイスありがとうございました。
大変助かりました。

尚、風柳さんには、記事本文下に表示される広告へのメッセージの付け方についても合わせて教えていただいた。
同じように画像を使う方法で、記述するCSSは

div.adsense {
padding-top:14px;
background:url(画像のアドレス) transparent no-repeat left top;
}

となる。
但し、私のブログの場合、IE（Internet Explore）で見ると何故かこちらだけ表示されないという不具合あり。
（Firefox、OperaならOK）
余白の設定が合っていないようなのだけれど、何度変更しても上手くいかないため取りあえず保留中。
後日、再度挑戦する予定。

また、facetさんからは画像を使わない方法（↓）のアドバイスも。

#google_ads_top_entry:after {
content: "↑検索経由だと広告が表示されてしまいます_(._.)_"
}

上記の方法だと、指定した場所の後ろにダブルコーテーション（""）内に記述した任意のテキストが追加できるらしい。
（「after」という疑似要素がミソ。ちなみに指定した場所の前に表示する場合は「before」を使用）
画像の準備も不要だし、内容を簡単に変更出来るのでとても便利♪
但し、こちらは仕様自体がieには対応していないらしい…残念！
（なんだってこんなにブラウザによって対応に差があるのかなあ…）
でも、勉強になりました。facetさん、ありがとうございました(^^)

もしも「どうにかしたい」と思っている方がいらっしゃったら、どうぞ試してみて下さい。