レスポンシブデザインでGoogleAdsenseの広告サイズ変更が公式サイトで紹介されています。

ちわーす。
レスポンシブですよ、かっぱふぅ@kappafoo )です。

先日からこのサイトのレイアウトなどを変更しようと、日々勉強している真っ最中です。

このサイト、なんちゃってレスポンシブなデザインになっているため、レイアウト変更は色々と大変なんですよ。


cc licensed ( BY ) flickr photo shared by Akira Ohgaki

さて、6月7日付の「AdSense 日本版 公式ブログ」において、「ウェブの技術進化に対応するために広告コードの変更が可能になりました」の記事がアップされました。

その公式ブログの記事はコチラです。

Inside Adsense – 日本語: ウェブの技術進化に対応するために広告コードの変更が可能になりました

その中で、次の4つについては、AdSense 広告コードを変更できると紹介されています。

 • レスポンシブ ・ウェブデザイン
 • A/B テスト
 • 動的なカスタム チャネルの設定
 • 広告タグの削減

もちろん「広告のパフォーマンスを作為的に高めたり、広告主様に損害を与えたりするものでない限り、Google の利用規約とプログラム ポリシーに沿った形で」という前置きが付いていますが...

さて、その方法についてはAdsenseのヘルプ「AdSense 広告コードの修正」の中に書かれています。

今回はレスポンシブ・ウェブデザインのところだけを抜粋します。
(以下、「AdSense 広告コードの修正」よりの抜粋です。)

・レスポンシブ・ウェブデザイン

通常、適切なレスポンシブ デザインとは、CSS メディア クエリを使用することを意味しますが、以下のコード スニペットを使用することでも同様の効果を得ることができます。なお、このサンプルでは、画面サイズに合わせた調節が行われますが、画面の向きに合わせた調節には対応していないのでご注意ください。

このコードで何をしているかといえば...

「320×50の広告」「468×60の広告」「728×90の広告」があったとします。

このとき、まずは3行目で「width」に画面の横幅の数値が入ります。
次に4~6行目で「320×50の広告」が選ばれます。
7行目のif文で画面の横幅が500より大きいと8~10行目で「468×60の広告」が選ばれます。
12行目のif文で画面の横幅が800より大きいと13~15行目で「728×90の広告」が選ばれます。

その後、19行目で選ばれたサイズの広告が表示されるわけです。
(注意 2行目のpublisher-idは各自の番号にすることを忘れないでください。)

スマートフォンなどの小さな画面の時はサイズの小さな広告、PCのデスクトップなどの大きな画面の時はサイズの大きな広告が表示される仕組みになるわけです。

ということで私のサイトでもヘッダー画像下のリンクについては、このコードを参考にして作り変えました。

ちなみに、CSSに「display:none」を記述して広告ユニットを隠す方法は、禁止されている改変にあたるようです。

このブログで以前、記事にした「WordPressのアドセンスの広告サイズをパソコンとスマートフォンで変更する方法」では、User-agentによって、それぞれのコードを読むようにしています。

この方法については言及がないので、このまま行なっていこうと思ってます。

以上、レスポンシブ・ウェブデザインにおけるGoogleAdsenseについてでした。

この記事が参考になったら、シェアしてください

 

 

関連記事も見てください

GoogleWordPressのアドセンスの広告サイズをパソコンとスマートフォンで変更する方法 (2012.09.30)
responsiveレスポンシブデザインを固定幅+リキッドレイアウトに一歩前進させました。 (2012.09.29)
テーマ2レスポンシブデザインでWordPressのテーマを作製しました。 (2012.09.06)
Google AdSenseのセクションターゲットとカスタムチャネルのターゲット設定を導入しました。 (2012.10.03)
Google ディスプレイネットワーク Ad Plannerで自分のサイトを調べてみました。 (2012.12.18)

RSSの登録で最新記事をお届けします

フォローしてもらえると嬉しいです

F

コメントをどうぞ

メールアドレス (必須・公開されません)
コメント本文

  • スパム・迷惑コメント投稿防止のため、メールアドレスの入力が必須ですが、公開はされません。何卒ご協力のほどお願いいたします。
  • 投稿いただいたコメントは管理者のチェック後掲載しておりますので、即時には反映されません。

▲Pagetop