ブログの広告をパソコン・スマホなどに分けて表示する方法

スマホなどでブログを表示する際、広告が大きすぎたりすると見切れてしまうことが多いです。
しかしパソコンでもブログを表示したときに広告を小さくしたくない。
そんなときにパソコンとスマホ、ブログを表示する媒体ごとに表示する広告を変える方法を紹介します。

スポンサードリンク

ブログを見る際の媒体で広告の表示形式を変える訳

パソコンやスマホごとに広告の表示の仕方を変えるのは、ページの見映えを良くするのが一番の理由でしょう。

アドセンス広告は大きいサイズの広告ほど報酬額を高く設定さしているASPもあります。
こうした理由のため大きいサイズの広告を優先的にブログに貼りつけておきたいですよね?

しかしサイズが大きい広告の場合、パソコンで見たときに違和感は無くてもスマホなどの狭い画面で見た場合、広告が見切れてしまい見映えが悪くなってしまいます。

広告が見切れてしまうと広告の全体図がひと目でわからないため、クリック率も下がる傾向にあるようです。
(実際「何だこれ?」みたいに思う人もいると思います)

そうしたことを改善するためにも、パソコン・スマホなどのブログを表示する媒体ごとに広告のサイズを画面に合わせたりする必要性が出てきます。

広告のコードを弄ってサイズを変えるのはNG

まずは前もって知っておきたいのが広告のコードを弄ってサイズを変えるのは原則禁止です。

例えば300×250のサイズの広告を、コードを弄って320×100のように勝手にサイズを変更して貼ることはできません。
これをやると規約違反になり即提携解除なんて場合もあります。

ただGoogle Adsenceでは限られた条件下のみサイズ変更が許されてます。
それでもGoogleの定めた規約に従わないといけないので、多くのASPでは規約上は基本的に「広告コードの改変は禁止」と覚えておきましょう。

広告の表示を媒体ごとに変える方法

まずはコードなどの説明は抜きにして、どうやって媒体ごとに広告を使い分けるか説明します。

複数のサイズの広告を使う

まずはサイズの違う広告を複数発行して、媒体ごとに使い分ける方法です。
特に横長の広告の場合に使うことになります。

パソコン・スマホなどの画面サイズが違う媒体に合わせて、それぞれの画面サイズに合った広告を使い分けます。
パソコンなら横幅728pxなどの大きいサイズの広告を。
スマホなら横幅300pxくらいの小さいサイズの広告を使っていきます。

最低でも「パソコン用の広告」と「スマホ用の広告」の2種類は発行しておきましょう。

ダブルレクタングルの片方の広告を消す

ダブルレクタングルで広告を2つ横並びで表示している場合、スマホで表示する際に片方の広告を消す方法です。

ダブルレクタングルで広告を表示している場合、スマホ画面で見ると広告が縦に2つ並んだ状態になります。
これだと「広告ばかり貼りつけている」と思われ、読者的に見映えが悪いです。

ダブルレクタングルでは大抵300pxくらいの横幅の広告を使っているので、片方の広告を消せば解決します。

広告の表示形式を変える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を使って、画面の幅の長さによって表示する広告を変える方法です。
@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の内訳はこうなります。

横幅1000px以上の場合・・・ads-ipadとads-iphoneのクラスを使った広告を非表示。
横幅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で記述するサイズですが、世の中に出回っている端末の画面の幅のサイズは以下のサイズくらいになります。

パソコン・・・1000px以上
iPad・・・800px前後
iPhone・・・400px前後以下

@mediaでサイズを指定する場合、「これ以上orこれ以下は無いだろう」くらいに余分に幅を取って設定しています。
(スマホなら500px以下なら大丈夫だろ、みたいな)

WordPressを使っている人なら「外観」→「カスタマイズ」の画面で、Google Chromeといったブラウザなら「画面右クリック」→「検証」で画面サイズを変えれます。
自分で一度各端末の画面サイズを確認しながら作業してみましょう。

スポンサードリンク

まとめ

以上で各端末ごとに表示する広告を変える方法の紹介を終わります。

少々融通は利きませんが、はっきりと「スマホ」と「スマホ以外」で分けたいなら「is_mobile」。
はっきりと端末ごとの判断はできませんが、「パソコン」「iPad」「スマホ」で分けたいなら「@media」を使った方法になると思います。

自分のブログの様式と相談して、好きな方法で広告を表示しましょう!