【Google AdSense】解決→|広告バナーがはみ出る|Failed to load resource|TagError|Unexpected token% エラー
目次
【Google AdSense】解決→|広告バナーがはみ出る|Failed to load resource|TagError|Unexpected token% エラー
この記事内では、Google AdSenseを記事内に設定した際に遭遇した、様々なトラブルをご紹介しています。
自分で対応したもののみ載せているので、これ以外のエラーもあるかもしれませんが、もし同じようなケースだと思われた場合は参考にしてみてください。
JavaScriptのコンソール(Console)に表示されるエラーについて

JavaScriptのコンソール(Console)に表示されるエラーの赤い文字のエラーは修正しましょう。
黄色い文字のエラーは基本的には、そのままで大丈夫だと思います。
ブラウザの幅をものすごく狭めて表示した場合、赤文字のエラーが表示される場合がありますが、一般的なブラウザの表示幅でエラーが表示されなければ大丈夫です。
JavaScriptのコンソールエラーはページ読み込み時、または、更新時に表示内容が作られます。
幅を縮めたり、広めたりしてから更新し、エラーが出ていないかを確認しましょう。
JavaScript:コンソール(Console)エラーの簡単解説
広告のロードエラー(Google AdSense広告が表示されませんでした)
Failed to load resource: the server responded with a status of 400 ()
AdSenseの広告がまだ準備できていなかったり、何らかのエラーで表示できない状態
AdSense画像幅の領域サイズエラー(画像が入りきりませんでした)
TagError: Fluid responsive ads must be at least 250px wide
Unexpected token % エラー
AdSenseの広告が表示エリア内に入りきらない状態
AdSense広告の表示が崩れないようにCSSを設定する
Google AdSense内のCSSに注目しましょう。
「クラス:adsbygoogle」には、以下のように設定してありますが、「display: block」の後にはスタイルを何も設定しないのが、おすすめです。
1 |
display: block; |
AdSense広告の上下に空白:マージン(margin)を設定する
ただ、AdSense広告の配置が初期表示のままだと、記事の本文とAdSense広告がくっつき、ポリシー違反となってしまう可能性もあります。
広告前後に空白を入れるとそれが解決します。
広告の前後をあけたい時、空白行(margin)を入れたい時は、AdSense広告のタグをdivタグで囲い、以下のスタイルを指定します。
1 |
margin: 1em auto; |
AdSense広告にpaddingは設定しない
AdSense広告にpaddingの設定をしてしまうと、広告表示のためのエリアが狭くなり、広告全体が表示されないことがあります。
AdSense広告がどうしてもはみ出る
AdSense広告がどうしてもはみ出てしまう時は、「overflow」を設定しましょう。
値は「scroll」を設定します。
hiddenにしてしまうと広告の表示されない部分ができてしまいますので、控えましょう。
1 |
overflow: scroll; |
最後まで読んでいただき、ありがとうございました。