レスポンシブユニットのカスタマイズ

この記事を読むのに必要な時間は約 20 分です。

レスポンシブ広告ユニットのカスタマイズ

※この記事はAdSense利用者向けの記事です。

ここではAdSenseの「レスポンシブユニット」にひと手間加え、より最適なサイズにカスタマイズする方法を探る。

参考リンク(画面サイズ一覧(ScreenSizes))

レスポンシブユニットの作成

1. 新しい広告ユニットを作る

AdSenseホーム広告の設定　新しい広告ユニットをクリック

2.作成して保存する

①名前をつける
②広告の種類でレスポンシブをチョイス
③広告のタイプをチョイス(テキストONLY orディスプレィONLY orテキスト&ディスプレィ
④保存してコードを取得

3.コードを取得する

カスタマイズ

1.簡単にできるカスタマイズ

ここでいよいよ本題に入る。

上で取得したコードをそのまま使っても勿論OKだが、細かく言うなら実際は意図しない形の広告になってしまう場合が多い。

ここは長方形がいいのに・・・とか、ここは四角だよな・・・とか、こっちは縦長のが良かったのに・・・とか。

レスポンシブユニットはCSSを使った柔軟なデザインに対応している。

最初の方法は一ヶ所の変更でOKなので是非、試してみよう。

コードをよく見ていくと data-ad-format = という部分がある。
名前の通り、フォーマット(形)をどのようにするかという指示を与える。
CSSプロパティである。
これは初期設定では　data-ad-format = “auto”　となっているが、これを変更することで以下のようなカスタマイズが可能となる。

①初期設定 data-ad-format = “auto”
端末の画面サイズに合わせ「縦長」「横長」「四角」(レクタングル)の3つのスタイルからランダムに表示される。

②縦長　data-ad-format = “vertical”
端末の画面サイズに合わせ、常に「縦長」のスタイルで表示される。

③横長　data-ad-format = “horizontal”
端末の画面サイズに合わせ、常に「横長」のスタイルで表示される。

④四角　data-ad-format = “rectangle”
端末の画面サイズに合わせ、常に「四角」(レクタングル)のスタイルで表示される。

⑤複合　data-ad-format = “rectangle, horizontal”
上にあげた要素をカンマ(,)で区切って複数指定することができる。
端末の画面サイズに合わせ、指定した組み合わせの中からランダムに表示される。

このブログでは右のサイドバーは⑤を使用している。
スマートフォン用のテンプレにも基本的には同じコードを使用している。
今までは、端末によってはみ出したり、小さすぎたりしていたが、このカスタマイズにより希望通りに表示することが可能になった。

2.高度なカスタマイズ

通常は上の方法で十分だと思うが、「レスポンシブユニット」はCSS3に対応している。
上であげたdata-ad-format = “auto” の部分を外し、代わりに style を挿入する。

2-① 横幅を可変し、高さを固定
<ins class=”adsbygoogle”
style=”display:inline-block;min-width:400px;max-width:970px;width:100%;height:90px”
data-ad-client=”ca-pub-1234″
data-ad-slot=”5678″></ins>
<script async src=”//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js”></script>
<script>(adsbygoogle = window.adsbygoogle || []).push({});</script>

<ins class="adsbygoogle"
style="display:inline-block;min-width:400px;max-width:970px;width:100%;height:90px"
data-ad-client="ca-pub-1234"
data-ad-slot="5678"></ins>
<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<script>(adsbygoogle = window.adsbygoogle || []).push({});</script>

上の黄色部分の設定は幅が400px~970pxの範囲内、高さは90px固定と指定している。
端末の画面サイズが変わってもページデザインを維持できる。
いくつか試して自分のサイトデザインに最適な数値を選ぶと良いだろう。

2-②固定サイズを複数指定
<style type=”text/css”>
.adslot_2 { width: 300px; height: 250px; }
@media (min-width:400px) { .adslot_2{ width: 336px; height: 280px; } }
</style>
<ins class=”adsbygoogle adslot_2”
style=”display:block”
data-ad-client=”ca-pub-1234″
data-ad-slot=”5678″></ins>
<script async src=”//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js”></script>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>

<style type="text/css">
.adslot_2 { width: 300px; height: 250px; }
@media (min-width:400px) { .adslot_2{ width: 336px; height: 280px; } }
</style>
<ins class="adsbygoogle adslot_2"
style="display:block"
data-ad-client="ca-pub-1234"
data-ad-slot="5678"></ins>
<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>

2番目は画面の幅ごとに正確なサイズの広告を入れる例。
初期設定は300px,250pxのレクタングル。
画面サイズが340px以上で、336px,280pxのレクタングルに変わる。
下線部のclassの指定を忘れないようにしたい。
これをコピペして自分の固有番号に変えれば、すぐに利用できる。
コードは、微妙な改行やスペースがあると効かないので注意が必要だ。
特にスマートフォンサイトでこの設定は必須とも言える。
iPhoneを例にとると4/4S→5/5S(C)→6→6＋と大型化が進むに連れ、以下の様に変化してきた。

DEVICE-W (単位＝ピクセル)	4/4S	5/5S(C)	6	6Plus
DEVICE-W (単位＝ピクセル)	320	320	375	414

これは何を意味するかというと大きい端末に横336pxのユニットを合わせると画面の小さな端末では、画面から広告がはみ出してしまうということだ。
通常、スマートフォンは縦上下の単純なスクロールでページを閲覧する。

しかし、はみ出した要素があると、それを表示するためにブラウザは横スクロールという動作を自動的に追加する。ユーザーにとって縦上下スクロールに横スクロールが加わるのはかなりのストレスになる。

逆に小さい端末に最適な横300pxのユニットを合わせた場合、6では画面の80%だが、6＋では72%となり、画面に余計なスペースを作ってしまう。
レクタングルに拘らず
@media (min-width:400px) { .adslot_1 { min-width:400px;max-width:970px;width:100%;height:90px } }
の横長のバナーの指定を追加するのも良いだろう。
DEVICE-Wに合わせた設定が必要だ。

2-③横と高さの範囲を指定する
<style type=”text/css”>
.adslot_2 { width:250px;height:250px}<!–(A)–>
@media (min-width:310px) { .adslot_2 { width: 300px; height: 250px; } }<!–(B)–>
@media (min-width:340px) { .adslot_2 {width:336px;height:280px} }<!–(C)–>
@media (min-width:420px) { .adslot_2 { min-width:440px;max-width:970px;width:100%;height:90px } }<!–(D)–>
</style>
<ins class=“adsbygoogle adslot_2“
style=”display:inline-block; ”
data-ad-client=”ca-pub-1234″
data-ad-slot=”5678″ ></ins>
<script async src=”//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js”></script>
<script>(adsbygoogle = window.adsbygoogle || []).push({});</script>

<style type="text/css">
.adslot_2 { width:250px;height:250px}<!--(A)-->
@media (min-width:310px) { .adslot_2 { width: 300px; height: 250px; } }<!--(B)-->
@media (min-width:340px) { .adslot_2 { width:336px;height:280px} }<!--(C)-->
@media (min-width:420px) { .adslot_2 { min-width:400px;max-width:970px;width:100%;max-height:90px } }<!--(D)-->
</style>
<ins class="adsbygoogle adslot_2"
style="display:inline-block; "
data-ad-client="ca-pub-1234"
data-ad-slot="5678" ></ins>
<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<script>(adsbygoogle = window.adsbygoogle || []).push({});</script>

上の①と②の複合。大きさの範囲を指定した場合の例。
(A)は初期設定で幅が250px,高さ250pxの固定。
(B)は310px以上のDEVICE-Wで、300px,250pxを指定。
(C)は340px以上のDEVICE-Wで、336px,280pxを指定。
(D)は420px以上のDEVICE-Wで、幅400px-970pxまでの可変。高さは90pxまで。
下線の部分にclass指定を忘れないようにしたい。

2-④端末に応じて表示する、または隠す

<style type="text/css">
.adslot_1 { display:inline-block; width: 320px; height: 50px; }
@media (max-width: 400px) { .adslot_1 { display: none; } }
@media (min-width:500px) { .adslot_1 { width: 468px; height: 60px; } }
@media (min-width:800px) { .adslot_1 { width: 728px; height: 90px; } }
</style>
<ins class="adsbygoogle adslot_1"
data-ad-client="ca-pub-1234"
data-ad-slot="5678"></ins>
<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<script>(adsbygoogle = window.adsbygoogle || []).push({});</script>

これはCSSのdisplayプロパティ display: none;　を使用して広告を消す方法。
広告を表示するのがAdSenseの本来の目的だが、Googleがこのような非表示を推奨するというのも大企業ならではのユーザー・エクスペリエンスに立った配慮と言えよう。
画面サイズが400px未満の端末には広告を表示しない。
500pxを超えると468px,60pxの広告を表示。
800pxを超えると728px,90pxの広告を表示。
下線の部分にclass指定を忘れないようにしたい。

その他にもCSSの様々なプロパティを用いることで柔軟にカスタマイズできる。
但し、Googleの広告に関するプログラムポリシーを遵守しなければならないことに注意しよう。

①同じページ内にAdSenseを複数設置する場合、

<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>

このscriptは最初の一回だけ記入すればよい。またはヘッダーに記入する。
②CSSのクラス名を上の例ではadslot_1、adslot_2としたが、複数のレスポンシブユニットを同一ページに貼る場合、同じスタイルならクラスは同一名でも良いが、スタイルを変える場合、クラスも変更する必要があることに注意。

Googleヘルプ「レスポンシブ広告ユニットの作成」