モバイル用のアドセンスは「レスポンシブ」サイズで良いんじゃないか？

Googleのモバイルフレンドリーテストを見事合格し、キセノンテンターもモバイル対応しているサイトへとなっているわけです。そんな時ふと自分の「iPhone 6 Plus」を使ってブログを見てみたら、「あれ？Adsense結構小さいな」と言う感想が出ました。

実は、iPhone 4sからの癖で、Adsense（アドセンス）サイズを300pxで設定していたわけです。ところが、世の中のスマートフォンで見るブラウザは異なるピクセル数を津か手織り、でかい表示になればなるほど、それらが小さくなるわけです。

ブログ読者からしたらどうでもよい話なのですが、ブログ運営者からすればアドセンスの設置はかなり重要な事柄です。そこで「モバイルサイトのAdsenseサイズは、レスポンシブを使えばいいよ」ということを言いたいです。それはいったいどういうことか？

モバイルでは「レスポンシブ」サイズ

レスポンシブって？

いったいいつからこのサイズが追加されたかわかりませんが、広告の設定にある『広告サイズ』で「レスポンシブ」が選択可能でした。普段僕が使うとしたら336×280の「レクタングル（大）」とか300×250の「レクタングル」です。モバイル表示では後者を利用していたわけです。

• 利用可能なスペースに合わせてサイズを自動調整。
• 画面の向きに合わせて広告のサイズを変更できる。

このような説明も有りますので、「画面の向き」が変わることを考えている人にも最適！

「何事も柔軟に行かねば」と言うことで、モバイル用ブログ広告に「レスポンシブ」サイズを導入してみました。

結果このような表示

ご覧のように「レクタングル」と「レスポンシブ」の大きさ比較をしてみました。この画面はiPhone 6 Plus(414×736)のキャプチャーです。「レスポンシブ」を導入すると、『画面に収まる一番「推薦」に近いサイズ』を自動的に選択してくれて設置されます。

つまり、この画面では、「レクタングル（大）」が自動的に挿入されていることになります。そしてiPhone 4s（320×480)やiPhone 5(320×568)だと「レクタングル」に自動で切り替わります。

• レクタングル …300×250
• レクタングル（大）336×280
• iPhone 4/4s …320×480
• iPhone 5/5s …320×568
• iPhone 6　…　375×667
• iPhone 6 Plus …414×736

まとめるとこれらの解像度に「レスポンシブ」が自動的に選択してくれるわけです。

残念ながら、僕はiPadやiPad miniと言った効果な端末を持っていないので試していませんが、「レスポンシブ」を使えば、自動的に切り替えてくれるはずです。（その場合、overflowの設定が必要と思います）

ちょっとしたポイント

もし「レスポンシブ」にして旨いこと表示されない人は、おそらく親コンテンツを作っていないと思います。表示されたアドセンスのコードを<div>~</div>でかこってあげて、そのスタイルでwidhtを100%なんかにしてあげればOKです。

つまりは、

<div class="resAdsense" style="width:100%;overflow:auto;">
/* ここにアドセンスのコード
</div>

とかやってあげればいいんじゃないカナーと。

つまりは「レスポンシブ」でいい

これらを試した結果、モバイル用のテンプレートはアドセンスの設定を全て「レスポンシブ」に変更しました。これで、自動的にブログ広告のサイズが切り替わってくれます。

１つ問題があるとすれば「レクタングル」はそれぞれ「高さ」ガチがちがうので「この比率じゃなきゃだめだ」戸こだわっている人にとっては、あまりよろしくないでしょう。僕は全くこだわってないのでこの方法を利用させていただきます。

この記事に関連する記事一覧

キセノンテンターの最新情報をゲット

• Feedlyで最新記事を購読
• @xenontenterさんをフォロー Twitterで更新情報を1番にゲット！
• LINEで楽しくトークしましょう！（スマホでLINEを起動 > その他 > 友だち追加 > QRコード）