アドセンスのレスポンシブ広告(スマートサイズ・アドバンス)の設置方法の概要です

Googleのアドセンスに2013年の夏頃よりレスポンシブ ウェブ デザイン（Responsive Web Design）のサイトのためのサイズとしてレスポンシブ（※現在のアドバンス）が追加されました。そして2013年の終わり頃にはスマートサイズが追加されました。
この2つをどう使い分けるのかを説明します。※注意書きなどはすべて2014年1月時点の仕様になります。仕様変更も多いので公式のヘルプなども合わせてお読みください。

スマートサイズとアドバンスのちがい

スマートサイズはコードを貼り付けるだけです。アドバンスはページだけではなくアドセンスに対してもメディアクエリを使って広告サイズを指定するため手間がかかります。
スマートサイズの広告サイズはアドバンスほど細かい調整はできませんが、アドバンスは画面の回転に対応していないのでスマートサイズのほうがおススメです。

スマートサイズの設置方法

スマートサイズは出力されたコードをコピーして貼り付けるだけで、設置場所にちょうどいいサイズの広告が表示されます。

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

スマートサイズの取得と設置の方法

1. 

   広告ユニットを選ぶ
   アドセンスページの【広告の設定】ページへ移動して【新しい広告ユニット】から『レスポンシブ』を選びます。

2. 

   スマートサイズを選ぶ
   【コードを取得】から『スマートサイズ』を選びます。

3. 

   コードをHTMLに貼り付ける
   アドセンスを設置したいHTMLファイルの場所へ、全てのコードを貼り付けます。

広告サイズの形を指定する方法

7行目を書き換えて形を指定します。

スマートサイズの設置はとても簡単ですが、いざスマートサイズを設置してみたら「今までレクタングルだった箇所が横長になってしまった！」ということがあります。
これは表示される広告の形を指定することで解決できます。

公式のヘルプにも書いているように7行目のdata-ad-format="auto"の部分を変更します。

指定できる形は4種類

3つの形を4つの書き方で指定します。

• auto（自動調整）
• horizontal（横長）
• rectangle（四角形）
• vertical（縦長）

の4つの形を7行目に指定できます。
横長のときはdata-ad-format="horizontal"のように指定します。ほかにもdata-ad-format="rectangle, horizontal"のように四角形または横長と複数指定することもできます。※先に書いた方の形が優先されるといったことはないようです。

スマートサイズは、大まかな形を指定するだけなのでメディアクエリを使って調整するアドバンスのような細かい調整はできず、表示される広告は高い成果が見込める広告サイズが優先的に選ばれるようです。

広告のサイズに合ったデザインをしよう

高さを指定してもはみ出てしまいます。

スマートサイズを設置したい場所の縦幅をheight:50px;と指定してもレクタングルがはみ出た状態で表示されるときがあります。
デザインのときから広告の高さを計算して、ぴったりとアドセンスが当てはまるデザインにしましょう。

表示される広告の幅について

広告はエリアの中央に表示されます。

レスポンシブ広告だからといってどんな幅にもぴったりの広告が表示されるわけではありません。
表示されるエリア自体は横幅ぴったり（最大幅1200px）の左寄せですが表示される広告は、幅の中に入る既存のサイズが選ばれて幅の中央に表示されます。

『広告をぴったり左寄せにしたい』、『ぴったり右寄せにしたい』ときは、アドセンスのコードを囲むdivの幅を表示させたい広告の幅を指定して（728pxなど）floatやmarginなどで対応します。

なぜか表示されないときの解決方法

スマートサイズは自動で横幅の計算をして適切なサイズの広告を表示してくれます。逆にいうと横幅が計算できない状態になっていると広告自体が表示されないので気をつけましょう。

幅が計算できない状態とは、幅を指定していないinline-blockの中や、幅を指定していないfloatの中などです。
どちらも通常は幅を指定しますが、少し凝ったレイアウトのときは幅を指定していないときもあるので「アドセンスが表示されない！」といったときはブラウザのデベロッパーツール（キーボードのF12を押す）などで幅が指定されているかどうか確認しましょう。

レイアウトの関係で幅の指定がむずかしいときは、アドセンスのコードをdivなどで囲んで幅を指定するとアドセンスが表示されるようになります。

アドバンスの設置方法

アドバンスは出力されたコードをCSSとHTMLに分けて貼り付けます。

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

アドバンスの取得と設置の方法

1. 

   広告ユニットを選ぶ
   アドセンスページの【広告の設定】ページへ移動して【新しい広告ユニット】から『レスポンシブ』を選びます。

2. 

   アドバンスを選ぶ
   【コードを取得】から『アドバンス』を選びます。

3. 

   コードをCSSとHTMLに貼り付ける
   表示されたコードの2～4行目をCSSファイルに、6～14行目を設置したいHTMLファイルの場所へ貼り付けます。

広告サイズを指定する方法

アドバンスはメディアクエリで広告サイズを細かく指定します。
2行目は初期状態の指定で、幅320px・高さ50pxの広告が表示されます。3行目は最小幅が500px（@media(min-width: 500px)）を超えたら幅468px・高さ60pxの広告（{ .ad { width: 468px; height: 60px; } }）が、4行目は幅800px（@media(min-width: 800px)）を超えたら幅728px・高さ90pxの広告（{ .ad { width: 728px; height: 90px; } }）が表示される指定になっています。

新たなブレイクポイント（サイズを切り替える基準）を指定したいときや既存の指定を変更したいときは@media(min-width: ●●px)の部分を変更します。
広告サイズを変更したいときは{ .ad { width: ●●px; height: ●●px; } }の部分を変更します。幅と高さ、は高い成果が見込める広告サイズの中からサイトにあったものを選びましょう。

初期状態の指定では、幅320pxから始まるモバイルファーストの指定になっていますが、max-width: 500px、 max-width: 320pxとサイズを小さくしていっても表示されます。ページのつくりにに合わせて調整しましょう。

表示は常に左寄せ

インラインブロック要素なのでtext-alignを使うと左右、中央寄せが簡単です。

9行目のようにdisplay: inline-block;となっているので、何も指定していないときは左寄せになります。
中央寄せや右寄せにしたいときはアドセンスを囲むdivにtext-align: center;やtext-align: right;を指定しましょう。

縦横回転には未対応

画面の縦横回転には対応していません。

最初にも書きましたが、2014年1月時点では画面の縦横回転の時の再読み込みはされずに最初に表示されたサイズのまま回転します。
回転にあわせて適切なサイズを表示させたいときは、スマートサイズを使いましょう。