【10秒で解決】スマホでアドセンスのレスポンシブが親要素をはみ出す時の解決法

アドセンスのレスポンシブは便利です。

特に何も考えなくても最適な横幅で表示してくれますが、特定の条件下で表示崩れが発生します。

スマホでのアドセンス表示

アドセンスのレスポンシブ広告のユニットはスマホで表示されるときに画面の横幅一杯に表示されるという設定が自動でなされています。

画像の通り。

背景に特段設定のない白ベタのサイトなんかだと気にならないかもしれませんが、当サイトなどはメインコンテンツと背景の色が違うので、親要素をはみ出しているように見えます。

アドセンスがはみ出す現象の解決策

解決策は非常に簡単です。

アドセンスのレスポンシブ広告のコードは以下のような感じです。

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

上記スニペットの「data-full-width-responsive=」の後ろの部分を、
「”true”」→「”false”」に変更すると親要素をはみ出すことがなくなります。