Google Adsenseのレスポンシブ広告ユニットの設定とiPhoneでモバイル広告の位置がズレてしまうのを防ぐCSS

最近ではブログのテーマにレスポンシブに対応したものを多く見かけます。
便利な反面、アドセンスのサイズに気をつけないとパソコンでは丁度よくてもスマホでみると大き過ぎてはみ出てしまっているということもあります。
レスポンシブテーマに対応した「レスポンシブ広告ユニット」という機能を使ってデバイス毎に最適な広告を表示させるようにしてみましょう。

sponsored link

レスポンシブ広告ユニットの取得方法

まずはレスポンシブに対応したアドセンス「レスポンシブ広告ユニット」のコードをGoogle AdSenseから取得します。

[広告の設定]から[新しい広告ユニット]を選択します。

[広告サイズ]に「レスポンシブ広告ユニット(ベータ版)」があるので選択します。
レスポンシブ広告ユニットを選択する

今回はメディアクエリを使って自分で広告をコントロールしたいので[アドバンス(コード変更が必要)]を選択してからコードを取得します。
アドバンスモードのコードを取得する

コードはsingle.phpやウィジェットに追加します(WordPressの場合)。ローカル環境ではなく、本番環境でテストをしたい場合はWordPressのテンプレートタグのis_user_logged_inを使えば自分だけにしか表示させないようにできます。

取得したコードを修正する

上記のコードは僕が使っているものです。スポンサードリンクの表記をしたり、全体をdivで囲んでいますが、いちばん重要なのは4行目と5行目です。

これはCSS3のメディアクエリというものです。
min-widthは〜px以上と読み替えてもらうと分かりやすいと思います。max-widthもあり、こちらは〜px以下と読み替えます。

上記の指定ではウィンドウ幅が760px以下なら320×50pxを表示、761px以上なら468×60pxの広告を表示します。

使っているWordPressのテーマによってレイアウトの切り替わる横幅は変わってくるので、パソコンでウィンドウ幅を動かしたりして最適な指定位置を見つけてください。

指定できるサイズは現行の広告サイズのみ

レスポンシブ広告ユニットとはいえ、実際に表示される広告は今ある広告サイズで表示されます。

テキスト広告とディスプレイ広告の主なサイズはこちら。

  • (234×60) ハーフバナー
  • (468×60)バナー
  • (250×250)スクエア
  • (300×250)レクタングル(中)
  • (336×280)レクタングル(大)

モバイル広告では横幅320pxのものが2つあります。

  • (320×50)モバイル ビッグバナー
  • (320×100)モバイル バナー(大)※テキストのみ

指定したサイズに最適な広告が表示されますが、場合によっては小さい広告が表示されることもあるので注意しましょう。
僕の場合はモバイルビッグバナーとバナーを指定しています。

iPhoneで横幅320pxの広告がはみ出るのをCSSで直す

横幅320pxの広告が表示されるように指定しているとiPhoneで見た時に広告が一部隠れてしまうことがあります。(このブログの場合は左右にpaddingが10pxずつあるので)
広告がすべて表示されない
これをCSSで修正します。

.hogeはアドセンス全体を囲っているdivのクラス名です。320px以下の場合にCSSが有効になるようにしています。以前imgタグで同じやり方を紹介しました。

左右の余白がなくなった
CSSを適応させると上記のように左右のpaddingがなくなり、広告がすべて表示されるようになりました。


アドセンスは基本的にサイズを指定して表示させていると思いますが、デバイスによってはきれいに表示できない場合もあります。

今回紹介したレスポンシブ広告ユニットを使えば柔軟に表示させるサイズを変更できます。メディアクエリに慣れていないとちょっと難しく感じてしまうかもしれませんが、とても便利な機能なのでぜひ試してみてください。