Google Adsense のレスポンシブ広告ユニット試してみたよ。

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入れるとページの表示が遅くなるなぁ(;・∀・)

この記事を書いた人

たぬき@首席技監

アーシタンと蔵守の技術周り担当。主にワードプレス(WordPress)、サーバ管理なんかをやっています。