グーグルアドセンスのレスポンシブ広告が黄色や青色になる！回避策は簡単です

ネットビジネスといえば「ブログ＋広告」が一番お手軽でポピュラーです。

その広告の中で一番利用が多いのは 、なんといっても「Google Adsense」（グーグルアドセンス）。

「グーグルアドセンス」GoogleAdsense とは、ネット界の巨人「グーグル」が運営する「クリック型の広告」です。

最近では「レスポンシブ広告」という自動で伸縮自在するタイプのものも利用ができ、更に便利になってますが、「背景色が何故か黄色は青色になる！どうして！？」というトラブルも出るんですね。（私もです！）

なんでだろう？と（色だけに）色々調べてみたら、なんだ、解決策は簡単でした。

グーグルアドセンス

クリック型広告

グーグルアドセンスはクリック型広告です。
この「クリック型広告」とは以下のタイプを指します。

• ホームページやブログなどにその広告を貼り、
• 訪れた人がその広告を見てクリックしてくれると報酬が発生する

グーグルアドセンスの場合では、広告も自動で表示してくれるの手間いらず。単に貼っておけば、訪れた人向けの広告を自動で表示してくれるんです。素晴らしいですね。

レスポンシブ広告に対応

私も以前よりお世話になってますが、最近では「レスポンシブ広告」と呼ばれる「画面の大きさに合わせて自動で伸縮自在する、自動で縦長や四角、横長へと大きさも変わる広告」も対応され、更に便利になりました。

背景が黄色や青色になるトラブル

さてそんな便利な「レスポンシブ広告」ですが、私が運営しているサイトの１つに貼ってみたところ、何故か背景が黄色に表示されてしまいます。

こんな感じ。

ワードプレスに標準でついている「twentysixteen」などのテーマではこの黄色が青色で表示されたりします。

こんな感じ。

広告が調度良い大きさの場合、この周りの黄色や青色は隠れて気になりませんが、広告が小さかったり、広告が表示されるまで時間がかかると、この黄色や青色の表示領域が見えて非常に気になります。

え？どうして？と、配置を変えてみたり、貼り付け方が変なのかな？と、あれやこれやしてみても、一向に消えないこの黄色。

ここはグーグルなだけにググってみれば、なんだ、簡単なことでした。

CSSで色指定

いきなりテクニカルな話になりますが、まずこのグーグルのレスポンシブ広告。どのようなコードを使うかといえば、．．．

• <ins class="adsbygoogle"
  style="display:block"
  data-ad-client="ca-pub-*****"
  data-ad-slot="*****"
  data-ad-format="auto"></ins>

一部の抜粋ですが、この中の先頭に現れる「ins」と呼ばれるタグ（挿入する、つまりインサートする、という意味のもの）に対して、どこか知らない所で、あの謎の黄色が色指定されているんですね。

犯人は reset.css

問題となった私のサイトはブログではなく、html で作っていた手作りサイト。そこで使用している、reset.css　という中で この ins の背景色が定義されていました。

• /* change colours to suit your needs */
  ins {
  background-color:#ff9;
  color:#000;
  text-decoration:none;
  }

この中の、

• background-color:#ff9;

この部分で背景色を指定しています。
「#ff9」が、あの謎の黄色です。

reset.css　とは、リセットCSSと言われるもので、html などで作る手作りサイトでよく利用される基本のcssファイル（文字や背景色、線の色などを基本を定義するもの）。

私の場合では、この「reset.css」の中で定義されていた「#ff9」を透明色「transparent」に書き換えることで、黄色が出なくなりました。

• background-color:transparent;

ブログで黄色や青色が発生するパターン

今ではブログでホームページを作成する人も多いので、reset.css　など利用することも少なくなっているかもしれませんね。それでもブログでもこういった現象に出くわすこともあるようです。

その場合にはどうすれば良いかといえば、同じように「ins」タグの背景色を透明色に指定すればOKです。記述の仕方は以下のとおり。

• ins{
  background-color:transparent;
  }

これを指定しても消えない場合は、強制的に透明色にする、ということで、

• ins{
  background-color: transparent !important;
  }

と「!important」を付ければ、大抵黄色や青色はなくなります。

注意点

大抵の場合は問題無いと思いますが、一応注意点を。

私の場合は、自分で作った手作りサイトでしたので、今回の ins タグの背景色を透明にしても問題ないだろう、ということは分かっていてこの修正をしています。

ブログなどでは、ins がどのように使われているのか分かりません。この設定をして、グーグルアドセンスの見え方は良くなっても、実は他で

透明になってはいけないところが透明になってしまった！

ということも考えられることから、事前に確認する手段を１つご案内。

明らかに使ってない色に一度指定

今回の問題となった黄色や青色について、サイトやブログで明らかに使用されていない！と分かれば、透明にしても問題ないだろう、という想定は出来ます。

それでも、いやー、自分の場合は良くわからないなー、となれば、一度以下のように確認してみてください。

明らかに使ってない色に一度指定してみる！

紫やピンクなど、明らかに自分のブログなどで使用していない明るい目立つ色に一度指定してみる。

例えば、濃い目のピンクではこんな感じ。

• ins{
  background-color: rgb(255, 0, 180) !important;
  }

その後、ひと通り記事などブログ全体を見てみて、その色が出てなければ、透明にしても影響がないだろう、ということが分かると思います。

まとめ

• とても便利なグーグルアドセンス。
• レスポンシブ広告で更に便利になりました。
• 変な黄色や青色などが出るときは、ins タグに透明色を指定してみよう

これであなたのサイトにとっても、そこを訪れるお客さまにとっても、良い結果につながると良いですね。

最後に

この記事を見ている方は、ホームページやブログをやっている方が多いでしょう。広告収入は上がってますか？クリック数はどうでしょう？

私は自分の経験を通し、ネットを使って自宅でも海外でもお金を稼ぐ方法をメルマガを通して無料でお伝えしています。

意外に、なんだ、こいうことでよかったんだ、という発見がきっとあります。是非以下の無料メールマガジンに登録してみてください。