ガジェニュー

~iPhone・Android,格安スマホ,ネットフリックスとか~

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

  関連記事

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

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

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

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

screenshot (1)
「Google+」と「WordPress」を活用して2時間でサーバの容量を圧迫しないフリー写真素材サイトを作ったよ!

2年ほど前にミラーレス一眼を買って色々写真を楽しんだりしていた私なのですが、実は …

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

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

images_111114_064856_PM
カエレバをアイコンフォントを使ってカスタマイズ(SVGファイルもあるよ)

以前、カエレバのCSSカスタマイズで、カスタマイズしたカエレバの表示ですがスマホ …

wpop
WordPress「Popular Posts」で画像が表示されなくなった原因・と修正方法

こちらのブログなのですがWordPressを使用して運用しています。今回は上の画 …

images 2
App Store Insertでアイコン画像が表示されない問題を解決!【ブログカスタマイズ】

当サイトでもかなりお世話になっている「App Store Insert」ですが、 …

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

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

ana-sum
【アクセス数報告】2014年9月のPVと収益を公開します

今回は初めて、「ガジェニュー」のPVを公開してみようと思います。実際にこうやって …

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

早いもので2015年も2月に突入ということで、1年の12分の1がすでに消費されて …

Loading Facebook Comments ...

Message

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