2021-07-23

アドセンス広告を表示する際、左右に余白を付けたい

Google Adsense広告をスマホデバイスで表示する際、横幅が100%で配置されます。デバイスの幅いっぱいに広告が表示されるので、全体的に余白を用いたページレイアウトだと、広告部分だけデバイスの幅いっぱいに広げられ、表示に違和感が出てしまいます。

こういった場合通常であれば、marginやpaddingで余白を設けて調整するのですが、何故かうまくスタイルが効きません…。

解決方(というか原因)はアドセンス広告側の表示タグにありました。

1 試行錯誤
2 解決方法

試行錯誤

アドセンスタグを囲む親タグにpaddingを付けたのですが、思い通りに動作しませんでした。アドセンス広告はjsで表示がコントロールされていて、google側のスタイルが指定され、それがこちらのスタイルに影響し指示を阻んでいるようです。

ここでは親タグに直接スタイルが埋め込まれてしまっています。

次に、ブロック要素で広告タグを囲み、marginをあててみました。これも効果なし。
上記と同様、jsでスタイルが操作されてしまいます。

解決方法

アドセンス広告はアドセンス側で発行されたinsタグを用いて表示しています。また、insタグにはいくつかの属性があらかじめ指定されています。デフォルトで指定されているパラメータを変更することにより解決できます。

insタグに指定されている、data-full-width-responsive属性を確認しましょう。値がtrueに指定されているので、falseへ書き換えます。

data-full-width-responsiveは直訳すると、レスポンシブ表示を最大幅で行う、といった意味でしょうか。

まずレスポンシブ広告のinsタグをソースの中から探します。

<ins class="adsbygoogle"
     style="display:block"
     data-ad-client="xxxxxxxxxx"
     data-ad-slot="xxxxxxxxxx"
     data-ad-format="auto"
     data-full-width-responsive="true">
</ins>

上のコードの6行目、data-full-width-responsive属性の値をfalseに変更します。

<ins class="adsbygoogle"
     style="display:block"
     data-ad-client="xxxxxxxxxx"
     data-ad-slot="xxxxxxxxxx"
     data-ad-format="auto"
     data-full-width-responsive="false">
</ins>

アドセンス広告の横幅を親要素でコントロールできるようになりました。親要素のスタイルを指定して、横幅に余白を付けてみましょう。

デメリットがある？

なお、Googleのサポートページに気になる記述がありました。

モバイルデバイス画面でレスポンシブ広告ユニットが全幅サイズに自動拡張される動作をご希望でない場合は、data-full-width-responsive パラメータを “false” に設定します。ただし、これによって収益増加の機会が減る可能性があります。Google のテストにより、モバイルデバイスが縦表示の場合には全幅サイズのレスポンシブ広告の成果が高いことが判明しています。
https://support.google.com/adsense/answer/9183460?hl=ja

data-full-width-responsiveをfalseと指定することにより、広告の収益が下がる可能性があるとのこと。公告を幅いっぱいに表示することがもっとも収益性が高くなるとGoogleは考えているのでしょうか。変更の際はその点に留意ください。