Google Adsenseがレスポンシブウェブデザインに対応(ベータ版)したので試してみた

一応、ブログにはGoogle Adsenseを貼り付けさせてもらっています。

まぁ、月に500円にもならないですが、、、。

そんなGoogle Adsenseから広告がレスポンシブウェブデザインに対応したとの情報が。

Inside Adsense

暫く前、このブログもレスポンシブウェブデザイン対応の自作テーマにしたので試してみました。

導入方法は簡単(使った事ある人は)。

名前を入力して広告サイズで「レスポンシブ広告ユニット」を選択します。

Google Adsenseレスポンシブウェブデザイン対応広告

後は表示されたコードを貼り付けます。

Google Adsenseレスポンシブ広告ユニットコード

これでO.K.と思いきや、ページを見ると、、、

Google Adsense広告大きすぎ

広告が本文の幅よりはみ出してる(T_T)

(記事のタイトルの下にある横長の広告)

貼り付けたコードを見ると、

{ width: 320px; height: 50px; }
@media(min-width: 500px) { .responsive { width: 468px; height: 60px; } }
@media(min-width: 800px) { .responsive { width: 728px; height: 90px; } }

とメディアクエリの記述が。

そっか、ここで表示させる広告の大きさを設定していたわけだ。

パソコンで見ると画面サイズの幅が800px以上だから幅が728pxの広告が表示されたわけですね。

設定できる広告のサイズは、

広告サイズに関するガイド – AdSense ヘルプ

との事。

いい感じのサイズが無いので、最後の

@media(min-width: 800px) { .responsive { width: 728px; height: 90px; } }

を消して再表示。

Google Adsense広告小さくなった

ちょっと小さくなったけど、はみ出すことはなくなりました。

自分が勘違いしそだったところは、

最初のページ読み込み時のみレスポンシブに対応

ってところ。

表示された後に、

画面の向きを変更するなど、画面サイズに変更があっても、新しい広告が表示されることはありません。

って事なのでパソコンでブラウザの幅をマウスで帰ると表示される広告の幅が、動的に変わるわけではない(*_*;

さて、暫く様子を見るべし。

スポンサーリンク
スポンサードリンク