[Google Adsense]記事途中（記事中）広告のレスポンシブ対応（スマホ画面表示）について考える！

前回、記事の途中に広告を挿入する手順をご紹介しました。⇒ [Google Adsense]記事途中に広告挿入！「moreタグ」部分に広告を挿入する方式を採用しました！

ここで問題になってくるのが、WordPressなんかでレスポンシブ対応のテーマを使っている場合の、PC画面とスマホ画面での広告サイズについての対応です。

通常のPC画面だったら「336×280」の大きな広告を貼って、スマホとかの画面だったら「300×250」の中サイズの広告を表示したいと考えますよね！

PCサイズの「336×280」の広告を記事下に追加したら、スマホの画面では広告が大きすぎてはみ出してしまいます。かといってスマホ対応の「300×250」を追加すると、PCの画面では小さすぎて目立たないといったジレンマに陥ってしまいます。

そこで登場するのが「レスポンシブ対応」の広告サイズになります。

しかしこれをそのまま貼ればいいって訳ではありません。思った通りのサイズを表示するかは、広告の貼り付け位置＆Google頼みになってしまいます。（CSSで調整すればコントロールできますが・・・）

基本的にAdsense広告のコードの改変は認められていませんが、レスポンシブ対応のコードでは、限定的にコードの修正が許可されているんです。

細かく設定する方法が、[Google Adsense]のヘルプページ「CSSを使って正確なサイズを指定する場合」で紹介されています。

各種端末でのレスポンシブサイトに最適な広告ユニットの正確なサイズがわかれば、CSS3 メディアクエリを使ってレスポンシブ広告ユニットのサイズを設定することができます。CSS3 メディアクエリを使用するよう広告コードを修正する方法については、次の例をご覧ください。

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

修正箇所は、以下の赤部分になります。
===============================================
<style type="text/css">
.adslot_1 { width: 300px; height: 250px; } ← モバイルの広告サイズ設定
@media (min-width:500px) { .adslot_1 { width: 336px; height: 280px; } } ← 画面が500px以下の場合のサイズ
@media (min-width:800px) { .adslot_1 { width: 336px; height: 280px; } } ← 画面が500px以下の場合のサイズ
</style>
<ins class="adsbygoogle adslot_1"
style="display:inline-block;"
data-ad-client="ca-pub-xxxxxxxxxxxxxxxx"
data-ad-slot="xxxxxxxxxx"></ins>
<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<script>(adsbygoogle = window.adsbygoogle || []).push({});</script>
===============================================