
photo by Simon Cunningham
miyamoです。
SimplicityはGoogle Adsenseの広告設定が簡単にできるようになっています。
PC向けに推奨されているのは、レクタングル(大)336×280です。ダブルレクタングルもはじめから設定されています。
スマホ向けの推奨は、レクタングル(中)300×250の広告です。僕も、推奨にしたがって、スマホ向けの広告は300×250で設定をしていました。
なぜスマホ向けの広告として300×250が推奨されているのかを考えると、たぶんiPhoneのブラウザの解像度が横320px(ピクセル)だからじゃないかと思います。
あるきっかけでブラウザの解像度を調べることがあり、スマホによって横の解像度が違うことがわかりました。
ということは、推奨のとおりに300×250のまま設定していると、スマホの機種によってはもったいないことになっているのです。
それはなぜでしょうか?答えはこの続きで。
それでは、いってみよー。
目次
スマホのブラウザの解像度を見てみる
スマホの解像度の区分として、iPhone 5Sまで、iPhone 6、iPhone 6 Plus、Android系と大きく分けることができます。
Simplicityのスマホ向けデザインには
<meta name=”viewport” content=”width=device-width,initial-scale=1.0″>
と、width=device-widthが設定されていますので、ブラウザの横幅の解像度は次のようになります。
種類 | 横幅 |
iPhone 5Sまで | 320px |
iPhone 6 | 375px |
iPhone 6 Plus | 414px |
Android系 | 360px |
ということは、iPhone 5SまでのiPhone以外は、レクタングル(大)336×280が使えることになります。
最近のスマホに最適化するならレスポンシブがおすすめ
ここまでの話で、レクタングル(大)を設定するのは、ちょっと待って下さい。設定してしまうと、iPhone 5SまでのiPhoneで横幅が足りず、広告が切れてしまうことになります。
僕のおすすめは、レスポンシブ広告にすることです。
レスポンシブ広告にしておくと、ブラウザの解像度にあわせて、最適な広告が表示されるようになります。
Adsenseの広告設定で、広告のサイズをレスポンシブとして作成してください。
おまけ:Simplicityでスマホ向け広告ユニットを2つ使う方法
Simplicityはウィジェットに広告を設定します。スマホ向け広告には、「広告 300×250」のウィジェットが1つ用意されています。
前回の記事で、PC向けの広告ユニットを使い分ける方法をお伝えしました。

今回は、スマホ向けに広告ユニットを使い分ける方法です。簡単に説明しますので、詳しくはこちらの記事を参照してください。
レイアウトの関係で、使える広告ユニットは2つまでです。
function.phpへのコード追加
function.phpに以下のコードを追加します。
register_sidebars(1, array( 'name'=>'広告 300x250-2', 'id' => 'adsense-300-2', 'description' => '300×250pxの広告を入力してください。', 'before_widget' => '', 'after_widget' => '', 'before_title' => '<div class="widget-ad">', 'after_title' => '</div>', ));
これで、「広告 300×250-2」というウィジェットができあがります。このウィジェットに広告ユニットのコードを設定してください。
続いて、追加したウィジェットを使うようにします。前回と同じようにad-article-footer.phpを修正します。
<?php else: //レスポンシブじゃない時?> <?php if (is_mobile()): //スマートフォンの場合?> <?php if ( is_active_sidebar( 'adsense-300' ) ) : ?> <div class="ad-article-bottom ad-space"> <div class="ad-label"><?php echo get_ads_label() ?></div> <div class="ad-mobile adsense-300"><?php dynamic_sidebar('adsense-300');?></div> </div> <?php endif; ?>
ad-article-footer.phpから、この部分を探してください。抜粋した上のコードの6行目を修正します。
変更前
<?php dynamic_sidebar(‘adsense-300’);?>
変更後
<?php dynamic_sidebar(‘adsense-300-2‘);?>
このように修正することで、追加したウィジェットが使われるようになります。
修正後の広告につわかれるウィジェット
スマホで使われる広告ウィジェットはこのようになります。
- 1つ目のh2タグ前:広告 300×250
- 本文下:広告 300×250-2
- 関連記事下:広告 300×250
PCは3つ全てに別々の広告ユニットを使えましたが、スマホでは2つまでとなります。h2タグ前と関連記事下が同じとなってしまいます。
これらを分けようと思うと、他のphpファイルを修正しなければならないので、今回の修正までとしました。
まとめ
iPhone 6などの横幅が大きいスマホでは、より大きな広告が表示されるようになります。これで収益が増えるか・・・はわかりません。だって、まだほとんどクリックないのでA/Bテストできないんです(泣)
おしまい。miyamoでした。
コメント
「Simplicityでスマホ向け広告ユニットを2つ使う方法」は大変参考になりました。
スマホ向け広告ユニットを3つに出来れば完璧なんですが、やはり難しいんですね。
と言うのも私はnendの広告を利用していて、nendはアドセンスみたいに「1つのコードで複数表示」ということができないのです。
どちらにしても、参考になりました。ありがとうございます。
M.Kさんコメントありがとうございます。
お役にたてたみたいでよかったです。
スマホ向けは、1つ目と3つ目の広告に同じPHPのコードが使われているので、大きく修正しないといけないので、今回はあきらめました。