AdSense広告をレスポンシブ対応にするには？基本は自動調整、崩れる場合だけCSSで対処

スマホで見たときに、AdSense広告だけが横にはみ出す。あるいは、広告の下に不自然な空白ができる。こういう表示崩れを見ると、つい広告コードそのものを直したくなります。

でも、最初に疑う場所は広告コードではありません。現在のAdSenseディスプレイ広告は、基本的に表示できるスペースに合わせてサイズを調整する仕組みです。まずは標準のレスポンシブ広告を使い、それでも崩れるときだけ、広告を置いている側のレイアウトを順に確認するのが安全です。

広告がはみ出す。最初に見るのはコードではない

広告がスマホ画面から飛び出していると、「広告サイズを小さくしなければ」と思いますよね。

ただ、広告は単独で置かれているわけではありません。記事本文の幅、サイドバー、ブロックの余白、テーマのCSS、広告を囲むボックスなど、周りのレイアウトの影響を受けます。広告コードだけを何度も貼り替えても、親の箱に問題があれば直りません。

私なら、まず次の順で見ます。

1. 記事本文の横幅が、スマホで画面からはみ出していないか
2. 広告を囲む要素に、固定の幅や高さが指定されていないか
3. テーマや最適化プラグインが、広告を非表示・移動していないか
4. 広告ユニット自体が、現在の標準コードで設置されているか

この順番なら、古いコードを継ぎ足して状況を複雑にせずに済みます。

見えている症状	最初に確認する場所
広告だけが横にはみ出す	親要素の幅・本文カラムの固定幅
広告の下が切れる	親要素の固定高さ・overflow指定
ページを開いた直後だけ崩れる	遅延読み込み・表示切替用JavaScript
テーマ変更後からおかしい	テーマCSS・最適化プラグインの設定

いまのAdSense広告は、基本的にレスポンシブで考える

Googleの公式ヘルプによると、ディスプレイ広告ユニットは利用できるスペースやレイアウトに合わせて表示される、レスポンシブな動作が基本です。画面の向きを変えたときも、新しいレイアウトに合わせて調整されます。

つまり、「パソコン用の広告」と「スマホ用の広告」を最初から別々に作り、JavaScriptで無理に切り替える発想は、通常は必要ありません。広告ユニットを作るときは、まずAdSense管理画面で現在の標準のレスポンシブ設定を選び、発行されたコードをそのまま設置します。

それでも表示が気になるなら、次の疑問です。レスポンシブなのに、なぜ崩れるのでしょうか。

レスポンシブ広告でも崩れる4つの原因

親要素に幅がない、または幅が狭すぎる

広告は、置かれた場所の横幅をもとにサイズを決めます。親要素の幅が正しく計算できなければ、広告側も判断できません。

記事本文の中だけでなく、タブ、スライダー、折りたたみボックス、左右カラムなどに入れた場合は特に確認します。表示されていないタブの中に広告を先に読み込ませるような作りも、原因になり得ます。

親要素の高さを固定している

「高さは○pxまで」と決めた箱の中に広告を入れると、広告が収まりきらなかったり、下が切れたりします。見た目をそろえるための固定高さが、広告表示には逆効果になることがあります。

広告のサイズ計算より先に、別のJavaScriptが動く

Googleも、広告のサイズが決まる前に第三者のJavaScriptが広告を隠すと、表示上の問題が起きると案内しています。遅延読み込み、タブ切り替え、表示速度の最適化などを追加したあとに崩れたなら、その変更を一度疑ってみる価値があります。

テーマCSSが広告を押し込めている

overflow: hidden、固定幅、極端な左右余白などが、広告の見え方を変えることがあります。広告だけを直そうとせず、同じ場所にある画像や表も一緒にはみ出していないかを見ると、テーマ側の原因を見つけやすくなります。

固定サイズを使いたい。CSSで調整してよいのはどこまで？

標準のレスポンシブ広告で解決できない事情もあります。たとえば、記事の途中だけサイズをそろえたい、特定の表示幅でだけレイアウトが崩れる、といった場合です。

そのときも、広告コードを独自のJavaScriptで書き換える前に、Googleが案内しているCSSメディアクエリを使った方法を確認してください。画面幅ごとに広告の大きさを指定する公式例があり、レスポンシブ広告コードを前提に調整できます。

ここで大事なのは、サンプルをそのまま貼って終わりにしないことです。広告ユニットごとに専用のクラス名を付け、実際のテーマの本文幅に合わせて確認します。別の記事やサイドバーの広告まで意図せず変わらないように、対象を絞るのがポイントです。

画面幅の境目は、一般論で決めるよりも自分のサイトで見ます。320px、390px、タブレット幅、パソコン幅の順に確認すると、読者が実際に見る崩れを拾いやすくなります。

2015年に紹介した方法を、今は勧めない理由

この記事を最初に書いた2015年には、端末幅をJavaScriptで判定し、広告サイズや広告枠を切り替える方法を紹介していました。

ただ、その中には現在のAdSense実装として勧められない古いshow_ads.jsやHTTPのコードが含まれていました。今はその方法を残すより、標準のレスポンシブ広告を使い、必要な場合だけ公式案内の範囲でCSSを調整する方が分かりやすく、安全です。

広告の表示方法は変わります。だからこそ、古い記事のコードを見つけたら「まだ動くか」だけではなく、「いま公式がどの方法を案内しているか」を見直すようにしています。

公開前に確認したいチェックリスト

• 320px・390px・768px・パソコン幅で、ページ全体に横スクロールが出ていない
• 広告の上下に不自然な空白や切れがない
• 広告と本文、メニュー、ボタンのクリック領域が重なっていない
• 広告を囲む要素に、不要な固定幅・固定高さを入れていない
• テーマ変更や最適化プラグインの設定を変えた直後なら、表示をもう一度確認した
• コードは古い記事や検索結果からではなく、AdSense管理画面と公式ヘルプで確認した

収益面だけを考えると広告を増やしたくなりますが、本文が読みにくくなれば本末転倒です。広告を置いたあとに、読者として記事を最後までスクロールしてみる。このひと手間で気付くことは意外と多いです。

まとめ：まず標準のレスポンシブ広告、例外だけを調整する

AdSense広告をレスポンシブ対応にするときは、最初から広告コードを複雑にしないことです。

まずは標準のレスポンシブ広告を使う。崩れたときは親要素、テーマCSS、第三者JavaScriptを確認する。それでも必要な場合だけ、Google公式のCSSメディアクエリの手順で調整する。この順番なら、古いコードを増やさずに、読みやすい広告表示を保ちやすくなります。