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

公開日:2013年9月29日
最終更新日: 2016年1月2日

google-adsense-photo_01

こんにちは!

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

こんな感じです!

google-adsense-photo_02

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

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

と思ったのですが、初めて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を読み込む時に背景色が一瞬、黄色になるのは何故?」でした!

それではまた。

その他、「Google Adsense」に関する記事になります。

下記は参考にさせて頂いた記事になります。有難うございました。

公開日:2013/09/29
最終更新日: 2016年1月2日
カテゴリー:CSS

関連記事

responsive_thumbnail

2014/07/25

レスポンシブWEBデザインのCSSの書き方!

カテゴリー:CSS
最終更新日: 2015年2月27日

記事を読む

ssl_ie8_thumbnail

2014/03/02

SSLを設定したらIE8でCSSが効かない!

カテゴリー:CSS, jquery・js
最終更新日: 2015年1月5日

記事を読む

commentout_photo_01_cach

2013/11/11

WordPressのおすすめコメントアウトの方法!

カテゴリー:CSS, WordPress
最終更新日: 2015年2月19日

記事を読む

新着記事

コメント/トラックバック

トラックバック用URL:

この投稿のコメント・トラックバックRSS




管理人にのみ公開されます

正しい数値を入力して下さい *
Time limit is exhausted. Please reload CAPTCHA.

最新の記事

カテゴリー

過去の記事

プロフィール

  • 著者:Masaki Yamashita

    大阪でWEB制作の仕事をしています。
    WEBデザイン、コーディング、WordPress・EC-CUBEの設置やカスタマイズなど何でもやっています。

follow us in feedly