WordPressTHE THORGoogle

【THE THOR】グーグルアドセンスのバナーを枠内に表示させる

アイキャッチ画像 Google AdSense
スポンサーリンク

Google AdSense(グーグルアドセンス)のバナー表示

このMASAa.netとZMASAa.blogには「Google AdSense(グーグルアドセンス)」のバナーを貼らせて頂いております。

と言っても「Google AdSense(グーグルアドセンス)」からの利益については、今のところ微々たるものですが(^^ゞ

Google AdSense(グーグルアドセンス)のバナー表示の問題

それはそれで良いとして、今回はその「Google AdSense(グーグルアドセンス)」のバナー表示について問題が有ります。

PCで見るときには特に問題無く表示されます。

しかし、スマートフォンで見ると一部の「Google AdSense(グーグルアドセンス)」のバナーが枠を超えて画面いっぱいに表示されてしまいます。

【THE THOR】Google AdSenseのバナーを枠内に表示させる

この症状は、WordPressテーマ Cocoonで構築しているMASAa.netでは発生していません。

この症状が発生するのは、WordPressテーマ THE THOR(ザ・トール)で構築しているZMASAa.blogのみの症状となります。

Google AdSense(グーグルアドセンス)のバナーを枠内に表示させる

色々と調べてみると、これは特に不具合では無く「Google AdSense(グーグルアドセンス)」の仕様のようです。

「Google AdSense(グーグルアドセンス)」は、縦表示のモバイル端末に限って記事内広告が効果的になるように、自動的にバナーを画面幅いっぱいに表示されるようになっているとのことでした。

バナーを画面幅いっぱいに表示したくない場合は、広告コードを変更することで対応することができます。

それは、記事内広告の広告コードに

data-full-width-responsive="false"

を追加することで枠内に表示することができます。

実際に「Google AdSense(グーグルアドセンス)」から提供されるコードは

<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></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="__________"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>

となっています。

これを

<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></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です。

また、提供されるコードが

<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="true"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>

の場合には、

<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>

「true」を「false」に書き換えればOKです。

念のため、「<div align="center">~<div>」で囲んで中央設定しておきます。

<div align="center">
<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>

最後に

上記対策を行ったことで、このように他のバナーと同様に枠内に収まって表示することが出来るようになりました。

【THE THOR】Google AdSenseのバナーを枠内に表示させる

但し、「Google AdSense(グーグルアドセンス)」では、収益拡大の機会を逃す結果となる可能性もありますのでご留意くださいとのことです。

自分の場合は、それよりもブログのレイアウトが崩れるのが嫌なので、全て枠内に表示させるようにしました。

※参照サイト

レスポンシブ広告のタグパラメータの使用方法 - AdSense ヘルプ
レスポンシブ広告のタグパラメータを使うと、レスポンシブ広告ユニットの動作を変更できます。たとえば、お客様の規定の形状として、広告ユニ
記事内広告の全幅レイアウト - AdSense ヘルプ
Google が行ったテストの結果、縦表示のモバイル端末では、全幅サイズの記事内広告が効果的であることがわかっています。より多くの収益を上げて

コメント

タイトルとURLをコピーしました