レスポンシブ広告は非常に便利ですよね。
自動でサイズを最適化してくれるので、とりあえずレスポンシブにしとけば大丈夫！！
でも、スマホ表示の時だけやたら大きく表示されたりしませんか？
現代はネット社会化してますが、PCで閲覧するより手軽にスマホで閲覧する方がほとんどです。
スマホ閲覧時の広告サイズも結構重要なんですよね！
今回は設定の際どうしてもスマホ閲覧の時にはサイズが大きくなってしまう時の対処法を紹介します。
スマホでのアドセンス表示はレスポンシブ設定
スマホでのアドセンスのレスポンシブ広告ユニットは、表示される時に画面の横幅一杯に表示されるという設定が自動でされています。
中には問題ないようなサイトもあるとは思いますが、レイアウトを気にしている方からすると、どうにも納まりがよくありません。
どうにかクリックされやすく、納まりの良い広告にしたいものですよね！
レスポンシブ広告ユニットは現在では多くの方が利用していますが、もともとは様々な形の広告があり、どこにどんな形の広告を貼るのか？でみんな考えてきました。
レスポンシブ以前に人気のあるレクタングルを今回は取り入れつつ、広告の最適化の設定をしてみましょう！
設定の仕方
設定の仕方は簡単です。
まずレスポンシブの広告をアドセンスからコピーします。
<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>こちらが完成したコードです。
このコードを自身のサイトの広告欄に入れればサイズを指定してアドセンス広告を表示させる事ができます。
とても簡単ですので是非試してみてください！
以上っ！！！
コメント