スマホでGoogle Adsense(アドセンス)のレスポンシブ広告がはみ出す時のカスタマイズ

レスポンシブ広告は非常に便利ですよね。

自動でサイズを最適化してくれるので、とりあえずレスポンシブにしとけば大丈夫。

でも、スマホ表示の時だけやたら大きく表示されたりしませんか？

現代はネット社会化してますが、PCで閲覧するより手軽にスマホで閲覧する方がほとんどです。

スマホ閲覧時の広告サイズも結構重要なんですよね！

今回はスマホ閲覧の時に広告サイズが大きくなってしまう時の対処法を紹介します。

Google AdSense 広告コード

スマホでのアドセンスのレスポンシブ広告ユニットは、表示される時に画面の横幅一杯に表示されるという設定が自動でされています。

レスポンシブ広告ユニットは現在では多くの方が利用していますが、もともとは様々な形の広告があり、どこにどんな形の広告を貼るのか？で考えられてきました。

AdSenseの広告ユニットは実はコードのカスタマイズが一部認められています。

レスポンシブ以前に人気のあるレクタングルを今回は取り入れつつ、広告の最適化の設定をしてみましょう。

カスタマイズ

カスタマイズのやり方は簡単です。

レスポンシブの広告をアドセンスからコピーします。

<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<!--ここには広告の名前が入ります-->
<ins class="adsbygoogle"
     style="display:block"
     data-ad-client="ca-pub-0000000000000000"
     data-ad-slot="0000000000"
     data-ad-format="auto"
     data-full-width-responsive="true"></ins>
<script>
     (adsbygoogle = window.adsbygoogle || []).push({});
</script>

サイズを指定する

サイズを指定してレクタングルに設定します。

こちらは別に設定しない方はされなくても大丈夫ですが、大きさの指定の仕方は知っていて損する事はないでしょう！

大きさの指定は簡単です。

アドセンスコードの中のdata-ad-format=”auto”のautoを変更します。

今回はレクタングルに変更するのでdata-ad-format=”rectangle”と変更するだけでOKです。

横幅を指定する

表示の幅を調整します。幅の設定の仕方もとても簡単です。

上記アドセンスコード中のdata-full-width-responsive="true"><ins>の後ろの部分をtrue→falseに変更します。

よってdata-full-width-responsive="false"><ins>になります。

まとめ

こちらが完成したコードです。

<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<!--ここには広告の名前が入ります-->
<ins class="adsbygoogle"
     style="display:block"
     data-ad-client="ca-pub-0000000000000000"
     data-ad-slot="0000000000"
     data-ad-format="false"
     data-full-width-responsive="rectangle"></ins>
<script>
     (adsbygoogle = window.adsbygoogle || []).push({});
</script>

このコードを自身のサイトの広告欄に入れればサイズを指定してアドセンス広告を表示させる事ができます。

とても簡単ですので是非試してみてください。

以上っ！