Google Adsenseの読み込み時に背景色が一瞬、黄色になる理由!

CSS

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

↓こんな感じで背景色が黄色になっています。

Google Adsenseの背景色が黄色になる理由と解決策を解説します。

Google Adsenseを読み込み時に背景色が黄色になる理由は?

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

なんや。これ?
なんで、こんな事になってるの?

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

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

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

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

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

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

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

これは絶対に何か変や。

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

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

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

そこでググってみる事に、するとけっこう同じ症状になってる人が見つかりました。

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

一体、原因はなんや?

原因はデフォルトCSS

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

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

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

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

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

HTML5 Reset Stylesheet | HTML5 Doctor

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

以下の様な記述です。

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

「これが原因か・・・」

さらにGoogle Adsenseのコードに「insタグ」が使用されているので、CSSのinsタグの設定が反映されているようです。

【解決法.1】該当CSSをコメントアウトする

特に使う事もない記述だったので、以下のようにコメントアウトしました(非表示にしたい部分を「/*」「*/」で囲っています)。

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

【解決法.2】CSSを追加する

ご自身のテーマのCSSに以下のコードを追加することで解決します(背景を透明に設定しています)。

ins {
  background-color: transparent;
}

上記で解決しないなら「!important」を付けてください。

ins {
  background-color: transparent !important;
}

 

やりやすい方で対応するようにしてください。

分かってしまえば、どうという事もない原因でした。

最後に

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

以上「Google Adsenseの読み込み時に背景色が一瞬、黄色になる理由!」でした!

それではまた。

CSS
スポンサーリンク
社会不適合者のWEBフリーランス生活をフォローする
社会不適合者のWEBフリーランス生活

コメント