Google Adsense の広告ユニットにレスポンシブが追加されました。2013/08/06現在ではβ版ですが、これから正式リリースされるでしょう。
で、せっかく使えるようになったのでこのブログでも使ってみました。
このブログで表示されてるAdsenseの広告は全てレスポンシブの広告になってます。
Google公式のヘルプはこちら
レスポンシブ広告ユニットを作成する
従来のように広告を作成し、広告の種類でレスポンシブ広告ユニットを選択すれば準備完了。
あとはCSSをいじって、レスポンシブ対応すればOKです。
広告の大きさは自由ではなく、サポートされている広告サイズにしなければなりません。サポートされているのは今まで使えたサイズの広告です。
もちろんレスポンシブなのでメディアクエリがサポートされていなければないのは自明です。
CSSの例
.my_adslot { width: 320px; height: 50px; }
@media(min-width: 768px) {
.my_adslot { width: 468px; height: 60px; }
}
@media(min-width: 992px) {
.my_adslot { width: 468px; height: 60px; }
}
@media(min-width: 1200px) {
.my_adslot { width: 468px; height: 60px; }
}
これだと、スマートフォンくらいの画面サイズだと、320×50の広告が表示され、それより大きいと468×60のバナーサイズが表示されるようになっています。
分岐点は768pxだけなのですが、カスタマイズしやすいように992pxと1200pxのとこも書いてあります。
自分の環境に合わせてサポートされている広告に合わせて数字を変えてみてください。
Adsense入れるとページの表示が遅くなるなぁ(；・∀・)
