2013年8月頭くらいにGoogle Adsenseにレスポンシブwebデザインに対応した可変の広告ユニットがベータ版として公開されました。

Google Adsense

 

今回はその新広告ユニットの設定方法を記事にしようと思います♪

 

どのように表示されるのか?サンプルを見てみよう

場所はこのページ(サイト)の私のプロフィールの下。スポンサードリンクの部分です。

あれ?と思う方も多いと思います。

そうです!(2013年9月2日現在)まだリアルタイムで広告サイズが切り替わりませんw
ページが読み込まれた時のスクリーンサイズに応じた広告が表示されるだけです。

まあ、後日対応するとの事なので、気長に待っておきましょうw

 

レスポンシブ広告の作成

以下のように「新しい広告ユニットを作成」から「レスポンシブ広告ユニット(ベータ版)」を選択して、「保存してコードを取得」ボタンを押すだけでOKです。

googleアドセンスのレスポンシブ広告ユニット作成画面

 

コードの変更

以下のようなコードが取得できるのですが、これでは自分のサイトにマッチした広告サイズには切り替わってくれません。

 

なので、1~5行目を以下のように変更します。(このサイトのスポンサードリンクの場合)

 

一応何をどうしたのかを説明すると、

で、標準の広告サイズを横336px:縦280pxに設定し、

で、スクリーンサイズ(基本、ブラウザの表示部分の事)が720px以上の時に、広告サイズを横728px:縦90pxで表示。

で、スクリーンサイズが961px以上の時に、広告サイズを横300px:縦600pxで表示するように設定しています。

 

要は、上記のような方法で条件を追加してあげれば、任意のスクリーンサイズで広告サイズを変更できるということです。
もちろん、条件は上記例のように2つでなくてもかまいません。
3個4個と条件を追加して、よりレスポンシブにする事も可能です。

 

注意点

広告サイズ

コード内に記述する広告サイズはサポートされているサイズのみで、かつリンクユニット以外で指定する必要があります。
つまり、以下の15通りのサイズになります。
Googleアドセンスのレスポンシブ広告ユニットで表示可能なサイズ

複数のレスポンシブ広告ユニットを配置

複数のレスポンシブ広告ユニットを配置する場合は、CSSのクラス名を変更しましょう。
(例).my_adslot を .my_adslot2 にする


このブログの現在の順位はこちら→∩(´∀`)∩