ガジェニュー

~iPhone・格安スマホとか~

【STINGER5カスタマイズ】AdSenseをiPhone6/6s Plus対応のレスポンシブにカスタマイズ。

      2016/01/21    後で読む

Lisa88_sumahoganmi20141018093542500
久々のSTINGER5のカスタマイズ記事です。まぁ、厳密に言うとGoogle AdSenseのカスタマイズですけど(^_^;)

あらかたやりたいことは全部やってしまいちょこちょこと更新はしていたのですが、まとめるほどの作業をしていませんでした。

でも、今回はiPhone5/5s以上の解像度の場合にスマホは300*250の広告でなく336*280のサイズの広告が表示されるようにしてみました。

きっかけは、Googleさんからのお知らせで今使っている「300*250」のサイズじゃなくて「336*280」のサイズに変更すると単価がアップするかもしれないよ!とお知らせを貰ったからです。基本的にAdSenseのレスポンシブに関しては広告を新規に作成してコードを少しいじるだけだったので「エイヤッ!」とやってしまいました。

SPONSORED LINKS

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の表示がはみ出す問題の解決方法

☆おまけ☆
この本を読んだんですが、初心者向けでなかなか勉強になりました。流石、ブログだけで食べているだけある。。と関心しました。

 - STINGER5, WordPress , , ,

  関連記事

sum1014
【STINGER5カスタマイズ】サイドバーにプロフィール設置

今回はSTINGER5のカスタマイズのお話です。サイドバーにプロフィールを追加し …

blogcard-custamize-tb
サイト内リンクをブログカード風にカスタマイズ!【WordPressカスタマイズ】

2回連続でWordPressのカスタマイズのお話です。 今回はサイト内リンクを画 …

sHIRO93_machinokurasi500
エックスサーバーにしたら、サーバーの応答速度が大体9分の1ぐらいになった件

ロリポップサーバーからエックスサーバーにお引っ越ししました。でも書きましたが20 …

simages_121514_015526_PM
【stinger5カスタマイズ】記事中にプラグイン無しでAdSenseとソーシャルボタンを設置する方法

今まで、「Quick AdSense」というプラグインを使用して文中に置いた「m …

simages_121114_030748_PM
【STINGER5カスタマイズ】日付・更新日の横にPoketの後で読むボタンを追加

今回も、STINGER5のカスタマイズ記事です。 普段スマホでネットサーフィンを …

simages_122214_110736_PM
【WordPressカスタマイズ】「Crayon Syntax Highlighter」が重かったのでサイト高速化のため「highlight.js」を入れてみた

最近はWordPressでやっているこのブログがかなり重かったので高速化を目指し …

images_112014_115155_AM
【STINGER5カスタマイズ】このブログにしたカスタマイズまとめ

STINGER3からSTINGER5に乗り換えたのが、2014年10月1日。もと …

images_111514_124303_AM
【STINGER5カスタマイズ】ヘッダー周りのカスタマイズ

今回は、STINGER5のヘッダーのカスタマイズをしたので、備忘録がてら書きます …

icon_1r_192
【アクセス数報告】2015年5月のPVとアフィリエイトの収益とか

5月の印象はとしてはとにかく暑い!暑い!やってられません。 という印象でした。 …

access201503
【アクセス数報告】2015年3月のPVとアフィリエイトの収益とか

3月も終わり今日から4月に突入。新年度ということで色々とイベントがある方いるかも …

Loading Facebook Comments ...

Message

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です