[み]AdSenseのレスポンシブユニットで背景が黄色になるのを修正する方法

久しぶりに技術的なエントリーです。どれくらいぶりかというと、2014年9月29日の[み]Instagram APIを使ってポメラニアン大好き専用の「Pomestagram」を作ってみたぶりなので、9か月ぶりですねww

もう完全に迷惑メールのブログだと思われても仕方のないような状況ですねwww

AdSenseのレスポンシブユニットで、背景が黄色になっていませんか?

AdSenseのレスポンシブユニットを使っていらっしゃるみなさん、こんな風に背景が黄色くなっていませんか?
adsense-responsive
この背景が黄色になる現象は、レスポンシブユニットの余白部分に出るようです。

原因は、reset.css

WordPressなどを使っている方は、この現象にはあまり遭遇する機会はないと思われます。なぜなら、この原因は、いわゆる「reset.css(default.css)」と呼ばれているものなんです。

わたくしがレスポンシブユニット背景黄色問題に遭遇したサイトで使っていたreset.cssはRichard Clarkさんの作ったものなんですが、その中の、

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

これがレスポンシブユニット背景黄色問題の原因です。#ff9 という色が、あの黄色ですww

レスポンシブユニット背景黄色問題の解決策

レスポンシブユニット背景黄色問題を解決するには、このreset.cssをいじっちゃいましょう!

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

と、#ff9 を transparent に変えましょう。これだけです。

それでも、ブラウザによっては、きちんと表示されないこともあるかと思います。そんな時には、

ins {
    background-color: transparent !important;
    color: #000;
    text-decoration: none;
}

と、!important をつければ大丈夫です。

変更したら確認を

ins タグは、自分では使う場面があまりないのですが、ブログ等のテーマだとどこかに使われているかもしれません。

ですので、変更したら必ず確認をしてくださいね!でないと、余計なところまで透明になってしまってさぁ大変!ということになりかねませんので…

シェアありがとうございます

  • このエントリーをはてなブックマークに追加
  • Pocket
  • LINEで送る

commentYour Message

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

checkboxみはら.comはエックスサーバーです

editNEW エントリー

PAGE TOP arrowup