Googleアドセンスを利用する上で表示する広告を管理するのは非常に重要です。
これまではアドセンスのコードは改変が許可されていなかったため、管理者は独自にCSSで管理する必要がありました。
これは結構な手間で手を焼いた人も多かったのですが、これからはアドセンスの各コードにCSSを適用することが簡単にできるようになったので、その方法をメモしておきます。

Googleアドセンスのカスタマイズ

詳しいことは公式にも載ってますが、とりあえずウチのサイトで公式のコードを解説していきます。

基本的にはGoogleアドセンスで取得したコードのスタイル部分をいじるだけなので非常に簡単です。

広告の高さを制限したい場合

ユーザに多くのスクロールを強いてしまうから無駄にデカい広告を載せたくない、というポリシーがある場合は有効な方法ですね。

<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タグのstyleです。
ここで指定されているのは

  • display:inline-block:インラインで表示
  • min-width:400px:最小幅400px
  • max-width:970px:最大幅970px
  • width:100%:表示可能領域を100%利用する
  • height:90px:高さ90px

ということになります。
つまり400pxサイズのディスプレイならば400pxの広告が表示され、600pxのディスプレイなら600pxの広告、970pxのディスプレイなら970pxの広告が表示されます。
いわゆる「レスポンシブ」な広告というものが表示されるわけでね。

まぁここまでならデフォルトのレスポンシブ広告を利用すれば勝手にやってくれるわけですが、ここから先が重要で、height:90pxで広告の高さを90pxで固定しています。
これによって90px以上の広告は表示されないように制御できます。

[ad#res02]

注意点

この設定はそのまま真似するとちょっと痛い目に会います。
というのも最小幅が400pxまでしか対応してませんね。
iPhone4やiPhone5の幅は320pxなのでこのまま利用すると320px幅の画面に400pxの広告が表示されます。

はい、アウトー。
ということでもっと細かい設定をしていかなきゃいけません。

画面幅に合わせた広告の設定する場合

画面幅に合わせて高さを幅を設定したい場合はCSSのメディアクエリを利用します。
メディアクエリというのはメディア(ディスプレイ)によって適用するCSSを変えてくれる便利な機能です。
昨今のレスポンシブデザインというのはこのメディアクエリが主流ですね。

<style type="text/css">
.adslot_1 { width: 320px; height: 100px; }
@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"
    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タグ内の.adslot_1とinsタグ内のclassにadslot_1が対応しているということです。
他にも@mediaの設定にもadslot_1がついてますね。
名前はなんでも良いですが、同じ名前じゃないと設定が有効にならないので注意です。

上記の設定では以下のような広告が表示されます。

  • 500pxから800pxまでのディスプレイには幅468px、高さ60px
  • 800以上のディスプレイには幅728px、高さ90px
  • それ以外のディスプレイには320px、高さ100px

一定のディスプレイサイズでは広告を非表示にする場合

一定のディスプレイサイズでは広告を表示したくない!という時はこんな感じです。

<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>

ポイントは

@media (max-width: 400px) { .adslot_1 { display: none; } }

これは400px以下のディスプレイでは非表示、ということになります。

編集後記

基本的にアドセンスの広告はデカければデカいほど良い!という話なので個人的にはそこまで制御する必要性は感じていません。
一番需要があるのはレクタングル広告の大中小のみ表示したいという場合でしょうね。

ディスプレイの大きさに合わせたレクタングルのサイズをメディアクエリで指定していけば上手いことカスタマイズしていくことが可能になりますよ。

いつもシェアありがとうございます!気に入ったらシェアしていただけたら幸いです。