Adsense のレスポンシブ広告に背景色（背景画像）が表示された場合の対処法 ～WordPress 覚書き～

Google Adsense からレスポンシブ広告（ベータ版）なるものが登場しました。

参考：Google AdSenseにレスポンシブ広告ユニット（ベータ版）が登場。レスポンシブ・ウェブデザインのサイトに配置することで自動的に広告が最適化！

早速導入してみたところ、PCで表示した場合に広告の背景に背景色が出てしまい、なんともみっともない格好になってしまいました。
原因は、レスポンシブ広告のサイズはサイドバーの幅一杯（230pxくらい）だったのに対し、表示された広告が160×600のワイドスカイスクレイパーだったため、その隙間に背景色が出てしまったということでした。

CSSでbackgroundを指定する

そこで、このサイトを参考に、子テーマのCSSをいじることに。

参考：[Googleアドセンス] レスポンシブ広告ユニットの背景の色を消す方法

このサイトの方も、WordPressのフリーテーマを使っている時に出たと言っていますが、私もそうでした。ただ、私の場合は、ins の background に transparent を指定しても背景色が消えませんでした。調べると、CSS の background で背景色を指定しているのではなく、背景画像を読み込んでいるようでした。

そこで、行った対処はこちら

ブログの背景色と同じ色を background に指定して、デフォルトで読み込まれる背景画像の上を指定したカラーで塗りつぶしています。画像の読み込みをやめさせようということも考えましたが、色々いじる箇所が増えてきそうだったので、こちらの方法を取ることにしました。
※一応、アドセンスの ins にだけ指定出来るように、アドセンスは<div class=”google-ad”>～</div>で囲ってあります。

ちなみに、レスポンシブ広告、今のところ結構良い感じにフィットしてくれています。正式採用に期待ですね！

Tweet