ボクのアフィリエイト日記

ボクアフィ

AdSense AFFINGER5

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

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を全幅にする方法

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の横に細長いレスポンシブ広告の縦幅を広げる方法
AdSenseの横に細長いレスポンシブ広告の縦幅を広げる方法

AdSenseのレスポンシブ広告が、パソコン画面で見ると横に細長く、縦幅が狭いときの解消法をご紹介します。

続きを見る

記事内広告を全幅にする

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のレイアウトが崩れたときの解決策
AdSenseのレイアウトが崩れる(表示がずれる)原因と対処法

AdSenseがコンテンツからはみ出て表示される(画面の右か左に寄ってしまう)原因と解決策をご紹介します。

続きを見る

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

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

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

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

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

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

AFFINGER5でアイキャッチ以外の画像をワイド化する方法
AFFINGER5でアイキャッチ以外の画像をワイド化する方法

AFFINGER5で、アイキャッチ以外(記事内)の画像をワイド化(画面幅いっぱいに表示)する方法をご紹介します。

続きを見る

まとめ

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

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

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

AFFINGER5のAMPページに全幅のAdSenseを表示する方法

AFFINGER5のAMPページに、全幅のAdSenseレスポンシブ広告を表示する方法をご紹介します。

続きを見る

おすすめ記事

EWWW Image Optimizerの設定画面
画像を「EWWW Image Optimizer」でWebPに変換する方法

2019/5/17  

WordPressプラグイン「EWWW Image Optimizer」を使い、次世代画像フォーマット「WebP(ウェッピー)」に変換する方法を解説します。

AdSenseの「ページビュー」と「表示回数」の違い
AdSenseの「ページビュー」と「表示回数」の違い

2019/4/3  

AdSenseのレポートでよく見る「ページビュー」と「表示回数」の意味の違いを解説します。

プラグイン不要!Googleフォームでお問い合わせフォームを作る方法
プラグイン不要!Googleフォームでお問い合わせフォームを作る方法

2019/4/3  

WordPressで人気のプラグイン「Contact Form7」を利用せずに、Googleが提供する「Googleフォーム」を使ったお問い合わせフォームの作り方をご紹介します。

-AdSense, AFFINGER5

Copyright© ボクアフィ , 2019 All Rights Reserved.