Google AdSense 広告がレスポンシブルされない時の対応

広告

前置き


Google Adsenseを設置しています。
アドセンスの管理画面側で広告サイズをレスポンシブルにして設置しているのですが、それでもスマホサイズだとレイアウトからはみ出てしまうことがありました。


対処法1 overflow: hiddenする


アドセンスのコードはそのままで、外枠のdivで「overflow: hidden;」してあげる。

<div style="overflow: hidden;">
<ins class="adsbygoogle"
style="display:block"
data-ad-client="xxx-xxx-xxxxxxxxxxxxxxxx"
data-ad-slot="xxxxxxxxxx"
data-ad-format="auto"
data-full-width-responsive="true"></ins>
<script>
window.onload = function() {(adsbygoogle = window.adsbygoogle || []).push({});}
</script>
</div>

大抵はこれで解決するはず。

対処法2 左右にmarginを設定する


自分のケースだと、「overflow: hidden;」でレイアウト内には収まったものの、左右に見切れてます。



なので、左右のmarginを追加することで解決しました。
<div style="overflow: hidden; margin:0px 10px 0 10px;">
<ins class="adsbygoogle"
style="display:block"
data-ad-client="xxx-xxx-xxxxxxxxxxxxxxxx"
data-ad-slot="xxxxxxxxxx"
data-ad-format="auto"
data-full-width-responsive="true"></ins>
<script>
window.onload = function() {(adsbygoogle = window.adsbygoogle || []).push({});}
</script>
</div>

参考


https://tuono034s.com/web-entry/2751/
https://itbenricho.com/adsense-hamidashi.html
広告