Google Adsenseを読み込む時に背景色が一瞬、黄色になるのは何故？

こんにちは！

当サイトでは右サイドバーの一番上と各詳細記事の一番下にGoogle Adsenseの広告を配置しているのですが、配置した当初、Google Adsenseを読み込む度に背景色が一瞬、黄色になっていました。

↓こんな感じです！

なぜ？Google Adsenseを読み込み時に背景色が黄色になる！

右サイドバーの一番上が黄色になってますよね。

「なんや。これ？」
「なんで、こんな事になってるの？」

と思ったのですが、初めてGoogle Adsenseを登録した時に、別サイトでGoogle Adsenseを読み込んだら、暫く広告が読み込まれなかったので、同じ様な状態で、時間が来ればちゃんと表示されるだろうと思ってました。

しかし半日経っても変わらず。

「まぁ、まだ半日しか経ってないし、ちょっと時間が掛かってるんだろう」

と思い、もうちょっと待ってみる事に。

結局、1日経っても変わらず。

「まぁ、もうちょっとだけ待ってみよう。」

とさらに1日が経っても変わらず。

「これは絶対に何か変や。」

問題はGoogle Adsense側か？
それともこちら側か？

「広告設置するだけで、なんでこんな事になるんや！」とけっこうイライラしながらチェックを進め、とりあえず広告のリンクをもう一度、取得し直して貼り付けてみましたが、変わらず。

「CSSが変なのかな？」と思いCSSをチェック(自分が触ったCSSのみ)。サイドバーに背景色を黄色にする記述はなし。

そこでググってみる事に、するとけっこう同じ症状になってる人がいるじゃないですか！

早速、検索一覧の一つの記事を開いて確認。

「一体、原因はなんや？」

原因はどうやらCSSらしい。

「サイドバーにそんな記述してないよ。」と思いつつも、さらに読み進める。どうやらCSSのinsタグの背景色の設定が黄色になっているから、こんな現象になっているみたい。

「ん？insタグ？」
「そんなタグ使った事ないよ。」

確かに私自身は記述していませんが、各ブラウザ(IE、Firefox、Google Chromeなど)にはデフォルトのスタイルシートの設定があり、通常はCSSコーディングする時に、各ブラウザのデフォルトスタイルシートをリセットします(コーディングしやすくする為)。

そしてその各ブラウザのデフォルトスタイルシートをリセットするのに使用するCSSファイル(default.css)があって、そのファイルは配布されているものを使用していました。

【html5doctor.com Reset Stylesheet】
html5でコーディングしたページにも対応したCSSファイル。
http://html5doctor.com/html-5-reset-stylesheet/

基本、中身を触る事がなく、そのファイルにデフォルトで「insタグ」に背景色が黄色になる設定がされてました。

以下の様な記述です。

ins {
  background-color: #ff9;
  color: #000;
  text-decoration: none;
}

「これが原因か・・・」

特に使う事もない記述だったので一旦、コメントアウト。サイトを確認すると無事解決。

まさかdefault.cssから影響を受けてたとは・・・
分かってしまえば、どうという事もない原因でした。

配布されているものなどを、そのまま使う時は注意が必要ですね。今回は本当に良い勉強になりました。ただこんな事に時間を使ってしまって恥ずかしいです。同じ症状が起こった方の参考になればと思います。

以上「Google Adsenseを読み込む時に背景色が一瞬、黄色になるのは何故？」でした！

それではまた。