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

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

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

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

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

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

こんな感じです。

原因はGoogle AdSenseのスクリプト

これの挿入位置です。

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

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

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

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

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

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

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

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

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

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