ガジェニュー

~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 , , ,

  関連記事

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

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

chatlike-css-tb
レスポンシブ+スマホ最適化のチャット風の会話を導入したよ。【WordPressカスタマイズ】

今回はCSSを利用してチャット風の会話レイアウトを導入したので備忘録として書いて …

images_110914_024007_AM
【STINGER5カスタマイズ】サイドバーの見出しタイトルの前にアイコンフォントを設置

なんとなく、STINGER5のデフォルトのサイドバーの見出しの部分が目立たない気 …

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

あっと言う間に6月が通過していきました!もはや2015年の半分を超えているという …

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

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

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

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

sum
Gush2カスタマイズ~背景色がPCだけ反映されない~

いつもはstingerを使用しているのですが、運営しているサイトが全部「STIN …

sum
【アクセス数報告】2014年10月のPVとアフィリエイトの収益を公開します

10月の末から、昨日まで曾祖母のお葬式や、遺品整理やらでバタバタしていて本日から …

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

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

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

2月は28日間ということで他の月より2~3日短いということでさくっと終わってしま …

Loading Facebook Comments ...

Message

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