グーグルアドセンスのレスポンシブ広告を親要素のサイズに合わせる方法

2018年8月16日2019年1月16日

この記事は最終更新から5年以上経過しています。内容が古くなっている可能性があります。

グーグルアドセンスのレスポンシブ広告ユニットって、スマホで見ると自動的に画面幅いっぱいに広がりますよね。そんなの我慢ならない！親要素に合わせてくれよ！という、デザインへのこだわりの強い人向けの記事となっております。なんでもGoogleAdsenseが今までに収集したデータによると、スマホでは画面幅いっぱいにした方が広告効果が高いんだそうです。どれほどの差があるのかはわかりません。しかし、「その差はナント2倍！」とでも言われなければ、私は画面幅いっぱいの全幅表示は嫌です。なんだかそこだけ均整がとれていない感じが我慢なりません。

という訳で、今回はレスポンシブタイプの広告ユニットを使用している際に、広告が勝手に画面幅いっぱいに拡張されるのを防ぐ方法です。

～目次～

data-full-width-responsive属性を使う

実は広告コードの中で設定できる属性がいくつか用意されています。コードを眺めていて気になった方も多いと思いますが、insタグの属性にdata～というのがいくつか並んでいます。ここで使える属性の中にdata-full-width-responsiveというのがあります。

data-full-width-responsive="true"

1	data-full-width-responsive="true"

広告タイプによって記述されていない場合もありますが、初期値ではtrueになっています。これは、スマホで見た時に画面幅いっぱいまで自動的に拡張して表示するかどうかという設定です。

これをfalseに変えてやれば自動拡張がOFFになり、親要素の幅に合わせたレスポンシブ表示となります。

data-full-width-responsive="false"

1	data-full-width-responsive="false"

data-full-width-responsive属性は、レスポンシブ広告ユニット以外（ネイティブの記事内広告など）でも、レスポンシブタイプの広告ユニットなら使用できるようです。Google Adsenseでコピーした元々のコードには書いていない場合がありますが、その場合は書き足してあげましょう。

コード編集が不安な方は下の見本のように記述できればOKです。見本では8行目に書いてありますね。insタグの開始タグ内に書くので、場所を間違えないように気を付けましょう。

<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<ins class="adsbygoogle"
     style="display:block; text-align:center;"
     data-ad-layout="in-article"
     data-ad-format="fluid"
     data-ad-client="hogehoge"
     data-ad-slot="111111111"
     data-full-width-responsive="false"></ins>
<script>
     (adsbygoogle = window.adsbygoogle || []).push({});
</script>