Google AdSense（グーグルアドセンス）のバナー表示
このMASAa.netとZMASAa.blogには「Google AdSense（グーグルアドセンス）」のバナーを貼らせて頂いております。
と言っても「Google AdSense（グーグルアドセンス）」からの利益については、今のところ微々たるものですが(^^ゞ
Google AdSense（グーグルアドセンス）のバナー表示の問題
それはそれで良いとして、今回はその「Google AdSense（グーグルアドセンス）」のバナー表示について問題が有ります。
PCで見るときには特に問題無く表示されます。
しかし、スマートフォンで見ると一部の「Google AdSense（グーグルアドセンス）」のバナーが枠を超えて画面いっぱいに表示されてしまいます。
この症状は、WordPressテーマ Cocoonで構築しているMASAa.netでは発生していません。
この症状が発生するのは、WordPressテーマ THE THOR（ザ・トール）で構築しているZMASAa.blogのみの症状となります。
Google AdSense（グーグルアドセンス）のバナーを枠内に表示させる
色々と調べてみると、これは特に不具合では無く「Google AdSense（グーグルアドセンス）」の仕様のようです。
「Google AdSense（グーグルアドセンス）」は、縦表示のモバイル端末に限って記事内広告が効果的になるように、自動的にバナーを画面幅いっぱいに表示されるようになっているとのことでした。
バナーを画面幅いっぱいに表示したくない場合は、広告コードを変更することで対応することができます。
それは、記事内広告の広告コードに
を追加することで枠内に表示することができます。
実際に「Google AdSense（グーグルアドセンス）」から提供されるコードは
<ins class="adsbygoogle"
style="display:block; text-align:center;"
data-ad-layout="in-article"
data-ad-format="fluid"
data-ad-client="ca-pub-__________"
data-ad-slot="__________"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
となっています。
これを
<ins class="adsbygoogle"
style="display: block; text-align: center;"
data-ad-layout="in-article"
data-ad-format="fluid"
data-ad-client="ca-pub-__________"
data-ad-slot="__________"
data-full-width-responsive="false"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
のように「 data-full-width-responsive="false"」追加すればOKです。
また、提供されるコードが
<!-- koukoku_zmb_1 -->
<ins class="adsbygoogle"
style="display:block"
data-ad-client="ca-pub-__________"
data-ad-slot="__________"
data-ad-format="auto"
data-full-width-responsive="true"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
の場合には、
<!-- koukoku_zmb_1 -->
<ins class="adsbygoogle"
style="display: block;"
data-ad-client="ca-pub-__________"
data-ad-slot="__________"
data-ad-format="auto"
data-full-width-responsive="false"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
「true」を「false」に書き換えればOKです。
念のため、「<div align="center">～<div>」で囲んで中央設定しておきます。
<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<!-- koukoku_zmb_1 -->
<ins class="adsbygoogle"
style="display: block;"
data-ad-client="ca-pub-__________"
data-ad-slot="__________"
data-ad-format="auto"
data-full-width-responsive="false"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script></div>
最後に
上記対策を行ったことで、このように他のバナーと同様に枠内に収まって表示することが出来るようになりました。
但し、「Google AdSense（グーグルアドセンス）」では、収益拡大の機会を逃す結果となる可能性もありますのでご留意くださいとのことです。
自分の場合は、それよりもブログのレイアウトが崩れるのが嫌なので、全て枠内に表示させるようにしました。
※参照サイト
コメント