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

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

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

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

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

300×250 の広告ユニットをハイエンド携帯端末用のページ上部に表示することは…中略…コンテンツをスクロールしないと見えない範囲に押しやるサイトレイアウトに該当するため、ポリシー違反に該当します。

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

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

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

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

@media screen and (max-width: 350px) {
.adsbygoogle {
width: 320px;
height: 100px;
}
}

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

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

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

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

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

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

@media screen and (max-width: 350px) {
.adsbygoogle {
width: 320px;
height: 50px;
}
}

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

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

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