GoogleのAdSense広告を自分のサイトやBlogに貼っている方は多いと思います。私もそうです。Webの技術を生業にこのBlogではチップスやソースをメモがわりにしているのですが、以前AdSenseの広告を貼った際、レスポンシブで構築したサイトがスマフォなどで見ると「ずれた」感じになって困りました。その時に調べたことをメモしています。
はじめ、自分のCSSの設定が影響しているのではないかと思ったのですが、調べるとAdSense側の設定変更で対応できるらしく、このサイトでも起きたずれを直すことができました。
設定は簡単！AdSenseの広告のソースに「data-full-width-responsive=”false”」を追加するだけですね。
Googleで紹介されていた例を下記に書いておきます。
|
1 2 3 4 5 6 7 8 9 10 11 |
<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-1234" data-ad-slot="5678" data-full-width-responsive="false"></ins> <script> (adsbygoogle = window.adsbygoogle || []).push({}); </script> |
貼り付けたAdSenseの広告ソースの最後の行に「data-full-width-responsive=”false”」を追加するか、data-full-width-responsive=の設定をfalseにするかです。
ただ、Googleサイドからは下記のような注意がコメントされています。ご理解ください。
Google が行ったテストの結果、縦表示のモバイル端末では、全幅サイズの記事内広告が効果的であることがわかっています。より多くの収益を上げていただけるよう、ユーザーの端末が縦向きの場合は、記事内広告は自動的に画面幅いっぱいに表示されるようになっています。
記事内広告でこの表示方法（自動的に画面幅いっぱいに展開）を使用したくない場合は、広告コードを変更することで無効化できます。ただし、収益拡大の機会を逃す結果となる可能性もありますのでご留意ください。