【Google AdSense】解決→｜広告バナーがはみ出る｜Failed to load resource｜TagError｜Unexpected token％エラー

2019-08-31

この記事内では、Google AdSenseを記事内に設定した際に遭遇した、様々なトラブルをご紹介しています。

自分で対応したもののみ載せているので、これ以外のエラーもあるかもしれませんが、もし同じようなケースだと思われた場合は参考にしてみてください。

JavaScriptのコンソール(Console)に表示されるエラーについて

JavaScriptのコンソール(Console)に表示されるエラーの赤い文字のエラーは修正しましょう。

黄色い文字のエラーは基本的には、そのままで大丈夫だと思います。

ブラウザの幅をものすごく狭めて表示した場合、赤文字のエラーが表示される場合がありますが、一般的なブラウザの表示幅でエラーが表示されなければ大丈夫です。

JavaScriptのコンソールエラーはページ読み込み時、または、更新時に表示内容が作られます。

幅を縮めたり、広めたりしてから更新し、エラーが出ていないかを確認しましょう。

広告のロードエラー(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の広告が表示エリア内に入りきらない状態

Google AdSense内のCSSに注目しましょう。

「クラス:adsbygoogle」には、以下のように設定してありますが、「display: block」の後にはスタイルを何も設定しないのが、おすすめです。

display: block;

1	display: block;

ただ、AdSense広告の配置が初期表示のままだと、記事の本文とAdSense広告がくっつき、ポリシー違反となってしまう可能性もあります。

広告前後に空白を入れるとそれが解決します。

広告の前後をあけたい時、空白行(margin)を入れたい時は、AdSense広告のタグをdivタグで囲い、以下のスタイルを指定します。

margin: 1em auto;

1	margin: 1em auto;

AdSense広告にpaddingの設定をしてしまうと、広告表示のためのエリアが狭くなり、広告全体が表示されないことがあります。

AdSense広告がどうしてもはみ出てしまう時は、「overflow」を設定しましょう。

値は「scroll」を設定します。

hiddenにしてしまうと広告の表示されない部分ができてしまいますので、控えましょう。

overflow: scroll;

1	overflow: scroll;

最後まで読んでいただき、ありがとうございました。