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

グーグルアドセンスのレスポンシブ広告を親要素のサイズに合わせる方法
2018年8月16日2019年1月16日
この記事は最終更新から5年以上経過しています。内容が古くなっている可能性があります。

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

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

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

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

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

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

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

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

最後に

レスポンシブタイプの広告ユニットは便利ですし見た目もキレイです。しかし、自動で何かをやってもらおうとすると、デザインの細かい所が気になってくる事も多いですね。

iframeで表示している上に「コードを改変するな」というアドセンス広告は、なかなかこちらの思い通りになりません。仕様をよく理解して、なるべく綺麗に整えて表示したいものですね。

参考サイト

記事内広告の全幅レイアウト – AdSense ヘルプ

関連のある記事

ワードプレスの記事前後に自動でグーグルアドセンス広告ユニットを挿入する方法

ワードプレスの記事前後に自動でグーグルアドセンス広告ユニットを挿入する方法

記事を読む

Google Adsense広告を記事中のX番目の見出しの前に自動で挿入【ワードプレス】

Google Adsense広告を記事中のX番目の見出しの前に自動で挿入【ワードプレス】

記事を読む

Generic selectors
Exact matches only
Search in title
Search in content
Post Type Selectors

目次へ