パソコンからモバイル端末まで共通のテーマ(CSS)で対応するための方策としては、レスポンシブデザインを採用することを思いつくだろう。これに伴い、アドセンス広告もレスポンシブにする必要がある。当ブログにおいても、パソコンからモバイル端末まで一つのテーマで対応している。そこで、この記事ではアドセンスのレスポンシブ広告を設置する際の注意点について、メモしておくことにする。
アドセンスから取得したコードをそのまま設置すると、表示領域に合わせて最適化されたサイズの広告が表示される。しかしながら、レイアウト上それが必ずしも最適であると云えない場合が多々ある。そこで、以下のように表示領域の横サイズを判断して、表示する広告サイズを指定することが許されている。
<style type="text/css">
.adslot_1 { width: 320px; height: 50px; }
@media (min-width:468px) { .adslot_1 { width: 468px; height: 60px; } }
@media (min-width:728px) { .adslot_1 { width: 728px; height: 90px; } }
</style>
<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<!-- レスポンシブ01 -->
<ins class="adsbygoogle adslot_1"
style="display:block"
data-ad-client="ca-pub-4276491656474968"
data-ad-slot="3158176581"
data-ad-format="auto"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
ただ、このときに横サイズが“467 px”以下の場合、“320 x 50 px”で表示されるはずが、何故か“320 x 100 px”になることがある。これは、“320 x 100 px”が最適なサイズと判断されてしまった結果である。これを指定したサイズでキッチリ表示させるためには・・・
data-ad-format="auto"
この部分を削除すればよい。そうすればサイズの自動調整が無効になり、勝手にサイズが変更されることはなくなる。
デフォルトでは、レスポンシブ広告コードの data-ad-format タグには “auto” という値が設定され、これにより、レスポンシブ広告ユニットでサイズの自動調整が有効になります。ただし、data-ad-format の値を “rectangle"（レクタングル）、"vertical"（縦長）、"horizontal"（横長）、またはこれらをカンマで区切って組み合わせた値（"rectangle, horizontal” など）に変更すると、レスポンシブ広告ユニットで一般的な形状を設定できます。
レスポンシブ広告ユニットを作成する - AdSense ヘルプ
“300 x 250 px”と指定したのに“300 x 600 px”で表示されてしまう・・・と云う場合も同じ理由からである。
最終更新日:
コメントは受け付けておりません。
