レスポンシブWebデザイン対応のGoogle AdSense設置方法

スマホ・タブレット・PC のすべてにひとつの HTML と CSS で対応できるレスポンシブ Web デザイン。Google AdSense にもレスポンシブ専用の広告ユニットが用意されていますよね。

でも、設定を間違えると、広告が途中で切れてしまったり、コンテンツ枠を突き破ってしまうことがあります。レスポンシブ Web デザインで作られたテーマに切り替えた直後や、CSS に慣れていないと起こりうる現象です。

そこで今回は、レスポンシブ Web デザインの基礎知識とアドセンス設置方法を解説いたします。

大きく2つに分かれるレスポンシブWebデザイン

レスポンシブ Web デザイン（以下、RWD）は以下の 2 つに分けることができます。

どの端末で見ても同じ HTML が読み込まれ、CSS の @media screen で指定された画面（ブラウザ）サイズをもとにデザインが調整されます。

CSS は基本的に「上書き」処理を行っていますが、その仕組みを少し詳しく見てみましょう。

スマホファーストのCSS処理

まず、画面の小さい順に CSS を記述していくスマホファーストから。

スマホ・タブレット・PC を下記のように切り分けるとします（これを「ブレイクポイント」と言います）。

たとえば、<p> に対してこのような指定をしたとします。

p {color: #111; font-size: 15px;}

@media screen and (min-width:768px) {
p {color: #222;}
}

@media screen and (min-width:1024px) {
p {color: #333; font-size: 17px;}
}

画面サイズが 767px 以下のスマホからアクセスがあった場合、1 行目の記述を読み込み、それ以降の記述は無視されます。

タブレットからアクセスがあった場合は 1 ～ 5 行目の記述が読み込まれます。

「color」は新たに指定があるので上書きされますが、「font-size」の指定がないのでスマホの指定がそのまま継承されます。

PC からアクセスがあった場合はすべての記述が読み込まれ、「color」と「font-size」は共に上書きされます。

仕組みがわかれば簡単ですね。

PC から見た場合でも、ブラウザの横幅を変えれば適用されるスタイルが変わります。どのように変化しているのか、デベロッパーツールなどを使って CSS とデザインを見比べてみてください。

一方の PC ファーストはこれを反対にしたものです。

PCファーストのCSS処理

上の例と同じようにするのであれば、CSS はこうなります。

p {color: #333; font-size: 17px;}

@media screen and (max-width:1023px) {
p {color: #222; font-size: 15px;}
}

@media screen and (max-width:767px) {
p {color: #111;}
}

1024px 以上の PC で見たときは 1 行目が読み込まれ、タブレットとスマホは上書き、あるいは継承して反映されます。

@media screen を使っているかどうかに関わらず、CSS は後から書かれたものが優先される、というルールがあります。

覚えておくと、どこかで役に立つかもしれません。

RWDの見分け方

スマホファーストにするのか PC ファーストにするのか、というのは好みや考え方の問題で、どちらを選択してもかまいません。

僕はスマホファーストが好きでこのブログもそうしているんですが、ただ 1 つ「IE8 以下だとうまく読み込まれない」というデメリットがあるんですよね。

JavaScript を使ってそれなりには表示できますが、PC で閲覧されることをメインに考えるのであれば PC ファーストで作成するのが良いかなと思います。

現在使っているテーマ、これから使おうとしているテーマがどちらで記述されているのかは、CSS を見なければわかりません。たぶん明示しているテーマは少ないはず。

単純な構成なら、@media screen and () のカッコ内の記述でわかると思います。

複合させているケースもあるので一概には言えませんけどね。

ちなみに、Gush シリーズはすべてスマホファーストで記述しています。IE8 以下では表示が崩れたり CSS が反映されないこともありますが、記事を読むぶんには問題ないし、もういいかなーとｗ

それでは、以上のことをふまえて RWD 対応の Google AdSense を設置してみましょう。

Google AdSense レスポンシブユニット設置方法

RWD でも幅と高さが固定されたユニットを使うことができますが、これから紹介するのは CSS ＋α でサイズを任意に調整していく方法です。

これに慣れてしまうと、固定サイズのユニットなんて使わなくなるかもしれません。

レスポンシブ用コードの取得

まずは AdSense 管理画面に入って、「広告の設定」から「＋新しい広告ユニット」を選択します。

広告ユニット作成画面に移るので、「広告サイズ」を設定しましょう。

以前は推奨枠に入っていなかったと思いますが、「自動サイズ」と書かれたユニットがあるのでこれを選択。あとはお好みで設定してコードを取得してください。

こんなコードが出てくると思います。

<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<!-- テスト -->
<ins class="adsbygoogle"
     style="display:block"
     data-ad-client="ca-pub-xxx"
     data-ad-slot="xxx"
     data-ad-format="auto"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>

ちなみに、同じページに複数の広告を設置していても、1 行目の記述は 1 回しか読み込まれません。

あとはムダなコードになってしまうので、1 行目を </body> の直前にでも貼り付けておきましょう。ユニットの近くに置いておかなくてもちゃんと動きます。

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

<!-- テスト -->
<ins class="adsbygoogle"
     style="display:block"
     data-ad-client="ca-pub-xxx"
     data-ad-slot="xxx"
     data-ad-format="auto"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>

広告ユニットは推奨サイズに近づける

広告のサイズは CSS の設定がそのまま反映されますが、ディスプレイ広告も表示するよう設定したのなら指定したサイズぴったりになるとは限りません。

テキスト広告であればどんなサイズでも表示されますが、画像や動画を使ったディスプレイ広告はサイズが決まっているので、できるだけそれに合わせたサイズを指定するのが理想です。

たとえば 500 × 80 という指定にした場合。

このサイズのディスプレイ広告はないので、その枠におさまる 468 × 60 の広告が表示されます。

きっちり計算してコンテンツにピッタリおさまる枠を作っても、よぶんな空白ができると意図していないレイアウトになってしまうかもしれません。

AdSense の推奨サイズに合わせた設定にしておけば、テキストもディスプレイもきれいにおさまります。

参考広告サイズに関するガイド

広告ユニットをDIVで囲む

ただコードをコピペしただけだとサイズを指定することができないので、クラス名を付与した <div> でコードを囲ってあげましょう。

<div class="adsense_01">
<!-- テスト -->
<ins class="adsbygoogle"
     style="display:block"
     data-ad-client="ca-pub-xxx"
     data-ad-slot="xxx"
     data-ad-format="auto"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
</div>

あとはこのクラス名に対して width（幅）と height（高さ）をブレイクポイントごとに設定していきます。

ブレイクポイントごとにCSSを設定する

では、冒頭のブレイクポイントをそのまま使って、各端末で表示される AdSense のサイズを下記のように設定してみます。

スマホファーストで記述するとこうなります。

div {
    margin: 0;
    padding: 0;
}

.adsense_01 {
    width: 300px;
    height: 250px;
}

@media screen and (min-width:768px) {
.adsense_01 {
    width: 336px;
    height: 280px;
}
}

@media screen and (min-width:1024px) {
.adsense_01 {
    width: 728px;
    height: 90px;
}
}

1 ～ 4 行目の指定はすでに記述されていることが多いので、省略してもかまいません。

margin や padding もサイズに関わってくるので、どうしても思ったサイズにならないのであれば、どこかに余白の指定がないか調べてみてください。親要素の padding が原因となっていることがよくあります。

広告が他の要素と近すぎる場合はペナルティとなる可能性があるので、そのさいは改めて margin を設定しましょう。PC だけ上下に余白をつけたいのであれば、こうなりますね。

div {
    margin: 0;
    padding: 0;
}

.adsense_01 {
    width: 300px;
    height: 250px;
}

@media screen and (min-width:768px) {
.adsense_01 {
    width: 336px;
    height: 280px;
}
}

@media screen and (min-width:1024px) {
.adsense_01 {
    width: 728px;
    height: 90px;
    margin: 36px 0;
}
}

スマホで広告を表示させたくない場合

スマホと PC で表示・非表示を切り替えたい！　というケースもあるでしょう。

この場合は CSS に display:none を指定します。

.adsense_01 {
    display: none;
    /* スマホだけ非表示 */
}

@media screen and (min-width:768px) {
.adsense_01 {
    width: 336px;
    height: 280px;
}
}

@media screen and (min-width:1024px) {
.adsense_01 {
    width: 728px;
    height: 90px;
}
}

この方法は、いったん広告コードを読み込んだあとに CSS で要素を見えなくしているだけです。

表示速度に影響してくるので、できるなら広告コード自体を出力しないようにするのがスマートな方法。WordPress では「条件分岐タグ」を使えば簡単に実現できます。

参考is_homeとis_mobileを使ってカスタマイズの幅を広げよう！

サイズを指定せず形状だけを指定する方法

このようにブレイクポイントごとに CSS でサイズを指定していくのが基本ですが、形状だけを指定することもできます。

この方法は、広告のコードを一部改変するだけなので、CSS に慣れていなくても大丈夫。

デフォルトのコードはこうなっていましたね。

<!-- テスト -->
<ins class="adsbygoogle"
     style="display:block"
     data-ad-client="ca-pub-xxx"
     data-ad-slot="xxx"
     data-ad-format="auto"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>

6 行目の値が「auto」となっていますが、これを変更します。

レクタングルと呼ばれる四角い形状の広告にするなら「rectangle」にすれば OK。

<!-- テスト -->
<ins class="adsbygoogle"
     style="display:block"
     data-ad-client="ca-pub-xxx"
     data-ad-slot="xxx"
     data-ad-format="rectangle"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>

指定できる値は auto を含めて 4 種類です。

レクタングルの場合は「300 × 250」と「336 × 280」のサイズがありますが、コードがおかれた部分にどちらのサイズを表示できるかアドセンス側で計算して自動的に選んでくれます。

どのみち余白の調整は CSS で行うので、サイズを指定する方法を覚えたほうが柔軟に対応できると思います。

RWDで固定サイズの広告ユニットを選ぶときは注意

以上、RWD の基本とレスポンシブ広告ユニットの設置方法でした。

AdSense がらみの質問をたまに受けますが、なかには『レスポンシブ Web デザインのテーマに切り替えれば、AdSense も自動的にレスポンシブ対応になる』と勘違いしている方もいます。

RWD を採用して CSS でサイズを調整したいのなら、Google AdSense も専用ユニットに切り替えましょう。

今まで使っていた固定サイズのユニットをそのまま流用することがあるかもしれませんが、その場合は以下のような問題がおきないよう注意してください。

CSSのサイズより広告のほうが大きい

よくあるのが、広告ユニットを作成するときに 336 x 280 のレクタングル（大）固定サイズを選び、CSS でそれより小さいサイズを指定して広告が途中できれているケース。

RWD ではなく、スマホのみ CSS を切り替えるテーマのブログでも見かけます。

大きい広告がスマホでそのまま表示される

728 x 90 のビッグバナー固定サイズを選び、スマホ表示で横に突き出てしまっている、というのもよく見ます。

全体のサイズを再計算しなければならないので、表示スピードがかなり遅くなってしまいます。

テーマを切り替えたあとは、各端末できちんと表示されているかチェックしましょう。

レスポンシブユニットのメリット

AdSense の広告は、あとからサイズを変更することができません。

『レクタングルにしたけど、やっぱりビッグバナーにしたいなー』というときは、新たにユニットを作成する必要があります。

でも、レスポンシブユニットであれば、CSS を変更するだけで簡単にサイズを変更できます。サイドバーのレクタングル（中）を記事下に移動してレクタングル（大）にする、というのも可能です。

新たにユニットを作ると広告が表示されるまでちょっと時間がかかりますが、この方法であれば動かした直後にすぐ広告が出てくる、というメリットも。

正確なデータはいらないけど、広告を大きくしたときに収益が変化するか見たいなー、というときにも便利ですよ。

まとめ

レスポンシブ Web デザインは慣れるまでに時間がかかるかもしれませんが、仕組みがわかってしまえば CSS を切り替えるより楽だと思います。

もし RWD を採用するのであれば、Google AdSense もレスポンシブユニットに切り替えて設置してください。

あとは兎にも角にも PV ですね。

関連ブログとアドセンスで稼いでみたいあなたへ贈る10のアドバイス

それでは、また。