Googleアドセンスのレスポンシブ広告は、スマホやタブレットなど様々な画面サイズに自動対応してくれる便利な広告です。
しかし、
- 広告がはみ出す
- 横スクロールが発生する
- レイアウトが崩れる
- 広告が異常に大きく表示される
といったトラブルが発生することがあります。
この記事では、スマホでレスポンシブ広告が崩れる主な原因と解決方法を解説します。
レスポンシブ広告とは？
レスポンシブ広告とは、Googleアドセンスが画面サイズに応じて自動的に広告サイズを調整する広告形式です。
通常はスマホ・タブレット・PCで最適なサイズが表示されます。
スマホで広告が崩れる主な原因
親要素の幅が固定されている
最も多い原因です。
例えば、
width: 1200px;
のような固定幅を指定していると、スマホ画面で広告がはみ出します。
HTMLの閉じタグが不足している
広告周辺の
- divタグ
- sectionタグ
- pタグ
などが正しく閉じられていない場合、広告配置が崩れることがあります。
古い広告コードを使用している
以前作成した広告ユニットを長期間利用している場合、最新環境との相性問題が発生することがあります。
CSSで広告サイズを強制変更している
以下のようなCSSは要注意です。
.adsbygoogle{
width:1000px;
}
Google推奨外の設定はレイアウト崩れの原因になります。
テーマやプラグインとの競合
WordPressテーマや広告管理プラグインによっては、
- SWELL
- AFFINGER
- Cocoon
- WP QUADS
などとの組み合わせで表示が乱れる場合があります。
解決方法① レスポンシブ広告を再作成する
Googleアドセンス管理画面から、
「ディスプレイ広告」
↓
「レスポンシブ」
を選択して新規作成しましょう。
古い広告より安定することがあります。
解決方法② width指定を削除する
CSSに以下のような固定サイズ指定がある場合は削除します。
width:1200px;
代わりに、
max-width:100%;
を利用します。
解決方法③ 横スクロールを確認する
スマホで横スクロールが発生している場合、
広告以外の要素が原因のケースもあります。
確認ポイント
- 表
- 画像
- コードブロック
- iframe
これらが画面幅を超えていないか確認しましょう。
解決方法④ Googleの自動最適化を利用する
Googleアドセンスのレスポンシブ広告は、基本的にサイズを指定しない方が安定します。
広告コードはそのまま利用しましょう。
解決方法⑤ SWELL利用者の場合
SWELLでは、
- 広告タグ管理
- 記事内広告
- ウィジェット広告
が利用できます。
広告コードを直接記事内へ大量に貼り付けるよりも、SWELL標準機能を利用した方がトラブルが少なくなります。
WP QUADS利用時の注意点
WP QUADSで発生しやすいのが、
- 同一広告の重複表示
- 固定サイズ広告の利用
- 不要なラッパー要素
です。
スマホで崩れる場合は一度広告設定を見直しましょう。
ダンデライオンゲームブログ向けおすすめ設定
SWELL＋WP QUADS環境なら、
アイキャッチ下
レスポンシブ広告
記事下
レスポンシブ広告
関連記事下
Multiplex広告
この構成が比較的安定しやすいです。
FAQ
レスポンシブ広告なのに崩れるのはなぜ？
テーマやCSS、プラグインとの競合が原因の場合があります。
固定サイズ広告は使わない方がいい？
スマホ中心ならレスポンシブ広告がおすすめです。
SWELLとの相性は悪い？
基本的には良好です。
広告が表示されない場合は？
広告コードの設置ミスやGoogle側の配信状況を確認しましょう。
まとめ
Googleアドセンスのレスポンシブ広告がスマホで崩れる原因は、
- 固定幅指定
- CSS競合
- HTMLエラー
- 古い広告コード
- プラグインとの競合
であることがほとんどです。
まずは固定サイズ指定を見直し、レスポンシブ広告を利用することで多くの問題は解決できます。
特にSWELLやWP QUADSを利用している方は、広告設置方法を統一することで表示崩れを防ぎやすくなります。