ある日突然、Googleアドセンスの広告サイズがサイトのページ幅サイズに大きく広がってしまいました。
それまではCSSでサイズを指定していたんですが、それが突然、効かなくなってます。
原因はアドセンスのJavaScriptでした。その対処方法です。
ある日突然、広告がページ幅いっぱいに広がってはみ出る
2017年11月末、Googleアドセンスの広告が、ページ幅いっぱいに広がるようになってしまいました。
タイル状に配置したサイト内ページの記事のリンクの中に、Googleアドセンスのインフィード広告を差し込んでいます。
（アドセンスの関連記事みたいなものを独自作成したものです。）
その広告が突然巨大表示されるようになりました。ページが大きく崩れてしまったので、緊急な対応が必要でした。
原因は、cssで指定しているコンテンツのサイズが、アドセンスのJavaScriptで指定されたhtmlのstyle属性で上書きされていることでした。
アドセンス広告のサイズの制御はcssで行っています。
これではcssで対応しようとしてもムリです。そこで最終手段に出ることにしました。
Googleアドセンスのコードに直接サイズを指定する
そこで、アドセンスのコードのstyleで直接サイズを指定する修正を行いました。修正内容は次にようになります。
<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<ins class="adsbygoogle gads"
style="display:block; width:258px; max-height:258px;"
data-ad-format="fluid"
data-ad-layout-key="******"
data-ad-client="******"
data-ad-slot="*****"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>insタグのstyle属性でサイズ指定をしました。これで修正できました。
これはあくまで暫定措置
これはあくまで最終手段で暫定措置です。
この方法は推奨される方法ではありません。アドセンスの規約は貼り付けコードの改造は禁止しています。これが改造にあたるのかさえ分かりません。
また一般的には、コンテンツのサイズ指定はCSSで行い、htmlのstyle属性での指定は行いません。
さらにこの方法では、レスポンシブなサイズで広告を表示するものには対応できません。ぼくの場合は、タイル状の広告はスマホとサイズが同じなのでできました。
（@mediaを書いてしまえばできますが、style属性が長くなります。）
Googleが何かの修正を行なったから発生したのかもしれません。とりあえずこのままで様子を見ようと思います。
