アドセンス のレスポンシブ広告ユニットの高さ・幅指定

弊社のサイトの広告表示にGoogleのアドセンスを使っているのですが、スマートフォン用のサイトの場合、広告ユニットのサイズを指定せずにレスポンシブで使うことが多いです。

ただ、いくらレスポンシブと言っても、広告を掲載したいエリアの大きさを指定したいことがあります。

アドセンスの広告ユニットが固定サイズの場合は、ユニット自体をdivで囲んでdivにstyleを指定すれば、適用させることができました。ただ、レスポンシブ広告の場合は、広告ユニットを囲む親divのスタイルを書き換えて広告枠のサイズを自動で変更してしまうので、その方法でstyleを指定することができません。

それでどうしたものか悩んでいたところ、アドセンスのヘルプにやり方が公開されていました。

support.google.com

やり方としては、アドセンスのinsタグのstyle属性でmin-widthやmax-widthを指定すれば良いようです。

<ins class="adsbygoogle"
   style="display:inline-block;min-width:400px;max-width:970px;width:100%;height:90px"
   data-ad-client="ca-pub-1234"
   data-ad-slot="5678"></ins>
<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-1234" crossorigin="anonymous"></script>
<script>(adsbygoogle = window.adsbygoogle || []).push({});</script>

さらに、こちらのヘルプ

support.google.com

によると、insタグのclass属性を指定することで、cssを効かせたりメディアクエリを使ってレスポンシブ対応(レスポンシブ広告の！)を実現できるようです。

以上、アドセンスのTIPSでした。