Googleアドセンスに「レスポンシブユニット」というデバイスの幅に応じて適切なサイズの広告を配置してくれるものがあります。
「適切なサイズの広告」とは言っても最適という訳でもないので、もうちょっと突っ込んだところまでコントロールしたいなと思っていたところ、Googleアドセンスの公式サイトに編集方法が載っていましたので紹介します。
Googleアドセンスのレスポンシブユニットで表示される広告サイズを調整するには？
僕がやりたかったのは、「iPhone 5やSEなどではレクタングル中を表示し、レクタングル大が収まるディスプレイサイズの端末にはレクタングル大を表示させる」というカスタマイズです。
広告サイズの変更方法についてはGoogleアドセンスの公式ヘルプページに詳しく載っています。
サンプルコードも載っているのでそちらを元にカスタマイズすればよいかなと思います。
ヘルプページに掲載されているサンプルコードを僕の環境で使えるようにCSSをカスタマイズしたコード例がこちら。
<style>
.ads_responsive { width: 300px; height: 250px; }
@media(min-width: 375px) { .ads_responsive { width: 336px; height: 280px; } }
</style>
<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<!-- ads_responsive -->
<ins class="adsbygoogle ads_responsive"
style="display:inline-block"
data-ad-client="ca-pub-XXXXXXX11XXX9"
data-ad-slot="8XXXXX1"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
上記サンプルコードの「data-ad-client」「data-ad-slot」をご自身のコードに置き換えれば即使うことができますよ。
肝となるのはメディアクエリの部分。元のサンプルコードに@media(min-width: 500px)という記述がありますが、僕はこの幅をiPhone 6やiPhone 7のディスプレイサイズである「375px」としました。
デフォルトではレクタングル中の「300px × 250px」が表示されるようにサイズ指定してますので、iPhone 5などのディスプレイサイズの小さい端末ではレクタングル中が表示されます。そして「375px」以上のディスプレイ幅がある端末ではレクタングル大の「336px × 280px」が表示されるという訳です。
ちなみに、このCSSは外部スタイルシートに記述するのはNGなようです。「正式にはサポートされてません」と書かれていました。
最後に
僕はレクタングル縛りにしましたが、レスポンシブユニット一つで様々なサイズの広告を出し分けできて便利ですよ。
アドセンスの広告サイズを調整したい方はぜひお試しください。