アドセンス広告をパソコン・スマホで分けて表示する方法。画面サイズで広告を非表示に
スマホなどでブログを表示する際、広告が大きすぎたりすると見切れてしまうことが多いです。
しかしスマホなどのモバイルに合わせてしまうと、パソコンでは広告が少なくなったりスペースが余ってしまいます。
そんなときにパソコンとスマホで、表示する媒体ごとに表示する広告を変える方法を紹介します。
媒体ごとに広告の表示形式を変える理由
ページの見映え
パソコンやスマホごとに広告の表示の仕方を変えるのは、ページの見映えを良くするのが一番の理由でしょう。
アドセンス広告は大きいサイズの広告ほど報酬額を高く設定さしているASPもあります。
こうした理由のため大きいサイズの広告を優先的にブログに貼っておくのがベストになります。
しかしサイズが大きい広告の場合、パソコンで見たときに違和感は無くても、スマホなどの狭い画面では広告が見切れてしまい見映えが悪くなってしまいます。
広告が見切れてしまうと全体図がひと目でわからないため、クリック率も下がる傾向にあるようです。
実際「何だこれ？」みたいに思う人もいると思います。
ペナルティ回避
広告が画面から見切れたまま放置するとブログの順位などが下がる場合があります。
見映えが悪くなると「モバイル表示に適していない」とGoogleなどが判断してページ順位に影響が出ます。
アドセンス広告の収入はPV数に大きく依存するため、順位が下がってPV数が少なくなるのは死活問題です。
広告でペナルティを受けてしまうのは本末転倒なので早めに改善することが推奨されます。
広告のコードを弄ってサイズを変えるのはNG
まずは前もって知っておきたいのが広告のコードを弄ってサイズを変えるのは原則禁止です。
例えば300×250の固定サイズの広告のコードを弄って320×100のように勝手にサイズを変更して貼ることはできません。
これをやると規約違反になり即提携解除なんて場合もあります。
ただGoogle AdSenseでは限られた条件下のみサイズ変更が許されてます。
画面サイズに合わせてサイズが最適化されるレスポンシブ広告がこれに当たります。
それでもGoogleの定めた規約に従わないといけないので、多くのASPでは規約上は基本的に「広告コードの改変は禁止」と覚えておきましょう。
広告の表示を媒体ごとに変える方法
まずはコードなどの説明は抜きにして、どうやって媒体ごとに広告を使い分けるか説明します。
レスポンシブ広告を使う
Google AdSenseで発行できるレスポンシブ広告なら画面サイズに合わせて広告サイズが最適化されます。
例えばパソコンなら728pxといった横長の広告に。
スマホなどの小さい画面サイズなら320pxといった小さなサイズになります。
発行された広告コードを貼り付けるだけなので、最も手間なく画像サイズを合わせる方法になります。
おまけにレスポンシブ広告は広告サイズを自分で変えることができます。
Google AdSenseのサイトに方法が書いてあるため、その記述に沿った方法ならどんなサイズの広告にも変えることができます。
ただこの方法だと自動で画面サイズに合わせる機能が無くなってしまうので、それに合わせたCSSを使う必要があります。
これもサイトに書いてあるのでよく見て記述してみましょう。
自動広告を使う
またGoogle AdSenseで発行されている広告ですが「自動広告」という特殊なアドセンス広告があります。
この自動広告はサイトの「header.php」にコードを記述するだけでブログ全体に広告が貼られるようになります。
この広告もレスポンシブ広告同様に画面サイズに合わせて最適化されます。
また自動でページの各所に広告が貼られるため他のアドセンス広告を貼る必要も無くなります。
Google側が広告を自動で複数貼ってくれるため、広告によるペナルティの心配もありません。
ただ注意したいのが段落の途中やサイドバーなどにも貼られてしまうこともあるため、場合によっては見映えが悪くなってしまいます。
設定画面で「この場所の広告は非表示にする」といったことができるため、見栄えが悪いようなら適時確認・調整するようにしましょう。
ダブルレクタングルの片方の広告を消す
ダブルレクタングルで広告を2つ横並びで表示している場合、スマホで表示する際に片方の広告を消す方法です。
ダブルレクタングルで広告を表示している場合、スマホ画面で見ると広告が縦に2つ並んだ状態になります。
これだと「広告ばかり貼りつけている」と思われ、読者的に見映えが悪いです。
ダブルレクタングルでは大抵300pxくらいの横幅の広告を使っているので、片方の広告を消せば解決します。
複数のサイズの広告を使う
まずはサイズの違う広告を複数発行して、媒体ごとに使い分ける方法です。
特に横長の広告の場合に使うことになります。
パソコン・スマホなどの画面サイズが違う媒体に合わせて、それぞれの画面サイズに合った広告を使い分けます。
パソコンなら横幅728pxなどの大きいサイズの広告を。
スマホなら横幅300pxくらいの小さいサイズの広告を使っていきます。
最低でも「パソコン用の広告」と「スマホ用の広告」の2種類は発行しておくことになります。
広告の表示形式を変えるhtml・CSSコード
では実際に広告の表示形式を変えるためのコードの紹介に入ります。
いくつか方法があるため使う広告の種類によって使い分けましょう。
方法1：「is_mobile()」を使う
is_mobile()関数は使われている媒体が「スマホ」か「スマホ以外」かで識別してくれる関数です。
この方法ならサイズの違う広告を媒体ごとに別々に表示してくれるようになります。
記述するコードはこちらになります。
<?php if(is_mobile()): ?>
スマホに表示させる広告コード
<?php else: ?>
パソコンに表示させる広告コード
<?php endif; ?>このように書けばパソコンとスマホで表示する広告を変えてくれます。
このまま書いてもいいですが、記事本文などにいちいち書くと面倒なのでショートコードを使って広告を表示します。
後々広告を変えたくなったときに一括で変更できるので、できればショートコードで広告を表示するようにしましょう。
まずは「function.php」に以下のコードを記述します。
function Ads_Code(){
if(is_mobile()) {
return 'スマホの場合の広告コード';
} else {
return 'スマホ以外の場合の広告コード';
}
}
add_shortcode('ads_shortcode','Ads_Code');後は記事中などに以下のように記述してショートコードを呼び出して完了です。
/*記事中・ウィジェットに記述する場合*/
[ads_shortcode]
/*single.phpなどに記述する場合*/
<?php echo do_shortcode('[ads_shortcode]'); ?>ただこのis_mobile関数、iPadもモバイル端末なため「スマホ側」として対応されてしまいます。
そのため「iPadならこのサイズの広告」といったことができないので注意してください。
方法2：「@media」を使い画面サイズで対応する
CSSクラスで@mediaを使って、画面サイズによって表示する広告を変える方法です。
上記の「is_mobile()]だと自分で対応するサイズの調整ができないので、微調整するならこちらの方が適しています。
@mediaはダブルレクタングルの広告やGoogle Adsenceのレスポンシブ広告でよく使うので覚えておいて損は無いです。
ダブルレクタングルの場合
例えばダブルレクタングルで特定の画面サイズ以下のときに、右側の広告を消したい場合は以下のようなクラスを用意します。
@media(max-width:800px){
.ads-right{
display:none;
}
}これは「画面サイズの最大値が800pxまで」の場合、中に記述してあるクラスを使用するという記述です。
「max-width」は～以下、「min-width」は～以上といったときに使います。
ダブルレクタングルの右側の広告を<div class="ads-right">で囲っておけば、画面サイズが800px以下になった場合に「display:none;」、つまり片方の広告を表示しなくなります。
いってしまえばクラス側で条件分岐するようなものです。
この方法なら画面サイズに応じて細かい設定ができるので、パソコン・iPad・スマホといった画面サイズが違う端末ごとに広告の表示形式を変えられます。
PC・iPad・iPhoneで分けたい場合
パソコン・iPad・スマホで広告を使い分けたいならこのようなクラスを用意してください。
こちらもサイズ別で別々の広告を表示する方法になります。
/*パソコンのサイズ時：横幅1000以上*/
@media(min-width:1000px){
.ads-pc{}
.ads-ipad{
display:none;
}
.ads-iphone{
display:none;
}
}
/*iPadのサイズ時：横幅550px以上900px以下*/
@media(min-width:550px) and (max-width:900px){
.ads-pc{
display:none;
}
.ads-ipad{}
.ads-iphone{
display:none;
}
}
/*スマホのサイズ時：横幅500px以下*/
@media(max-width:500px){
.ads-pc{
display:none;
}
.ads-ipad{
display:none;
}
.ads-iphone{}
}@mediaでは同じクラス名を記述できるので、「この場合はこの内容のクラスを使う」といった風にできます。
各@mediaの内訳はこうなります。
横幅550px以上900px以下の場合…ads-pcとads-iphoneのクラスを使った広告を非表示
横幅500px以下の場合…ads-pcとads-ipadのクラスを使った広告を非表示
実際に広告コードを記述する場合こうなります。
<div class="ads-pc">パソコン用広告コード</div>
<div class="ads-ipad">iPad用広告コード</div>
<div class="ads-iphone">スマホ用広告コード</div>記事中に記述するのが面倒なら、ショートコードなどを使うのも手です。
各端末の画面サイズ
@mediaで記述するサイズですが、世の中に出回っている端末の画面の幅のサイズは以下のサイズくらいになります。
iPad…800px前後
iPhone…400px前後以下
@mediaでサイズを指定する場合、「これ以上orこれ以下は無いだろう」くらいに余分に幅を取って設定しています。（スマホなら500px以下で大丈夫だろ、みたいな）
スマホなどの画面サイズで確認したい場合は、WordPressを使っている人なら「外観」→「カスタマイズ」の画面で。
Google Chromeといったブラウザなら「画面右クリック」→「検証」で画面サイズを変えれます。
自分で一度各端末の画面サイズで確認しながら作業してみましょう。
まとめ
以上で各端末ごとに表示する広告を変える方法の紹介を終わります。
少々融通は利きませんが、はっきりと「スマホ」と「スマホ以外」で分けたいなら「is_mobile」。
端末ごとの判断はできませんが、「パソコン」「iPad」「スマホ」で分けたいなら「@media」を使った方法になると思います。
自分のブログの様式と相談して好きな方法で広告を表示しましょう。