AdSenseの広告枠に色が…
この記事では、Google AdSense（アドセンス）広告枠の色を変更、あるいは無くす方法をご紹介いたします。
WordPressで作成したサイトにGoogleのAdSence（アドセンス）広告を掲載する際、広告が貼られる前の広告枠に色（私のサイトでは薄いクリーム色）がついていることがあります。サイズ指定枠の場合は、広告が貼られてしまえば気にならないケースも多いのですが、レスポンシブ型で実際に表示された広告が枠より小さい場合、その色が広告の周囲に残ってしまってサイトの見栄えが悪くなってしまうケースもあります。
実際、私のサイトでもモバイル表示の際にサイトカラーと異なるクリーム色が残っていて、ずっと気になっていました。
しかし、自分が作っている全てのサイトで同じ現象が起きていることから、これはAdSenseの仕様なんだろうと思い、半ば諦めかけていました。
AdSenseの仕様・・・では無かった！
ところが、WordPress以外のサイトにAdSenseの広告コードを埋め込んだところ、何とあの薄いクリーム色が出ないではありませんか！そのサイトはPukiwikiだったのですが、原因が別にあることに気が付き、さっそくPukiwikiとWordPressのCSSの違いを調べてみました。すると・・・原因が判明しました！
まず、広告コードを見てみましょう。
<script src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js" async=""></script>
<!-- 広告枠サンプル -->
<ins class="adsbygoogle"
style="display: block;"
data-ad-client="ca-pub-xxxxxxxxxxxxxxxx"
data-ad-slot="yyyyyyyyyy"
data-ad-format="auto"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
これを見ると、AdSenseの広告枠は「insタグ」を用いて表示していることが分かります。
そして、WordPressのテーマCSSを見てみると・・・ありました！
ins {
background: #fff9c0;
}
この部分はWordPressのテーマ毎に異なる場合がありますが、外観→テーマの編集でCSSを開き、「ins 」（※最後に半角スペースを入れる）を検索すれば、記述されているところに辿り着けると思います。
広告枠の背景色をなくす解決方法
さて、今回はこの部分を以下のように書き換えてみました。
ins {
/* background: #fff9c0; */
background: none;
}
保存してサイトを再表示してみると・・・クリーム色の枠が消滅しました！
同じような現象が起きて困っている方は、まずはご自身のサイトで使っているテーマのCSSの中で、「ins」の背景色がどうなっているか、お調べになってみてはいかがでしょうか。