はじめに
AdSenseを導入したあとのスマホ表示で、「なぜか横スクロールが発生する…」という現象に悩まされたことはありませんか？
私自身、広告の設置後から突然スマホ画面が横にズレるようになり、 overflow-x: hidden; をつけても直らず、レイアウト調整にかなりの時間を費やしました。
当初はCSSやテーマの構造を疑っていましたが、原因はまさかの 「AdSense広告がスマホ幅を超えて表示されていた」というシンプルなものでした。
本記事では、実際に起きた横スクロールの原因と、CSSだけで簡単に直せた方法を共有します。 同じように悩んでいる方の参考になれば幸いです。
現象の詳細
- AdSense広告をWordPressのサイドバーに追加した直後から、スマホ表示で横スクロールが発生
- ページ全体が右にズレて、UX的にも非常に悪い状態
body { overflow-x: hidden; }では一時的に隠せるが、根本的な解決にはならない
Chromeの検証ツールでbodyを選択してみると、幅をオーバーしている要素がサイドバー内に存在していることがわかりました。
原因の特定：犯人はAdSense広告！
サイドバーを一時的に非表示にしてみたところ、横スクロールが完全に消えました。
さらに調査してみると、AdSenseが自動的に出力する <ins> タグ（広告ブロック）が、スマホ画面より広いサイズで表示されていたのが原因でした。
<ins class="adsbygoogle" style="display:block" data-ad-client="..." data-ad-slot="..." data-full-width-responsive="true"></ins>このように、data-full-width-responsive=”true” が指定されていても、CSSで制御しないと幅を突き抜けてしまうことがあります。
解決策：CSSで広告要素を強制的に制限
以下のCSSを追加することで、横スクロールが完全に解消されました。
※class名は置き換えてください
.sidebar img,
.sidebar iframe,
.sidebar ins {
max-width: 100%;
height: auto;
display: block;
}
.ad-container-sideber {
max-width: 100%;
overflow-x: hidden;
}
.ad-container-sideber ins {
width: 100% !important;
max-width: 100% !important;
display: block !important;
}ポイントは !important を使って強制的に上書きすること。 AdSenseはJavaScriptによって広告があとから描画されるため、通常のCSS指定では効かないことがあります。
まとめ
- スマホ表示で横スクロールが出るときは、まず 「画面より大きい要素がないか」 を疑う
- AdSense広告は、思っている以上に 幅を超えてくる ことがある
max-width: 100%と!importantを併用してCSSで制御するのが一番シンプルで確実な方法
AdSenseによる表示崩れは見落とされがちですが、対処方法さえわかればすぐに解決できます。 同じように困っている方の助けになれば嬉しいです！