久々のSTINGER5のカスタマイズ記事です。まぁ、厳密に言うとGoogle AdSenseのカスタマイズですけど(^_^;)
あらかたやりたいことは全部やってしまいちょこちょこと更新はしていたのですが、まとめるほどの作業をしていませんでした。
でも、今回はiPhone5/5s以上の解像度の場合にスマホは300*250の広告でなく336*280のサイズの広告が表示されるようにしてみました。
きっかけは、Googleさんからのお知らせで今使っている「300*250」のサイズじゃなくて「336*280」のサイズに変更すると単価がアップするかもしれないよ！とお知らせを貰ったからです。基本的にAdSenseのレスポンシブに関しては広告を新規に作成してコードを少しいじるだけだったので「エイヤッ！」とやってしまいました。
AdSenseのレスポンシブ広告をカスタマイズする。
今回カスタマイズするにあたって、後から思いついたんですが、iPhone6とiPhone6 Plusへの対応をそういえばしてなかったからやんなきゃなぁというのが一番の決め手になったわけです。
電車で当たりを見回せばiPhone6・6Plus…スタバで周りを見渡せばiPhone6・6Plus…そう。世の中はiPhoneで溢れています。
ちなみに、自分の周りもiPhoneだらけ。日本人は本当にiPhoneが好きなんだなぁ。
おっと、脱線した。閑話休題。
ちなみに、iPhone6とiPhone6 Plusの表示はこんな感じらしいです。
| 端末解像度 | 表示解像度 | |
|---|---|---|
| iPhone6 | 750*1134 | 375*667 |
| iPhone6 Plus | 1920*1080 | 414*736 |
表示に関しては、iPhone5から継続して実際の解像度の半分になっているようですね。（iPhone6 Plusは違うけどまぁ気にするな少年）
ふむ。広告サイズを1つあげられるね。ということで今回はこれを確認後に作業しました。
レスポンシブ広告をカスタマイズのやり方
レスポンシブの広告を新規作成して、コードの取得でアドバンスコードを取得します。
デフォルトではこんな感じです。
<style>
.my_adslot { width: 300px; height: 100px; }
@media(min-width: 500px) { .my_adslot { width: 468px; height: 90px; } }
@media(min-width: 800px) { .my_adslot { width: 728px; height: 90px; } }
</style>
<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<!--広告の名前 -->
<ins class="adsbygoogle my_adslot"
style="display:inline-block"
data-ad-client="クライアントコード"
data-ad-slot="広告コード"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>こちらを下記のようにカスタマイズしました。
<style>
.my_adslot { width: 300px; height: 250px; }
@media(min-width: 356px) { .my_adslot { width: 336px; height: 280px; } }
@media(min-width: 800px) { .my_adslot { width: 336px; height: 280px; } }
</style>
<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<!--広告の名前 -->
<ins class="adsbygoogle my_adslot"
style="display:inline-block"
data-ad-client="クライアントコード"
data-ad-slot="広告コード"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>これで、OKです。336*280の広告+左右の余白10pxなので336+20で356px以上の時に336*280の広告が出るようになっています。
モバイル版はこんな感じのコードでiPhone6も範囲に入るのでOKです。
いじったのは上の方の数字の部分なんですがちょっと詳細を説明すると
.my_adslot { width: 300px; height: 250px; }基本的はこのサイズの広告を表示するという意味
@media(min-width: 356px) { .my_adslot { width: 336px; height: 280px; } }800~356pxのときに336*280のサイズの広告を表示するという意味
@media(min-width: 800px) { .my_adslot { width: 336px; height: 280px; } }800px以上ならに336*280のサイズの広告を表示するという意味
最後の2つはかぶっていますが、モバイル版だけだったのでこのサイズとしています。PCの表示もレスポンシブで制御したいなら変更が必要です。
あとは対象のところに貼るだけ。
まとめ
今回は少し細かく調整をしてみましたが、これがどのくらい広告単価に影響をあたえるか楽しみな所。（きっとあんまし変わんないんだろうけど。）
最近はデバイスが多様化しているので、メディアクエリを使って細かく調整をしていく必要があるみたいですね。
ちなみに、自分のように詳しくなくてもコピペして数字を変更するだけなので是非試してみてくださいね。
今回はこれで終わり。
てな感じで。
関連記事
・記事中にプラグイン無しでAdSenseとソーシャルボタンを設置する方法
・AdSenseセンスの表示を色々カスタマイズした備忘録
・iPhoneでAdSenseの表示がはみ出す問題の解決方法
☆おまけ☆
この本を読んだんですが、初心者向けでなかなか勉強になりました。流石、ブログだけで食べているだけある。。と関心しました。
