Adsenseのレスポンシブユニットをスマートフォンサイトのファーストビューに設置する方法

Adsenseのレスポンシブユニットは、スクリーンサイズに最適化された広告を表示してくれるので、とても便利です。しかし、ページ上部に設置した場合、スマートフォンで閲覧した際にレクタングル広告が表示されると、Adsenseの規約に違反します。この規約違反を回避する方法を考えてみました。

Adsenseのレスポンシブユニットをページ上部に表示するときは、CSSで広告のサイズを制限する

そのまま設置すると規約違反（ポリシー違反）になる

Adsenseの規約は、スマートフォンサイトのファーストビュー（スクロールなしで見える範囲）にレクタングルサイズの広告を設置することを禁止しています。

Adsenseのヘルプページに、はっきりと書いてあります。

レスポンシブユニットを設置すると、300＊250サイズの広告が表示されることがある

レスポンシブユニットを設置したページをスマートフォンで閲覧すると、次のいずれかのサイズの広告が表示されます。

• 300*250（レクタングル）
• 320*100（ラージモバイルバナー）
• 320*50（モバイルバナー）

下の２つ（横長のモバイルバナー）は問題ありませんが、レクタングルが表示された場合は、上記の規約に違反します。

この規約違反を避けるために、スマートフォンから見たときには300*250（レクタングル）を表示しないように、CSSで設定しておきましょう。

CSSのメディアクエリを使って、スマートフォン表示時のみ300*250の広告を排除する

メディアクエリでフィルタリング

CSSに次のように記載します。

メディアクエリを使って、デバイスの画面サイズによるフィルタリングをしています。

ユーザーが使っているデバイスの液晶画面の横幅がmax-width以下の場合、このCSSが適用されて、高さが100px以下のサイズの広告（モバイルバナーまたはラージモバイルバナー）しか表示されなくなります。

max-widthを上回るスクリーンサイズのデバイスで閲覧した場合は、CSSで指定したサイズの制限を受けずに通常のレスポンシブユニットとして機能し、最適なサイズの広告を自動的に選択してくれます。

なお、adsbygoogleというclassは、アドセンスのコード内のclassです（下の例の黄色マーカー部分）。

余白が気になるなら高さを50pxに指定する

上記のＣＳＳだと広告スペースの高さが100pxに固定されるので、320*50のモバイルバナーが表示された場合は、広告の下に高さ50px程度の余白があいてしまいます。

それが気になるなら、高さを50pxに指定して、320*50のモバイルバナー専用のスペースにします。

普通のレクタングルはスマートフォンで見てもそのままレクタングルとして表示されます

上記のCSSの影響を受けるのはレスポンシブの広告ユニットだけです。レスポンシブ以外の普通のAdsense広告は、スマートフォンで見たときも通常のサイズで表示されます。

レスポンシブ以外のユニットは、コード内のインラインCSSが外部CSSの指定を上書きするからです（下の例の黄色マーカー部分）。

Adsenseを利用していて一番怖いのは、本人が意図しないポリシー違反です。予防策はいろいろ考えておかないといけませんね。