アドセンスのレスポンシブ広告が表示されない原因と直し方

• 公開日 : 2015年12月15日
• カテゴリ : Web制作

このブログはスマホ表示のためにレスポンシブ仕様になっている。
そのような理由から、アドセンス広告もレスポンシブのものにしています。

例えば記事下の広告はPC表示だとこうなっている。

それがスマホ表示では以下のようになります。
レスポンシブですから、表示幅がどのようなサイズだとしても広告がコンテンツ領域を左右にはみ出すことはありません。

補足：スマホ表示の際に広告が1つになるのはレスポンシブだからというわけではなく、2つ連続で縦に並ぶと占有面積が長過ぎるので1つを非表示にしています。

レスポンシブ広告が表示されない原因

このレスポンシブなアドセンス広告を設置した時、広告が表示されない場合があります。
「しばらくしてから配信されるのかな？」と思って丸一日ぐらい待っていても、ずっと表示されない。
ソースを確認しても間違いなく広告コードが記述されているのに表示されない場合、これには原因があります。

その原因は、親要素に幅が指定されていないからです。

例えば先ほど画像でお見せしたこのブログ内の広告の場合、

これは以下のようなコードで記述しています。(li要素をfloatで横並びにする)

<ul>
  <li>ここにアドセンスのコード</li>
  <li>ここにアドセンスのコード</li>
</ul>

この場合、li要素に幅(width)が設定されていないと広告が表示されません。
高さ(height)は設定しなくても問題ありません。

直し方

仮に広告の幅を300ピクセルにするならば、

ul li{
  width : 300px;
}

が必要になります。
レスポンシブの広告ですから、overflow : hidden;は書かなくても親要素(li)の横幅をはみ出すような広告は配信されないと思われます。(私は設定していません)
しかし、このままだとスマホ表示の際にli要素がコンテンツ領域をはみ出してしまう可能性があるため、

ul li{
  width : 300px;
  max-width : 100%;
}

と追記しておくと良いでしょう。
もしくはスマホ表示の時だけ以下のように幅の設定を上書きするのもOKです。

@media screen and (max-width : 320px){

ul li{
  width : 100%;
}

}

原因がわかってしまえば簡単ですね。