こんにちは、モッチです。
アドセンスの広告がスマホで見た時に、画面の横幅いっぱいに表示されて、やたら存在感がありすぎるので、他のコンテンツと同じように左右に余白を入れて、ブログ記事と馴染むようにカスタマイズしてみました。
やり方は簡単で、下記のようにします。
略しすぎててよくわからない場合は、その先に書いた手順の通りにやってみてください。
アドセンス広告コードの insタグ に
data-full-width-responsive=”false”を追加する
またはtrueをfalseにする
では、手順を詳しく説明していきます。
アドセンス広告コードから「ins」を見つける
手順１、
アドセンスの広告コードに「ins」と書かれた箇所が2つあると思います。
例えば下記の1行目と6行目のようなところ、ありませんか。
[js]
<ins class="adsbygoogle" ←insを見つける
style="display:block; text-align:center;"
data-ad-layout="in-article"
data-ad-format="fluid"
data-ad-client="********"
data-ad-slot="********"></ins> ←insを見つける
[/js]
最初のinsにdata-full-width-responsive=”false”を追加
手順２、
最初の「ins」の「>」の前に「data-full-width-responsive=”false”」を追加します。
下記の場合だと７行目の位置に追加します。
[js]
<ins class="adsbygoogle" ←最初のins
style="display:block; text-align:center;"
data-ad-layout="in-article"
data-ad-format="fluid"
data-ad-client="********"
data-ad-slot="********"
data-full-width-responsive="false" ←ここに追加
></ins> ←必ず「>」の前であること
[/js]
「data-full-width-responsive」がある場合は、「false」に変更
既に「data-full-width-responsive」が入力されていた場合は、「true」を「false」に変えます。
[js]
data-full-width-responsive="true"
↓
data-full-width-responsive="false"
[/js]
これまでのことをしても左右に余白ができない場合
以上のことをしても余白が出来ない場合は、CSSの記述が必要になります。
この記事ではCSSについては書いておりません。
ヒント程度の説明になりますが、下記のように対象となる広告コードにpaddingを指定してみてください。
[css]
padding-left: 20px;
padding-right: 20px;
※20pxは例です。好きな値を書きます。
[/css]
data-full-width-responsive の意味
data-full-width-responsive の、単語をそのまま訳すと、「データ」「いっぱいに」「幅」「応答性高く」、となります。
つまり、画面横幅いっぱいにデータを表示させるように
「します（可）=true」「しません（不可）=false」
ということです。
今回、左右に余白を入れたかったので、「false」にしました。、
「false」はアドセンス的には推奨していない
アドセンス側としては、左右に余白を入れることは推奨していないようです。
Google Adsenseヘルプから引用
data-full-width-responsiveパラメータは “true” に設定することを推奨します。そうすることで、レスポンシブ広告ユニットがモバイル デバイス画面の全幅サイズに展開されることが多くなります。この設定により、収益増加の可能性が見込めます。
—-略—-
モバイル デバイス画面でレスポンシブ広告ユニットが全幅サイズに自動拡張される動作をご希望でない場合は、data-full-width-responsive パラメータを “false” に設定します。ただし、これによって収益増加の機会が減る可能性があります。Google のテストにより、モバイル デバイスが縦表示の場合には全幅サイズのレスポンシブ広告の成果が高いことが判明しています。
まとめ
無事に左右に余白は入りましたでしょうか。
広告もブログの要素の一部ですから、表示にはこだわりたいですよね。
この記事がお役に立てるものになっていると嬉しいです。
