Google Adsense の アンカー広告で余分な余白ができる

[Vektor,Inc]

Google Adsenseを貼るとスマホ表示の際にヘッダー崩れます。対応いただければと思います。

[石川＠Vektor,Inc.]

この症状は、Googleのアンカー広告が勝手に余白を追加して、
広告を閉じても余白を削除せずに放置している事が原因で、
他のテーマでも同様の現象が発生します。

これを回避するには強い指定を書く必要があり、それによって他に悪影響を及ぼす可能性があるので、現状テーマ側での対応は想定していません。

対応策としては

A.アンカー広告を下に表示されるようにする
B.CSSで強制的に余白を削除指定する

の2パターンがあります。

A.アンカー広告を下に表示されるようにする

<script async src=”//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js”></script>
<script>
(adsbygoogle = window.adsbygoogle || []).push({
google_ad_client: “ca-pub-**************”,
enable_page_level_ads: true,
overlays: {bottom: true} // ← ★これを追加
});
</script>

B.CSSで強制的に余白を削除指定する（ExUnit > CSSカスタマイズ などに追加）

デザインが Otigin の場合

@media (max-width: 991px){
    body.device-mobile, body.device-pc {
    padding-top: 0px !important;
}
}

デザインが Variety の場合

@media (max-width: 991px){
    body.device-mobile, body.device-pc {
    padding-top: 50px !important;
}
}

[投稿者]

投稿