ちわーす。
レスポンシブですよ、かっぱふぅ（ @kappafoo ）です。
先日からこのサイトのレイアウトなどを変更しようと、日々勉強している真っ最中です。
このサイト、なんちゃってレスポンシブなデザインになっているため、レイアウト変更は色々と大変なんですよ。
cc licensed ( BY ) flickr photo shared by Akira Ohgaki
さて、６月７日付の「AdSense 日本版 公式ブログ」において、「ウェブの技術進化に対応するために広告コードの変更が可能になりました」の記事がアップされました。
その公式ブログの記事はコチラです。
その中で、次の４つについては、AdSense 広告コードを変更できると紹介されています。
• レスポンシブ ・ウェブデザイン
• A/B テスト
• 動的なカスタム チャネルの設定
• 広告タグの削減
もちろん「広告のパフォーマンスを作為的に高めたり、広告主様に損害を与えたりするものでない限り、Google の利用規約とプログラム ポリシーに沿った形で」という前置きが付いていますが．．．
さて、その方法についてはAdsenseのヘルプ「AdSense 広告コードの修正」の中に書かれています。
今回はレスポンシブ・ウェブデザインのところだけを抜粋します。
（以下、「AdSense 広告コードの修正」よりの抜粋です。）
・レスポンシブ・ウェブデザイン
通常、適切なレスポンシブ デザインとは、CSS メディア クエリを使用することを意味しますが、以下のコード スニペットを使用することでも同様の効果を得ることができます。なお、このサンプルでは、画面サイズに合わせた調節が行われますが、画面の向きに合わせた調節には対応していないのでご注意ください。
<script type="text/javascript"> google_ad_client = "ca-publisher-id"; width = document.documentElement.clientWidth; google_ad_slot = "1234567890"; google_ad_width = 320; google_ad_height = 50; if (width > 500) { google_ad_slot = "3456789012"; google_ad_width = 468; google_ad_height = 60; } if (width > 800) { google_ad_slot = "2345678901"; google_ad_width = 728; google_ad_height = 90; } </script> <script type="text/javascript" src="http://pagead2.googlesyndication.com/pagead/show_ads.js"> </script>
このコードで何をしているかといえば．．．
「320×50の広告」「468×60の広告」「728×90の広告」があったとします。
このとき、まずは３行目で「width」に画面の横幅の数値が入ります。
次に４～６行目で「320×50の広告」が選ばれます。
７行目のif文で画面の横幅が500より大きいと８～１０行目で「468×60の広告」が選ばれます。
１２行目のif文で画面の横幅が800より大きいと１３～１５行目で「728×90の広告」が選ばれます。
その後、１９行目で選ばれたサイズの広告が表示されるわけです。
（注意 ２行目のpublisher-idは各自の番号にすることを忘れないでください。）
スマートフォンなどの小さな画面の時はサイズの小さな広告、ＰＣのデスクトップなどの大きな画面の時はサイズの大きな広告が表示される仕組みになるわけです。
ということで私のサイトでもヘッダー画像下のリンクについては、このコードを参考にして作り変えました。
ちなみに、CSSに「display:none」を記述して広告ユニットを隠す方法は、禁止されている改変にあたるようです。
このブログで以前、記事にした「WordPressのアドセンスの広告サイズをパソコンとスマートフォンで変更する方法」では、User-agentによって、それぞれのコードを読むようにしています。
この方法については言及がないので、このまま行なっていこうと思ってます。
以上、レスポンシブ・ウェブデザインにおけるGoogleAdsenseについてでした。
