レスポンシブ対応広告ユニットを試す - AdSense実験室

レスポンシブ対応広告ユニットを試す

2013-10-09

数字で見るレスポンシブwebデザインの効果で少しだけレスポンシブ対応AdSense広告について触れましたが、 このときのサイト、なつレゴでは、コードには一切手を加えず、ただそのまま貼っただけでした。
それでは面白くないので、今回はコードをいじって様々なサイズのバナー表示に挑戦してみたいと思います。
広告を貼るサイトは、この「Adsense実験室」。まさに体を張った人体実験て感じですが、いまのところ他に実験台に使えるレスポンシブサイト持ってないので… (^-^;

バナーその1 - ページ上部に設置

ページ上部、コンテンツタイトルのすぐ下にまず1つ設置。ファーストビューのこの位置に来るバナーは、続くコンテンツを押し下げないように気をつけないといけません。でないとポリシー違反になってしまいます。なので、基本、横長の「ビッグバナー」タイプがメインになるのではないかと思います。
もちろん画面幅大きい時には押し下げを気にすることなくレクタングルにするのもOKですので、そのあたりはお好みで。

私は今回、全てビッグバナーのバリエーションでいくことにしました。 レスポンシブ広告ユニット/上

  • 728×90
  • 468×60
  • 320×50

この3タイプです。 デフォルトのコードはこうなっています。

<style>
.adslabs { width: 320px; height: 50px; }
@media(min-width: 500px) { .adslabs { width: 468px; height: 60px; } }
@media(min-width: 800px) { .adslabs { width: 728px; height: 90px; } }
</style>

画面幅800px以上で728×90、500-800px時は468×60、モバイル画面では320×50という設定ですね。

※コードをいじれるといっても、手を加えられる(加える必要のある)部分はこのスタイル定義の部分だけです。

まずはデフォルトのまま、このサイトに貼ってみました。

右サイドバーにかかる広告

おっと、右サイドバーに広告がかかっちゃってます。 これはいけません。コードをちょっと修正。

<style>
.adslabs { width: 320px; height: 50px; }
@media(min-width: 500px) { .adslabs { width: 468px; height: 60px; } }
@media(min-width: 1000px) { .adslabs { width: 728px; height: 90px; } }
</style>

余裕をみて画面幅1000px以下で468×60に切り替えるようにして、サイトのMax-widthも980から1050に広げました。

モバイル画面 500px以上 1000px以上
モバイルビッグバナー320×50 バナー468×60 ビッグバナー728×90

「ブラウザの幅を変える→リロード」を繰り返して、きちんとサイズごとに広告が切り替わっているか、また先ほどのようにコンテンツに広告がかぶったりしていないかなど、入念にチェックしてください。

スポンサーリンク

バナーその2 - コンテンツ本文中央部に設置

続いてコンテンツ本文途中に広告を挿入。
ここはファーストビューではないので、コンテンツの押し下げを気にする必要はありません。
自由なサイズを使えますが、私はレクタングルとビッグバナーの切り替えを試すことにしました。

レスポンシブ広告ユニット/中央

モバイル画面 500px以上 1000px以上
レクタングル300×250 バナー468×60 ビッグバナー728×90
<style>
.adlabsrect { width: 300px; height: 250px; }
@media(min-width: 500px) { .adlabsrect { width: 468px; height: 60px; } }
@media(min-width: 1000px) { .adlabsrect { width: 728px; height: 90px; } }
</style>

バナーその3 - コンテンツ下に設置

3つめのバナーはコンテンツ記事下に。 最初はトップの広告をやめて、ここに先日登場した非同期型の広告を2つ置いて(あれもコードをいじることでサイズ変えられますので)ダブルレクタングルにして、モバイルの時はポリシー抵触しないようにどっちか1コだけ消す、っていうのはどうかな?って考えたんですが、あんまりトリッキーなことやるのもリスキーなので、やっぱりヤメました。(笑)

レクタングルを2つ並べるのは、横に並ぶだけの広さのあるデスクトップ画面なら問題ありませんが、スマホのように「縦に2つ並ぶ」場合は、「1画面に複数の広告表示はNG」のポリシーに抵触しますのでご注意下さい。

ここはどの画面サイズでもレクタングルにしようと思います。

レスポンシブ広告ユニット/下

なので、画面切り替えの部分は不要なので削除してこんな感じのコードに。

<style>
.adlabsrect { width: 300px; height: 250px; }
</style>

将来的にもうひとつ大きめの336×280への切り替えを試したりするかもしれませんが、とりあえずはこれでしばらく様子を見たいと思います。

と、こんな感じでいろいろ試していると…意外に楽しい!(笑)

モバイル向けの広告はなんか制約多い印象でしたけど、この広告使ってちょっと印象変わりました。
スタイル指定で広告サイズを自由に変えられますので、「この画面サイズの時にはこの広告にしてみようか。それともこっちの方が…」と、あれこれ悩みつつ、すぐに試して見ることができるのでなかなか面白かったです。

スポンサーリンク