はじめに
Google AdSenseを設置したときに、広告がはみ出して 横スクロールバーが出てしまう トラブルはよくあります。特にレスポンシブ広告ユニットをPCやスマホに組み込むと、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による表示崩れは見落とされがちですが、対処方法さえわかればすぐに解決できます。 同じように困っている方の助けになれば嬉しいです！
実務Tips（ベストプラクティス集）
広告コンテナに最大幅を設定する
親要素の幅を超えないようにして、横スクロールを防ぎます。
iframe にもレスポンシブ対応を付与する
AdSenseの広告はiframeで読み込まれるため、親要素のスタイルだけでなく、広告自体をCSSで調整する必要があります。
PC・スマホでの動作を必ず確認
Chrome DevToolsなどを使い、複数のデバイス幅で広告がはみ出していないかを確認しましょう。
横スクロールが発生する場合の緊急回避策
サイト全体で横スクロールを禁止する方法。ただし、根本解決にはならないため、最終手段としてのみ利用します。
よくある質問
Q. なぜAdSense広告で横スクロールが出てしまうのですか？
A. レスポンシブ広告が親要素より大きく描画される場合があるためです。特に横幅指定が不適切な場合に起こりやすいです。
Q. body全体に overflow-x: hidden; をかけても大丈夫ですか？
A. 一時的な回避策としては有効ですが、必要な要素まで隠れてしまうリスクがあるため、推奨されません。広告コンテナごとに調整するのがベストです。
Q. WordPressで簡単に対応できますか？
A. はい。テーマの追加CSSやカスタムHTMLブロックにスタイルを記述することで対応可能です。
Q. レスポンシブ広告と固定サイズ広告はどちらがいいですか？
A. レイアウト崩れを避けたい場合は固定サイズ広告が安定しますが、収益性や表示最適化を考えるとレスポンシブ広告が推奨されます。