Google AdSense のレスポンシブ広告を貼り付けたところ、スマートフォンで見ると縦型の広告が表示され、スマホ画面の大部分を占めてしまったため AdSense のコードを修正しました。
ちなみに「レスポンシブ広告」とは、様々な幅に合わせて広告の縦横が伸び縮みする便利な広告です。
レスポンシブ広告の作り方
ちなみにレスポンシブ広告作成の手順は次の通りです。
- Google アドセンスの管理画面で「新しい広告ユニットの作成」→「ディスプレイ広告」をクリックする。
- 広告ユニットの名前を入力。
- 広告サイズで「レスポンシブ」を選択する。
- 作成をクリックする。
- 広告ユニットコードをコピーして、自分のブログの広告を表示したい位置にペーストする。
生成される広告ユニットコード（HTML）
生成される広告ユニットコード（HTML）は次のような感じです。
<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>
data-full-width-responsive="true"
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
表示される広告を「スクエア」か「横長タイプ」に限定する
表示される広告を「スクエア」か「横長タイプ」に限定するには data-ad-format="auto" となっていた部分を、data-ad-format="rectangle,horizontal" に変更します。
変更前）data-ad-format="auto"
変更後）data-ad-format="rectangle,horizontal"
スマホ画面の横幅いっぱいに広告が表示される時の対処法
スマホで自分のサイトに貼られた広告を見たときに、スマホ画面の横幅いっぱいに広告が表示されて、どう頑張っても左右にマージン（すき間）が追加できませんでした。
そんな時は data-full-width-responsive="true" という部分を false にすると左右のマージンが取れるようにりました。
変更前）data-full-width-responsive="true"
変更後）data-full-width-responsive="false"
上記の広告コード修正はポリシー違反にならない
上記のコードの修正は Google のポリシー違反に当たらないと下記の公式ページに書かれているので安心です。
レスポンシブ広告のタグパラメータの使用方法 – AdSense ヘルプ
以上です。
それでは、良きアドセンスライフを！
