広告

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

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

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

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

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

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

こんな方におすすめ

  • スマホでのアドセンスサイズの設定方法
  • 最適なレスポンシブデザインは？
  • はみ出さない貼り方

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

Google AdSenseのコード

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

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

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

公式サイトGoogle AdSenseの広告について

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

Google AdSenseの掲載方法については「AFFINGER6｜GoogleAdSense広告の貼り方」で詳しく解説しているので、こちらを閲覧ください。

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を変更します。

  • rectangle(レクタングル)
  • horizontal(横長)
  • vertical(縦長)

今回はレクタングルに変更するので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>

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

その他のカスタマイズ

Google AdSenseのコードはカスタマイズができるのはわかったと思いますが、サイズ調整以外のも様々なカスタマイズがあります。

もちろん公式サイトから解説されているので、規約違反にはなりません。

アフィンガースタジオでは「Google AdSenseのMultiplex広告（マルチプレックス）をカスタマイズしてみた」のようなカスタマイズも解説しています。

ぜひカスタマイズして、自身のサイトに合うアドセンスの表示方法を見つけてみてください。

-カスタマイズ
-, ,

PAGE TOP