GoogleAdsenseのレスポンシブ広告がモバイル表示ではみ出る問題をCSSで解決

GoogleAdsenseのレスポンシブ広告を使用していて、モバイル表示の時に画面幅いっぱいに設定されてしまって困っていました。(PCだと問題なく表示したいdivの中に表示されていた)

他の記事に解決法としてよく公開されている、Adsenseコードのstyleをinline-blockにしたり、data-ad-formatをrectangleにしたりいろいろ試しましたがダメでした。今回、CSSを使用した方法でうまく問題が解決できたので、備忘録代わりに公開します。

 

Adsenseコードを<div class=”ad”></div>で囲む

こうすることで、表示されるすべてのアドセンス広告が<div class=”ad-area“></div>要素として出力されます。

<div class="ad">
<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<ins class="adsbygoogle"
style="display:block"
data-ad-client="ca-pub-xxxxxxxxxxxxxxxx"
data-ad-slot="xxxxxxxxxx"
data-ad-format="auto"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
</div>

 

CSSを追加

親divにoverflow: hidden;を設定することで、余白内に収まって表示できるようになります。

.ad-area {
         overflow: hidden;
}

 

 

以上で、GoogleAdsenseのレスポンシブ広告のモバイル表示がうまく要素内に収まっていたらOKです。