ブロガーはiphone6に備えてadsence配置を最適化したほうが良いかも

全然対した話じゃないんだけど、今日なんとなーく気分で渋谷のapple storeにいってきたんですね。

そこで噂のiphone6＋とやらを触ってきました。

感想こんな感じ。

iPhone6プラスをApple Storeで触ってみたけど、もはやちょっとしたiPadだなこれ

— 中川龍@タロット占い師、占いで独立開業する通信講座 (@dshocker) 2014年10月1日

でかい。とにかくでかい。

— 中川龍@タロット占い師、占いで独立開業する通信講座 (@dshocker) 2014年10月1日

こんなな……？片手で操作することもできないような巨大なiPhoneなんてな……？

……めっちゃ欲しいわ！！！！！！←

— 中川龍@タロット占い師、占いで独立開業する通信講座 (@dshocker) 2014年10月1日

うん、めっちゃ欲しくなった！

デカスマフォは巷じゃ賛否両論みたいですが、個人的にはスマフォは「電話機」じゃなくて「web閲覧端末」だと思ってる人なので、これくらいのサイズが一番しっくりきましたね。

はい。

そんで、そのウキウキ気分のままiphone6＋で自分のサイトを見てみたんですけど……

当たり前のことなんだけど、画面サイズが大きくなってるので、横幅も広くなってるんですね。

そのせいで、ヘッダーに入れてある320x100のadsence広告が「左に寄ってる」状態になってました。

（利用規約の関係でadsenceがうつってるところは写真とってません）

これまでのiphoneだったら、横幅320のバナー貼っておけばピッタリサイズだったんですけど、これからiphone6やiphone6＋みたいな大型端末が主流になっていくなら、これも徐々に見直していかないといけないんだろうなーと思いました。

ただ、じゃあどのサイズにすればいいのかと言われると……

iphone6は横幅375px

iphone6＋は横幅414px

らしいので、これに合うサイズがあるかadsence管理ページで探してみたんですが……

無い！笑

468x60だとちょっとはみ出るし……

ああ、そうだ。センタリングすればいいんだ。

というわけでどうしたらいいか考えてみたんだけど、新型iphoneにピッタリなバナーサイズは今のところ無さそうなので、そしたら320x50や320x100をそのまま使って、そのうえでセンタリングするしか無さそうです。

adsenceのコードをdivで囲って、そこにクラスを指定して、あとはそのクラスにcssで

margin:0 auto;

みたいなのを貼付けましょう。

うん、これしかない。

てか今ここまで書いて気付いたけど、僕は自分がiphoneユーザーだったからあんまり気になってなかっただけで、これまでもandroidの大画面スマフォを使ってるユーザーには、うちのサイトの広告は左に寄ってるように見えてたんだろうなぁー。

HTMLの最適化は大変でござる。