display:flexを使うとGoogle AdSenseの広告がずれる時

レスポンシブデザインに便利なCSSのflex。

そのflexに問題点がありました。

それはGoogle AdSenseの広告がずれる時があります。

幅が固定されているdiv内等では問題ありませんが、
幅を指定せずにディスプレイサイズで可変する場合です。

当サイトはページネーションの上に幅が可変式の広告枠を設けています。
サイドバーが出ないタブレット幅以下の端末では問題ありませんが、
PCでは枠内に収まらず、サイドバーまで広告が右にズレて表示されてしまいます。

こんな感じです。

原因はGoogle AdSenseのスクリプト

//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js

これの挿入位置です。

例えばこのタグが広告の前後やヘッダーに入っていると
広告がズレて表示される形になります。

解決方法ですが実に簡単です。
先ほどのスクリプトをフッターで読み込むことです。

WordPressならこんな感じになりますね。

function b2n_required_script(){
       wp_enqueue_script( 'google-adsense-js', '//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js', array(), null , true );
}
add_action('wp_enqueue_scripts','b2n_required_script');

function.phpに上記プログラムを記述すれば、
フッターでGoogle AdSenseのスクリプトが読み込まれます。

そして広告の前後やヘッダーに


<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>

こんなスクリプトの記述があれば削除してください。
これを消さないと解決しません。

で、そんな訳でフッターで読み込むことで、

広告のズレが解消されました。
めでたし、めでたし。

Simple DaysではGoogle AdSense専用ウィジェットにて対策済みですので、
上記対策は不要です。

是非フォローしてください

最新の情報をお伝えします

やーまん

山奥に移住し、のんびり暮らしています。
日々の事で感じた事や考え方などを備忘録として残しています。

関連ページ

TIPS