ツイート
シェア
LINEで送る
B! はてぶでブックマーク
Pocketでブックマーク
RSSフィード

Google AdSense 広告がはみ出るのを直す方法

network image

ある日突然、Googleアドセンスの広告サイズがページ幅サイズに大きく広がってしまいました。

それまではcssでサイズを指定していて、突然、cssが効かなくなりました。その対処方法です。

ある日突然、広告がページ幅いっぱいに広がってはみ出る

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が何かの修正を行なったから発生したのかもしれません。とりあえずこのままで様子を見ようと思います。

コメントを残す

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください