このブログにも見てお分かりのとおり、Googleのアドセンス広告を掲載しています。

しかし、そのアドセンス広告の余白部分が黄色になってしまう現象がありました。

アドセンスの広告の中には、googleが定めている標準サイズよりも小さいものもあり、その余白部分が黄色になっているのです。

アドセンス広告のコードを取得する際、アドセンスの管理画面の「広告ユニット」→「代替広告」の項目で、「広告スペースを無地一色で塗りつぶす」を選択し、色を「#ffffff（白）」に指定してみても改善されません。

あとで調べて分かったことですが、この「代替広告」とは、ページと関連性の高い広告がない場合に、広告が表示されないスペース箇所をどうするかを指定する項目であることがわかりました。
→Google Adsenseヘルプ

この代替広告を「広告スペースを無地一色で塗りつぶす」を選択し、色をしていした場合にその空白部分がその指定色で表示されるというもので、今回の広告の背景が黄色くなってしまうということとは関係ありませんでした。

そこで、ソースを調べてみましたら、アドセンス広告の箇所に、「ins」タグがあることがわかりました。

「ins」要素は、で囲まれた箇所が後から追加されたことを示す要素です。

さっそく、cssファイルを開いて見たところ、ins要素のbackgroundプロパティの値が「#fff9c0」になっていました。

なっていた・・・と書きましたが、このブログではTwentyTwelveのテンプレートを使用しており、そのTwentyTwelveのデフォルトでinsの背景色が「#fff9c0」に指定されていたということです。

この「#fff9c0」を「transparent(透明)」と指定することにより解消されました。

「transparent」ではなく、ご自身のサイトの背景色に指定してやっても解消できます。

さて、このアドセンス広告の余白が黄色になってしまう現象は、私が運営している他のサイトでも起こりました。

同じく、ins要素の背景色を変更することで解消されましたが、そのins要素の背景色を指定している記述は、TwentyTwelveおよび他のサイトでも、cssファイルの「リセット」部分に記述されているのが共通しています。

リセットとは、各ブラウザごとによって異なるcssのスタイルをいったんデフォルト状態に初期化する記述です。

TwentyTwelveでは、「style.css」の中の初めの方の、約139行目に「Reset」の一連の記述の中にあります。

また、同じ現象が起こった私の別のサイトにおいても、html5にも対応可能な、「html5reset.css」を読み込ませており、そのリセットファイルの中にも同じくins要素が黄色に指定されている箇所があります。

このように、使っているテンプレートであったり、リセットファイルを読み込ませている場合などは、リセットの記述の中のins要素の色を変更することにより解消できるものと思われます。