ガジェニュー

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

  関連記事

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

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

sum1
カエレバのCSSカスタマイズ

今回はカエレバのカスタマイズを行いました。カエレバといえば、商品のアフィリエイト …

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

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

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

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

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

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

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

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

sum_012415_124615_AM (1)
【WordPress】ロリポップサーバーからエックスサーバーにお引っ越ししました。

今回は、ロリポップ!のコロリポプラン(月額250円)のプランから、エックスサーバ …

sum-wpp
【STINGER5カスタマイズ】WordPress Popular Postの表示をSTINGER5と同じにする

「STINGER5」への移行にともなって、使用していたプラグインでもポロポロと修 …

sum
【STINGER5カスタマイズ】メディアサイズが変更できない問題

こちらのブログですが、【STINGER5カスタマイズ】AdSenseセンスの表示 …

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

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

Loading Facebook Comments ...

Message

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