当サイトでは右サイドバーの一番上と各詳細記事の一番下にGoogle Adsenseの広告を配置しているのですが、配置した当初、Google Adsenseを読み込む度に背景色が一瞬、黄色になっていました(青色になることもあるようです)。
↓こんな感じで背景色が黄色になっています。
Google Adsenseの背景色が黄色になる理由と解決策を解説します。
Google Adsenseを読み込み時に背景色が黄色になる理由は？
右サイドバーの一番上が黄色になってますよね。
なんで、こんな事になってるの？
と思ったのですが、初めてGoogle Adsenseを登録した時に、別サイトでGoogle Adsenseを読み込んだら、暫く広告が読み込まれなかったので、同じ様な状態で、時間が来ればちゃんと表示されるだろうと思ってました。
しかし半日経っても変わらず。
と思い、もうちょっと待ってみる事に。
結局、1日経っても変わらず。
とさらに1日が経っても変わらず。
問題はGoogle Adsense側か？
それともこちら側か？
「広告設置するだけで、なんでこんな事になるんや！」とけっこうイライラしながらチェックを進め、とりあえず広告のリンクをもう一度、取得し直して貼り付けてみましたが、変わらず。
「CSSが変なのかな？」と思いCSSをチェック(自分が触ったCSSのみ)。サイドバーに背景色を黄色にする記述はなし。
そこでググってみる事に、するとけっこう同じ症状になってる人が見つかりました。
早速、検索一覧の一つの記事を開いて確認。
原因はデフォルトCSS
原因はどうやらCSSらしい。
「サイドバーにそんな記述してないよ。」と思いつつも、さらに読み進める。どうやらCSSのinsタグの背景色の設定が黄色になっているから、こんな現象になっているみたい。
「そんなタグ使った事ないよ。」
確かに私自身は記述していませんが、各ブラウザ(IE、Firefox、Google Chromeなど)にはデフォルトのスタイルシートの設定があり、通常はCSSコーディングする時に、各ブラウザのデフォルトスタイルシートをリセットします(コーディングしやすくする為)。
そしてその各ブラウザのデフォルトスタイルシートをリセットするのに使用するCSSファイル(default.css)があって、そのファイルは配布されているものを使用していました。
基本、中身を触る事がなく、そのファイルにデフォルトで「insタグ」に背景色が黄色になる設定がされてました。
以下の様な記述です。
ins {
background-color: #ff9;
color: #000;
text-decoration: none;
}
「これが原因か・・・」
【解決法.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の読み込み時に背景色が一瞬、黄色になる理由！」でした！
それではまた。
コメント