AFFINGER5でAdSenseのレスポンシブ広告を全幅に広げる方法

AFFINGER5でAdSenseを全幅にする方法は、画面幅いっぱいに表示させたいAdSenseの広告コードを、以下の＜div＞タグで囲むだけです。

<div class="st-eyecatch st-eyecatch-under">
AdSense広告コード
</div>

AdSenseヘルプでは「data-full-width-responsive="true"」パラメータを追加するよう案内がありますが、これだとレイアウトが崩れるため、現状では、この方法が最適です。

AdSenseを全幅にするメリット

AdSenseヘルプによると、全幅サイズのレスポンシブ広告は収益が上がるようです。

レスポンシブ広告ユニットがモバイル端末上のユーザーの画面の全幅サイズに展開されることが多くなります。この設定により、収益増加の可能性が見込めます。

Google が行ったテストの結果、モバイル端末が縦表示の場合には、全幅サイズのレスポンシブ広告で成果が上がることが判明しています。

出典：https://support.google.com/adsense/answer/7445870

AFFINGER5でAdSenseを全幅にする方法

AdSenseヘルプでは、レスポンシブ広告コードに「data-full-width-responsive="true"」パラメータを追加するよう案内があります。

ですが、これだとレイアウトが崩れたため、「テキスト広告とディスプレイ広告」と「記事内広告」は異なる方法で全幅にします。

テキスト広告とディスプレイ広告を全幅にする

レスポンシブサイズに指定した「テキスト広告とディスプレイ広告」は、以下のようにします。

<div class="st-eyecatch st-eyecatch-under">
<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<!-- 広告コード名 -->
<ins class="adsbygoogle"
style="display:block"
data-ad-client="ca-pub-××××××××"
data-ad-slot="××××××××"
data-ad-format="auto"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
</div>

「××××××」には、ご自身の広告コードを入力してください。

「data-ad-format="auto"」を「rectangle」に変更すると、縦幅を広げられます。

記事内広告を全幅にする

AdSenseの記事内広告は、自動的にレスポンシブ広告となっています。

しかし、デフォルトではレイアウトが崩れるため、以下のようにすることでレイアウトを整えつつ、全幅に広げることができます。

<div class="st-eyecatch st-eyecatch-under">
<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<!-- 広告コード名 -->
<ins class="adsbygoogle"
style="display:block"
data-ad-client="ca-pub-××××××××"
data-ad-slot="××××××××"
data-full-width-responsive="false"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
</div>

「××××××」には、ご自身の広告コードを入力してください。

記事内広告の場合は、「data-full-width-responsive="false"」パラメータを追加しないとレイアウトが崩れるようなのでご注意を。

AdSenseが全幅になる仕組みは？

上記のコードで全幅になる仕組みは、AFFINGER5独自の仕様によるものです。

AFFINGER5では、アイキャッチ画像を全幅（画面幅いっぱい）に表示できるようになっています。アイキャッチ画像を全幅に表示しているコードは、＜div class="st-eyecatch st-eyecatch-under"＞であり、画像はこのコードで囲まれています。

これをAdSenseにも応用しました。

このカスタマイズがポリシー違反になるか分かりませんが、広告コード自体を改変したものではないため、今のところ問題はないかと思います（保証はしません）。

また、AFFINGER5の今後のアップデートにより表示が崩れる可能性もあるため、よく確認しながら変更してください。

まとめ

AFFINGER5でAdSenseを全幅にする方法は、画面幅いっぱいに表示させたいAdSenseの広告コードを＜div class="st-eyecatch st-eyecatch-under"＞で囲みます。

Googleが行ったテストの結果、モバイル端末が縦表示の場合には、全幅サイズのレスポンシブ広告で成果が上がることが判明しているようです。AdSenseで収益を上げたいAFFINGERユーザーは、この方法を試してみてください。

ちなみに、AMPページのAdSense広告も、全幅に表示させることも可能です。