Googleアドセンスのレスポンシブ広告背景が黄色く表示されるのを修正

今回は、3行以内で説明が完了しそうな小ネタです。ページコンテンツに要求されるクオリティ上、文章の引き延ばしは行いますが、結論CSSだけ知りたい人は最終段落へどうぞ。

Googleアドセンスのレスポンシブ広告ユニットは便利

Googleアドセンスを利用されている方は、広告ユニットをWEBサイトに貼り付ける前に、広告の種類とサイズを指定しないといけないことはご存知だと思います。標準で色々なサイズが用意されていますが、その中のレスポンシブ広告ユニット（ベータ）という広告を選ぶと、広告を配置する場所の大きさに従って、適切なサイズを選んでくれます。

たとえば、このブログをPCのそこそこ大きな画面でチェックしている方は、右肩部分にスポンサーサイトとしてレクタングル（大）サイズの広告が見えていることと思います。そして、ブラウザのウィンドウサイズを小さくしていくと、現在利用中のテーマ（レスポンシブルーというテーマです。作者さんに感謝）では、サイドバーが最下部に落ちて、スポンサーサイト部分の広告サイズも横長のものに変化します。これが固定サイズの広告ユニットだと、広告が見切れてしまったり、広告のせいでレスポンシブが上手く機能しなかったりと迷惑なことになるので、どのサイトにも大々的にレスポンシブ広告ユニットを採用したいところです。

レスポンシブ広告背景が黄色く塗られてしまう

ただ、現在この広告ユニットがベータ版であるからか、HTML5などを採用したサイトで背景が勝手に黄色く塗られてしまいます。広告の大きさと同じサイズだけ黄色く塗られれば問題は起きないのですが、広告サイズより広い範囲に黄色背景ができてしまい、結果広告ユニットのクリック率（コンヴァージョン率）が低くなってしまいます。

黄色い背景ができてしまった広告の例

CSSによる対策をしよう

そこで、広告部分の背景をCSSを使って、透過するように設定します。はてなブログでしたらダッシュボードのサイドバー"デザイン"からデザイン設定を出し、"カスタマイズ"タブの"デザインCSS"に、以下の記述を追記します。

ins[style]{
	background-color:transparent;
}

これにより広告エリアの背景色がきちんと透過されるようになります。アフィリエイト収入を上げるために、とにかくコンヴァージョン率を改善したいと思っている方は是非設定して下さい。