犬も歩けば猫も歩く

中年サラリーマンの生活と副業について書いています。

スポンサーリンク

PCとスマホで広告サイズを切り替える方法

パソコンとスマートフォン

前回、レスポンシブWEBデザインテンプレートを使って、PCサイトからモバイルフレンドリーサイトにする方法をご紹介しましたが、今日は「PCとスマホで広告サイズを切り替える方法」をご紹介したいと思います。

 

アドセンスをお使いなら、「レスポンシブ」広告ユニットを使うだけで、PCやスマホ、 タブレットなど、デバイスによって最適なサイズの広告が選択されるのでとても便利なのですが、エーハチネットやバリューコマースなどのアフィリエイトサービスには、現在のところ「レスポンシブ」広告がありません。

 

468×60サイズの広告など貼ったりすると、スマホで見ると横に大きくはみ出してしまいとても格好が悪い・・・。妥協して300×250サイズの広告を一つ貼るという手もありますが、“帯に短したすきに長し”といった感じは否めません。

 

なので、CSSを使ってPCとスマホでの広告表示切替をする必要があります。

480px以下のデバイスをスマートフォンと判断して、スマホ用の小さいバナー広告を表示させ、481px以上であればPCと判断して、PC用の大きいバナー広告を表示させたいと思います。

さっそくやってみましょう!

Template Partyさんのテンプレートは、CSSフォルダの中にスタイルシートが3つ入っているので、styleとstyle-sの2つにそれぞれ下記のように書き込みます。

【CSS】
styleに書き込む

@media screen and (min-width: 480px){

.no_pc {
display: none !important;
}

style-sに書き込む

@media only screen and (max-width:481px){

.no_sp {
display: none !important;
}

 

一方で、広告を表示させたい場所には、スマホ用とPC用両方のバナータグを書いてください。

【HTML】
<div class="no_pc">スマホで表示させたいバナータグ</div>
<div class="no_sp">PCで表示させたいバナータグ</div>


すると、HTMLファイルのプレビューはこんな感じで、スマホ用広告とPC用広告の2つ見えていると思います。

HTMLファイルのプレビュー

その状態で、保存してサーバーにアップロードをしてください。

 

スマートフォンで該当ページを見ると、下記のようにスマホ用広告だけが表示されていると思います。

スマホ用広告

 

また、パソコンで該当ページを見ると、今度はPC用広告だけが表示されていると思います。

PC用広告

どうでしょう!意外と簡単だったと思いませんか。

お役に立てましたでしょうか?

お疲れ様でした!