Google Adsense のレスポンシブ広告ユニットを横長用、縦長用、正方形用と指定する
Google Adsense のレスポンシブ広告は便利だけど、意図しない方向にびょーんと伸びる!
かといってサイズ指定すると、スマホから見るときに困るし…どうすんだこれっていうときに、
縦長、横長、正方形と、指定できるコードがあったのでメモ
レスポンシブの広告ソース
<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script> <!-- レスポンシブ --> <ins class="adsbygoogle" style="display:block" data-ad-client="ca-pub-8791350322176637" data-ad-slot="9707380902" data-ad-format="auto"></ins> <script> (adsbygoogle = window.adsbygoogle || []).push({}); </script>
これの、
data-ad-format=”auto”
の部分を差し替えるだけでOK
rectangle (正方形っぽいやつ)
vertical (縦長)
horizontal (横長)
カンマで区切って組み合わせた値(”rectangle, horizontal” など)
例)正方形っぽいやつ data-ad-format=”rectangle”
<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script> <!-- レスポンシブ --> <ins class="adsbygoogle" style="display:block" data-ad-client="ca-pub-8791350322176637" data-ad-slot="9707380902" data-ad-format="rectangle"></ins> <script> (adsbygoogle = window.adsbygoogle || []).push({}); </script>
例)縦長 data-ad-format=”vertical”
<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script> <!-- レスポンシブ --> <ins class="adsbygoogle" style="display:block" data-ad-client="ca-pub-8791350322176637" data-ad-slot="9707380902" data-ad-format="vertical"></ins> <script> (adsbygoogle = window.adsbygoogle || []).push({}); </script>
例)横長 data-ad-format=”horizontal”
<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script> <!-- レスポンシブ --> <ins class="adsbygoogle" style="display:block" data-ad-client="ca-pub-8791350322176637" data-ad-slot="9707380902" data-ad-format="horizontal"></ins> <script> (adsbygoogle = window.adsbygoogle || []).push({}); </script>
例)正方形・横長 data-ad-format=”rectangle, horizontal”
<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script> <!-- レスポンシブ --> <ins class="adsbygoogle" style="display:block" data-ad-client="ca-pub-8791350322176637" data-ad-slot="9707380902" data-ad-format="rectangle, horizontal"></ins> <script> (adsbygoogle = window.adsbygoogle || []).push({}); </script>
公式の詳細な案内はここ。
現在のレスポンシブ広告コードではご希望どおりの広告ユニットを作成できていない場合は、レスポンシブ サイトの要件を満たすように広告コードを修正してください。次の例に従うと、広告コードを正しく修正することができます。
レスポンシブ広告コードの高度な機能の例
現在のレスポンシブ広告コードではご希望どおりの広告ユニットを作成できない場合は、広告コードを修正して、一般的な形状(横長、縦長、レクタングル)のいずれかを指定して使用するか、または正確な広告ユニットのサイズを CSS で指定して使用することができます。この機能は、広告コードを修正する十分な技術をお持ちの場合にのみご利用ください。
https://support.google.com/adsense/answer/6307124?hl=ja&ref_topic=1307438