アドセンスのレスポンシブ広告がはみ出す場合の対処方法

パソコンからモバイル端末まで共通のテーマ(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”で表示されてしまう・・・と云う場合も同じ理由からである。

admin
カテゴリ:ブログサービス
タグ:アドセンス
2015/05/25 21:05 | コメント (0)
◎この記事へのコメントは 0 件です。コメント欄を表示しますか?
コメントを書く
お名前: [必須入力]

メールアドレス:

ホームページアドレス:

コメント: [必須入力]

このブログについて
jkun-400x400.jpg インターネット, パソコン, スマホ, Windows, Linux, Android, 各種アプリ, ブラウザ, ブラウザ拡張機能, 携帯電話, 社会情勢, 韓ドラ, K-POP 関連の話題を取り上げます。ジャンルとしては幅広く、特定のカテゴリに特化したブログではありません。お時間がありましたら、どうぞお立ち寄りくださいませ。
プロフィール
カテゴリ
ブログ内検索
Powered by さくらのブログ