投稿日：
Googleアドセンスのレスポンシブ広告をメディアクエリでサイズ、形状、位置を指定する方法。
レスポンシブ広告コードをそのまま利用しても意図したサイズが表示されない
閲覧者の環境によって広告サイズを自動的に変更したい場合は、「レスポンシブ広告」を利用すると便利なのですが、デフォルトのコードを挿入したままだと、設置者が意図したサイズが出なくて困ることがあります。
ここでは、メディアクエリを利用して「画面の幅によって自動的に広告サイズを変更」すること、「広告の形状を指定」すること、「広告の位置を変更」することを説明します。
元のレスポンシブ広告コード
<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<!-- ad_xxx -->
<ins class="adsbygoogle"
style="display:block"
data-ad-client="ca-pub-xxxxxxxxxxxxxxxx"
data-ad-slot="xxxxxxxxxx"
data-ad-format="auto"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
メディアクエリで「画面の幅によって自動的に広告サイズを変更」し、形状を「レクタングル指定」し、「広告位置を中央に配置」する
<p>
<style type="text/css">
.ad_xxx { width: 300px; height: 250px; }
@media (min-width:300px) { .ad_xxx { width: 300px; height: 250px; margin-right: auto; margin-left: auto; margin-bottom: auto; } }
@media (min-width:400px) { .ad_xxx { width: 336px; height: 280px; margin-right: auto; margin-left: auto; margin-bottom: auto; } }
</style>
<p style="text-align: center; color: #666; margin-top:40px; margin-bottom:40px;">
スポンサーリンク<br />
<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<!-- 共通記事中【レスポンシブ】 -->
<ins class="adsbygoogle ad_xxx"
style="display:block"
data-ad-client="ca-pub-xxxxxxxxxxxxxxxx"
data-ad-slot="xxxxxxxxxx"
data-ad-format="rectangle"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
</p>
コードの説明
1行目 スタイル設定開始
2行目 初期設定
初期状態で300×250が表示される設定です。
モバイルのファーストビューで、300×250がデフォルトで表示されると、警告がきますので、この方法ではファーストビューには利用できません。
広告設定場所ごとに新しくコードを作ったほうが効果を測定しやすいので、ファーストビュー専用に320×100サイズを作成して入れたほうがよいでしょう。
2行目と3行目の内容が被っているので、この場合は最小サイズが300×250が表示されますから、3行目ななくても同じことになります。
もう少し大きい画面を想定して、800px以上の画面の場合は、728×90pxのビッグバナーを表示を追加します。
@media (min-width:800px) { .ad_xxx { width: 728px; height: 90px; margin-right: auto; margin-left: auto; } }
画面サイズの大きさによって、サイズ指定も何パターンか追加していくことができます。
ただし、14行目を、rectangleにしておくと、728×90のビッグバナー（横長）が表示されないので、autoに戻すか、”rectangle,horizontal”のように併記しておく必要があります。
3行目 画面300pxを超えたら、300×250のレクタングル広告が中央寄せで表示される。
4行目 画面400pxを超えたら、336×280のレクタングル広告が中央寄せで表示される。
5行目 スタイル設定終了
6行目 pタグ開始。スポンサーリンク表記を中央寄せで、カラーを指定して、上下のマージンを40pxづつあける。
7～16行目 アドセンスコード
17行目 pタグ終了
広告ユニットの形を4パターン指定することができる
14行目の広告ユニットの形を指定することが可能。
@media (min-width:800px) { .ad_xxx { width: 728px; height: 90px; margin-right: auto; margin-left: auto; } }
初期設定ではautoが挿入されている。
data-ad-format="rectangle"></ins>
好みに合わせて、
- auto（自動）
- rectangle（レクタングル）
- vertical（縦長）
- horizontal（横長）
を切り替えたり、同時に指定することが可能です。 スマホをターゲットにしている場合は、rectangle（レクタングル）が効果が高いようです。
いずれにしても、設置後は、「ちゃんと表示されているか」「カウントされているか」確認する必要があります。
