レスポンシブ広告ユニットはページのレイアウトに合わせてサイズが自動的に調整されるため、さまざまなタイプの端末（PC、携帯電話、タブレットなど）に対応できます。サイトにアクセスしたユーザーがどの端末を使っていても、適切に広告を表示することができます。
Google AdSenseのレスポンシブ広告ユニットは、ページのレイアウトに合わせて広告のサイズが自動で調整される優れもの。PC、スマホ、タブレット…どのようなデバイスであっても適切なサイズで表示してくれるので、近年主流となっているレスポンシブデザインには最適です。
しかしながら、取得した広告のコードをそのまま使ってしまうと、レクタングルで表示させたいのに横長の小さな広告が表示されてしまう…といった問題が生じます。
このような問題があるためレスポンシブ広告の使用を控えている人も居ると思いますが、コードを少し変更するだけで広告の形状を指定することができます。
「data-ad-format」を変更するだけ
デフォルトでは、レスポンシブ広告コードの data-ad-format タグには "auto" という値が設定され、これにより、レスポンシブ広告ユニットでサイズの自動調整が有効になります。ただし、data-ad-format の値を "rectangle"（レクタングル）、"vertical"（縦長）、"horizontal"（横長）、またはこれらをカンマで区切って組み合わせた値（"rectangle, horizontal" など）に変更すると、レスポンシブ広告ユニットで一般的な形状を設定できます。
<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<ins class="adsbygoogle"
style="display:block"
data-ad-client="ca-pub-01234"
data-ad-slot="56789"
data-ad-format="auto"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>上記のコードは初期状態のレスポンシブ広告コードです。ポイントは「data-ad-format="auto"」の部分。このautoをrectangleに変更することで、強制的にレクタングルで表示させることができます。
余談ですが、レクタングルを指定するために、data-ad-formatはautoのままで、広告そのものや広告の親要素の幅をCSSで設定する方法もあるようです。例えばこのページ。
アドセンスのレスポンシブ広告を「レクタングル（大）」で表示させる方法
確かにこの方法で336×280のレクタングル（大）サイズが表示されるようです。しかし、このような設定を行うのであれば、最初からレクタングル（大）ユニットを使うべきで、敢えてレスポンシブ広告を使う意味はあまり無いと思います。
data-ad-formatを変更する方法であれば、スペースに余裕がある場合に以下の画像のように横幅いっぱいの広告を表示してくれます（常に表示されるわけではないですが）。これこそがレスポンシブ広告の良さだと思うんですけどね。
コメント