Google AdSenseから最適化の提案みたいなメールが飛んできて、開くと
「広告をレスポンシブにしませんか？」
と提案しています。
そんなアドセンスの甘い誘いに乗ってレスポンシブ広告に切り替えてみて、念のためスマホで表示を確認すると残念な気持ちになってしまいます。
広告が横幅オーバーしていて、スクロールすると横にガタガタにずれてしまうのです。
対応策を検索すると、2014年頃から対策している人もいるらしく、はてなブログのガタガタ問題はかなり根深いものと思われます。
検索結果を見てみると、はてなのエントリ部分の余白を消したり、広告にCSSを適用してoverflow:hiddenではみ出した部分を消すようにしたり、色んな対策がありましたが、既存のCSSを崩したり、そもそも広告を勝手にCSSで改変するとアドセンスのポリシー違反が怖いですよね。
それでしつこく調べてみると、公式の対応方法が見つかりました。
data-full-width-responsive パラメータによって、レスポンシブ広告ユニットがユーザーのモバイル デバイス画面の全幅サイズに拡大されて表示されるかどうかが決まります。
data-full-width-responsive パラメータの使用方法に応じて、レスポンシブ広告ユニットの動作が変わります。
モバイル デバイス画面でレスポンシブ広告ユニットが全幅サイズに自動拡張される動作をご希望でない場合は、data-full-width-responsive パラメータを "false" に設定します。ただし、これによって収益増加の機会が減る可能性があります。Google のテストにより、モバイル デバイスが縦表示の場合には全幅サイズのレスポンシブ広告の成果が高いことが判明しています。
data-full-width-responsive="true"になっていたものをdata-full-width-responsive="false"に変更すればOKです。
コードは以下のようになります。
<ins class="adsbygoogle" style="display:block;" data-ad-client="ca-pub-XXXX" data-ad-slot="XXXX" data-ad-format="auto" data-full-width-responsive="false"></ins> <script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script> <script>(adsbygoogle = window.adsbygoogle || []).push({}); </script>
これでガタガタ問題は解決します。
最もシンプルな解決策です。
広告を導入した後にスマホで表示を確認してみたら横にガタガタずれて萎えた、という人はぜひ、レスポンシブ広告の横幅表示のパラメータを変更してみてください。