【Stinger5】PCとスマートフォンで別々の広告を表示するカスタマイズ

PCとスマートフォンで表示する広告を変えるカスタマイズを紹介します。広告だけでなく、画像や記事などのコンテンツの表示に応用もできます。レスポンシブデザインになったStinger5と相性抜群です!(※Stinger5以前のテーマにも使えます)

PCとスマートフォンで広告を切り替えよう!

wordpressyellow

photo by TecheNet newsblog sobre

ブログを運営している方にとってAdsenseの配置は悩みの種です。なかなか良い配置が決まりせんよね・・・。

よく耳にするのがスマートフォンでのFirst View問題です。スマートフォンでサイト開いた時、最初の画面(First View)を覆うような(広告を追いやらないとコンテンツが見えない)広告の配置は禁止されており、ガイドライン違反となります。
※詳しくはadsenseのプログラムポリシーをご覧ください。

しかし、First viewはクリック率も高く広告を置くには絶好の場所です。

336×280や300×250といったサイズの広告はガイドライン違反になる可能性が高いので、First viewには使わない方が賢明です。でも、小さい320×100や320×50などのモバイルバナーではPC表示の時に小さすぎます。

そんな時に役立つカスタマイズを紹介します。

スポンサーリンク

条件分岐タグで表示を切り分けます。

今回は、Wordpressでの条件分岐タグであるwp_is_mobile()を使います。

<?php if ( wp_is_mobile() ) : ?>
  <!--モバイル用コンテンツ-->
<?php else: ?>
  <!--PC用コンテンツ-->
<?php endif; ?>

ダッシュボード→外観→テーマ編集(エディター)→単一記事の投稿(single.php)を開きます。

自分の配置したい場所に分岐タグをコピー&ペーストしてください。

ヘッダーの直下に広告を配置したい場合・・・①

ヘッダー下

本文の上部に配置したい場合・・・②
本文の後に配置したい場合・・・③

本文前後広告

カスタマイズ例を紹介

今回は試しに、本文の上部にPCは300×250の広告、スマートフォンは300×100の広告を配置してみます。

single.php

広告1

実際に表示される広告

スマホ表示したときにはこのようになります。

スマートフォン

スマートフォン広告

PC

PC広告

収益アップ&規約遵守のためにもぜひお役立てください

スポンサーリンク

シェアする

  • このエントリーをはてなブックマークに追加

フォローする

スポンサーリンク

コメント

  1. ゆうみ より:

    スマホのみ、本文の下にアドセンスを入れる方法を散々探しておりました。
    なかなかその方法が見つからず、途方にくれていたところこちらを発見。
    初心者の私にもわかりやすく、きちんとアドセンス表示が出来ました!!
    どうもありがとうございましたヽ(;▽;)ノ