先日 Google AdSense さんから「ユーもっとレスポンシブ広告使いな YO ! 336px ✕ 280px の広告使いな YO !」というお達しメールをいただきましたので、PC表示では 336px ✕ 280px 表示の広告を使用し、モバイルでは 300px ✕ 250px 広告が表示されるよう本ブログのアドセンス表示を変更しました。
PC表示で336pxレクタングル広告を導入したはよいが、スマートフォンでそれが表示されてしまうとやっかいです。やはり300px広告が表示されてくれなければ困ります。
そこで、レスポンシブ広告を使うわけですが、そのままでは表示して欲しいサイズが表示されないのでレスポンシブ広告のコードをカスタマイズしてあげる必要があります。
レスポンシブ広告のコードを Google 推奨の方法で変更したら、しっかりPC表示とモバイル表示で指定したサイズに可変するようになってくれました。
今回は「アドセンスのレスポンシブ広告をPCは336px、スマホ300px表示にカスタマイズする方法」を紹介します。
レスポンシブ広告のカスタマイズ方法
横幅340pxまでは 300px ✕ 250px のレクタングル広告の表示。それ以上は 336px ✕ 280px レクタングル広告を表示される場合のコードカスタマイズ。
1 2 3 4 5 6 7 8 9 10 11 12 13 | <style> .adslot_1 { width: 300px; height: 250px; } @media(min-width: 340px) { .adslot_1 { width: 336px; height: 280px; } } </style> <script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script> <!-- レス（下） --> <ins class="adsbygoogle adslot_1" style="display:inline-block;" data-ad-client="ca-pub-12345" data-ad-slot="67890"></ins> <script> (adsbygoogle = window.adsbygoogle || []).push({}); </script> |
こちらのコードを広告を表示したい場所へ貼り付ければOKです。ただし、以下の部分を変更しないと動きませんから、必ず変更してからブログやサイトへ導入してください。
data-ad-client=”ca-pub-12345″ の数字の部分は、あなたのアドセンス運営者IDを入力してください。data-ad-slot=”67890″ の数字の部分は、利用するレスポンシブ広告の広告スロットIDを入力してください。
どうか忘れずに。
一応、どのような命令でサイズ変更を行っているのかだけ解説しておきます。
1 2 3 4 | <style> .adslot_1 { width: 300px; height: 250px; } @media(min-width: 340px) { .adslot_1 { width: 336px; height: 280px; } } </style> |
このCSSで命令を出しています。
.adslot_1 { width: 300px; height: 250px; }
「いつもは .adslot_1 の class が付いた広告は 300 ✕ 250 のレクタングル広告を表示してね」という命令をだしています。
@media(min-width: 340px) { .adslot_1 { width: 336px; height: 280px; } }
だけど「画面の横幅が 340px 以上になっちゃったら .adslot_1 のclass が付いた広告は 336 ✕ 280 のレクタングル広告を自動的に表示させてね」という命令を追加しています。
したがって、今回紹介しているカスタマイズコードでは具合が悪い方は、数値を自分のブログやサイトの環境にあわせたものへ変更してあげればOKです。
まとめ
このコードカスタマイズを挿入すれば、表示サイズごと臨機応変に広告サイズを切り替えてくれるようになります。そんなに難しい作業ではないですよねっ！！
Google AdSense サポートさんは、336 ✕ 280 レクタングル広告は 300 ✕ 250 レクタングル広告よりも CTR（クリック率）とRPM（インプレッション収益）が高まりやすいとおっしゃているので、気になる方はぜひ導入されてみてはいかがでしょうか？
