WordPressでは、レスポンシブデザイン（PC、スマートフォン、タブレット対応）が当たり前になってきました。
ですが、そこに貼り付けているアドセンス広告はそのままで、横長の広告が画面からはみ出している・・・なんて方をたまに見かけます。
今回は、Googleアドセンスのレスポンシブ広告ユニットを使って、各デバイスに広告を対応させる方法を紹介します。
レスポンシブ広告ユニットを使うと、以下のようにデバイスに応じて、広告サイズを自動で切り替えることができます。
PCの場合 728*90
iPad 横向きの場合 728*90
iPad 縦向きの場合 468*60
iPhoneの場合 320*50
まず、Googleアドセンスのホーム画面から [広告の設定] → [+新しい広告ユニット] をクリックし、広告ユニットのサイズを [レスポンシブ広告ユニット（ベータ版）] にします。
広告を作成後、コード取得ボタンをクリックすると、[スマートサイズ] と [アドバンス] を選択することができますので、[アドバンス] を選択します。
次に取得したコードのスタイル（以下の部分）を変更します。
<style>
.ishoten { width: 320px; height: 50px; }
@media(min-width: 500px) { .ishoten { width: 468px; height: 60px; } }
@media(min-width: 800px) { .ishoten { width: 728px; height: 90px; } }
</style>
これは、横幅800px以上だとビッグバナー（728*90）が、800pxから500pxだとバナー（468*60）、500px以下だとモバイルバナー（320*50）が表示されるという意味です。
あとは、min-widthとバナーサイズを任意の値に変更するだけです。ちなみにわたしの場合、以下のように設定しています。（iPad Retinaのサイズが2048*1536（1024*768）のため、そのようにしています）
<style>
.ishoten { width: 320px; height: 50px; }
@media(min-width: 768px) { .ishoten { width: 468px; height: 60px; } }
@media(min-width: 1024px) { .ishoten { width: 728px; height: 90px; } }
</style>
以上、Google アドセンス広告をスマホ/タブレット対応にする方法です。
WordPressの場合、条件分岐タグを使って、表示を切り替える方法もありますが、レスポンシブ広告ユニットを使った方が簡単です。
せっかくサイトがレスポンシブ対応しているのに、広告がはみ出てレイアウトが崩れてる・・・そんな方はぜひ、お試しください。