レスポンシブ広告ユニットで横幅いっぱいになる全幅表示が気に入らないので修正しました

AdSenseでレスポンシブ広告を選択するのが推奨とされているかと思います。

ただその広告を選択するとどうしても画面いっぱい横幅が広がって広告が占める範囲があまりにも大きいのではないか…と思い今回はそちらのサイズを修正しました。

レスポンシブ広告ユニットとは

レスポンシブ広告ユニットを使用すると、各端末において広告以外の部分のレイアウトに合わせて広告のサイズを制御できます。

レスポンシブ広告ユニットについて - AdSense ヘルプ

AdSenseで設定した広告でも、レスポンシブでサイトやデバイス合わせてサイズを自動調整してくれるわけです。

広告ユニットのサイズ選択で「推奨」とされている

広告ユニットを新規作成する際、サイズ選択の欄では以下のようになっているかと思います。

このように「推奨」とされています。

Googleが言うんですから、このとおり推奨に従うのですが…

画面横幅いっぱいに表示されてしまう

 こんな感じでスマホでは画面サイズいっぱいに表示されてしまいました。

 しかも、親要素でwidthを90%とかに指定しても、突き破ってしまいます。

うまくスクロールできなかったりと全幅表示は何かと気に入らないので、今回こちらの広告のサイズを修正したいと思います。

１．全幅サイズでの表示を無効にする

広告ユニットを作成したら、コードを取得します。

HTML

<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<!-- 広告種類 -->
<ins class="adsbygoogle"
     style="display:block"
     data-ad-client="ca-pub-123456789101234"
     data-ad-slot="XXXXXXXXXX"
     data-ad-format="auto"
     data-full-width-responsive="true"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>

このように出てきたコードのこの部分

 data-full-width-responsive="true"

こちらを無効にしたいので

 data-full-width-responsive="false"

trueをfalseに書き換えました。


こちらで親要素を突き破って全幅表示されていた表示がなくなりました。
親要素のサイズに合わせて自動的に縮んでくれますよ！

詳細・注意はこちら

AdSenseの公式ヘルプからの引用となります。
ただし、こちらを変更する場合の注意点があります。

ただし、この動作を無効にすると増収の機会を逃す可能性があります。Google が行ったテストの結果、モバイル端末が縦表示の場合には、全幅サイズのレスポンシブ広告で成果が上がることが判明しています。

とのことで、あくまで推奨されているのは全幅サイズでのレスポンシブ広告とのことでした。
support.google.com

２．画面幅に合わせて広告ユニットのサイズを変更する

メディアクエリでブレイクポイントを作成し、広告ユニットのサイズを設定する方法もあるみたいです。


レスポンシブで使える、メディアクエリについては詳しくはこちら▼
www.misallychan.com

CSS

/* 画面幅 500px 未満: 広告ユニット 320×100 */
.size_change { width: 320px; height: 100px; }
/* 画面幅 500px～799px: 広告ユニット 468×60 */
@media(min-width: 500px) { .size_change{ width: 468px; height: 60px; } }
/* 画面幅 800px 以上: 広告ユニット 728×90 */
@media(min-width: 800px) { .size_change { width: 728px; height: 90px; } }　

HTML

<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<!-- 広告種類 -->
<ins class="adsbygoogle size_change"
     style="display:block"
     data-ad-client="ca-pub-123456789101234"
     data-ad-slot="XXXXXXXXXX"
     data-ad-format="auto"
     data-full-width-responsive="true"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>

cssで設定し、広告ユニットを読み込む際のclassに設定したclass名を追加しました。


これで指定したサイズに変更されました！

横幅だけでなく縦幅も調整したい際におすすめ

スマホだと正方形に近いかたちのバナー広告が表示されがち。
ただ、デバイスの横幅に対する正方形に近い形だと、かなり縦にも大きな広告となってしまいます。
ヘッダーに広告を設置した場合は、なかなかコンテンツに行き着かずユーザーにとってもストレスですよね。
なので、高さも調整したい場合にはおすすめです。


私はとりあえず

.size_change { width: auto; height: 100px; }
@media(min-width: 500px) { .size_change{ width: auto; height: 60px; } }
@media(min-width: 800px) { .size_change { width: auto; height: 90px; } }　

このように横幅をautoにしてみました。これだとテキスト広告が多かったです。
AdSenseに広告を出す場合、指定された大きさに合わせてバナーを作成していると思うので、AdSenseで配信している横サイズ×縦サイズに設定したほうがバナー広告が表示される確率は高くなり、効果はあがりそうですね。

詳細はこちら

AdSenseの公式ヘルプからの引用となります。
support.google.com
こんな方法があったとは〜もっと早く知っておけばよかった。




広告までレスポンシブ化されてるので、ぜひ広告も細かく設定したり、サイトもレスポンシブ化してみましょう〜。
www.misallychan.com
www.misallychan.com
www.misallychan.com