モバイル表示でもAdSense広告を親要素に収める方法

去年の11月にWordPressからはてなブログへ引っ越してきてから(関連記事: はてなブログをはじめました)、少しずつサイトのデザインをカスタマイズしています。

その過程で、サイトの背景色とは異なる色を親要素(hatena-module)で指定したところ、AdSense 広告によるデザイン崩れが発生しました。

具体的には、サイトに設置したAdSenseのレスポンシブ広告をモバイルデバイスで表示した際、広告が親要素の幅を無視して横に広がってしまうという現象です。

これは、AdSenseのレスポンシブ広告の既定の挙動が、訪問者のモバイル端末の画面幅いっぱいに拡大して表示する“全幅レスポンシブ広告”になっているためです。
(Googleの実験では、全幅レスポンシブ広告をモバイル端末で表示した場合、収益が最大化されたらしい)

しかし、今回のようにデザインの都合上、広告を特定のカラムや最大幅を指定したコンテナ内に収めたいケースもあります。

その場合は、サイトに貼り付けている広告ユニットコードのdata-full-width-responsiveをtrueではなく falseに設定することで対応できます。

<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-xxxxxxxxxxxx"
     crossorigin="anonymous"></script>
<!-- 広告ユニット名 -->
<ins class="adsbygoogle"
     style="display:block"
     data-ad-client="ca-pub-xxxxxxxxxxxx"
     data-ad-slot="xxxxxxxxxx"
     data-ad-format="auto"
     data-full-width-responsive="false"></ins>
<script>
     (adsbygoogle = window.adsbygoogle || []).push({});
</script>

この設定により、広告は親要素の幅を基準に表示され、モバイル環境でも横にはみ出すことなく配置できます。

ただし、前述したようにdata-full-width-responsive="false"を指定すると、全幅レスポンシブ広告が持つ潜在的な収益性が低下する可能性がある点には注意が必要ですね。

ソース: レスポンシブ広告のタグパラメータの使用方法 - Google AdSense ヘルプ