switch-by-the-device_ecmg

マーケティング

忘れたくないユーザビリティー。収益化と両立しよう。TCDテーマでスマホとパソコンの広告表示を切り替える

スマートフォンで調べもの。プレゼントは何がいいかな?おっ、このサイトは参考になりそう!・・アレ?なんか、違うページに飛んじゃった・・・?


そのつもりじゃないのに」広告をタップしてしまう。「ついうっかり」じゃなくて、罠のような広告ゾーンの網に引っかかり、行きたくもないページに飛ばされる・・・そんな目にあった訪問者が、元のページに戻ってくるでしょうか・・・

私なら、戻りません。

switch-by-the-device_ins1

意図せずに広告だらけになることも・・

画面をタッチしながらスクロールする狭い画面。「広告ばっかりな瞬間」があると、ちょっと残念な気分になりますよね。Google AdSense、アフィリエイト広告。収益化も同時に考慮したい。でもそんな運営者目線ばかりでいると、ついマヒしてしまいがちです。

これは印象だけでなく、ユーザビリティーを損なうことになる。長い目でみると・・結果的に逆効果になりうる問題。大いにありうる大問題。敏感なあなたならもう気づいてるでしょう?

・・・でも意図せず、スマホ表示では「広告でイッパイ状態」になってしまってることもある。コレをなんとかしたいんですよね。例えば、PCで見たとき。 

switch-by-the-device_01

問題ないですね。記事下に並べる広告は収益効果が高いと言われています。コンテンツの邪魔もしない。いわゆる「ダブルレクタングル」というフォーメーションですね。響きもかっこいいです。強そう。「フラットツー」とかじゃなくてよかった。じゃあ、スマホ表示では? 

switch-by-the-device_02

同じ記事下部分です。スクロールしていくと・・・

switch-by-the-device_03

おうっ、、、

縦に並んじゃうんですね。画面いっぱいの広告表示・・・これはマズいです。これ以上スクロールするには、広告部分を触わらないといけない。スマホに慣れたユーザーだけが繰り出せる秘技、やんわりタッチ! & 音速リリース!でタップしないとスクロールできません。

無意識にもストレスになるシーン。なんとかしましょう。大丈夫。初心者でも大丈夫。スマホとパソコンで表示を切り替える方法を紹介します。ほなレッツラ・ユーザビリティー。

作業目標

【PC】記事下でダブルレクタングル表示

【スマホ】PC表示とは関係なく表示設定

 【PC表示】カスタマイズ後

switch-by-the-device_01

 【スマホ表示】デフォルト | カスタマイズ後

switch-by-the-device_03

switch-by-the-device_09

記事下ダブルレクタングル広告に限らず、その他の配置にも応用できるようになります。
作業順

1.「テーマオプション」に広告バナーコードを貼る

2. ふたつの重要ファイルをバックアップ

3.【切り替えの “じゅもん” A】を確認

4.【切り替えの “じゅもん” B】を追記

5.「スマホ用ウィジェット」で広告配置

作業、けっこー多いッスね。脇汗スゴいッス

大丈夫。細かく切り分けてるだけ。目の前の作業は常にひとつ。恐れるな。あなたの価値あるコンテンツを無駄にしてはいけない。カスタマイズはゲームである!・・楽しみましょう。

1.「テーマオプション」に広告バナーコードを貼る

そのまんまです。管理画面「外観」⇒「テーマオプション」内へ。記事ページの広告設定欄に、表示したい広告バナーコードを貼り付けます。

switch-by-the-device_06

switch-by-the-device_01

これだけで広告表示完了!楽勝!なんですが、問題はスマホ表示。切り替え作業に移ります。

テーマによって違う部分もあると思いますが、やり方は同じ。【MAG】を例に進めます。

2. ふたつの重要ファイルをバックアップ

switch-by-the-device_ins2

サーバーから現状の「single.php」と「functions.php」をファイルごと直接ダウンロードしておきましょう。もちろん、予期せぬ不具合が起こったとき、元の状態に戻すためです

し、しんぐる・・?ヨミカタもワカラナーァイ

という人はWordPress管理画面「外観」⇒「テーマの編集」⇒右カラムから「個別投稿(single.php)」、「テーマのための関数(functions.php)」にそれぞれ入ります。

内容を全選択コピーして、テキストエディタに貼り付けてバックアップしておきましょう。

switch-by-the-device_04

switch-by-the-device_05

ちなみに、「single.php」は「記事ページを構成しているファイル」、「functions.php」は「テーマを支配する頭脳」のようなものです。だから・・・

絶・対・に!それぞれしっかり分けて、バックアップしてください。

なおWindowsデフォルトの「メモ帳」は、改行コードが変更されてしまうなど不具合の原因になることが多いので、バックアップのための利用は避けましょう。

テキストエディタは、Windowsなら「サクラエディタ」、Macなら「CotEditor」あたりが無料でおすすめです。
カスタマイズは「いつでも元に戻せるようにしておく」ことが基本です。慎重に、自己責任の上で行ってください。

 安心してカスタマイズするために。

「10分で終わらせてくるっ!」WordPress子テーマの作り方を2ステップで簡単解説!

3.【切り替えの “じゅもん” A】を確認

switch-by-the-device_ins3

ここですることは確認だけ。「functions.php」の中に下のような記述があるか探します。

function is_mobile(){
$useragents = array(
'iPhone', // iPhone
'iPod', // iPod touch
'Android.*Mobile', // 1.5+ Android *** Only mobile
'Windows.*Phone', // *** Windows Phone
'dream', // Pre 1.5 Android
'CUPCAKE', // 1.5+ Android
'blackberry9500', // Storm
'blackberry9530', // Storm
'blackberry9520', // Storm v2
'blackberry9550', // Storm v2
'blackberry9800', // Torch
'webOS', // Palm Pre Experimental
'incognito', // Other iPhone browser
'webmate' // Other iPhone browser
);
$pattern = '/'.implode('|', $useragents).'/i';
return preg_match($pattern, $_SERVER['HTTP_USER_AGENT']);
}

デバイスの名前がチラホラと書いてあるので、なんとなく想像できますね。これは、デバイスごとの表示を切り替えるために必要な記述のひとつです。あ、【切り替えの “じゅもん” A】です。

これは既に、TCDテーマではほとんどのテーマに記述されているとのこと。
(※TCD公式「TCD LABO」情報 より)なので、ここでは記述があることの確認だけでOKです。

ただし、この長ーい記述がまるっと一緒である確証はありません。例えば「MAG」の場合 

// ユーザーエージェントを判定するための関数---------------------------------------------------------------
function is_mobile() {

 $match = 0;

 $ua = array(
   'iPhone', // iPhone
   'iPod', // iPod touch
   'Android.*Mobile', // 1.5+ Android *** Only mobile
   'Windows.*Phone', // *** Windows Phone
・
・(省略)
・

 if ( $match === 1 ) {
   return TRUE;
 } else {
   return FALSE;
 }

}

一緒の部分も多いですが、違う記述も多い。「全選択コピー⇒検索⇒ヒット!」とはいかないわけです。なので、検索ワードとしては「ユーザーエージェント」「function is_mobile()」「USER_AGENT」「iPhone」などが適していると思います。

まーとにかく似た記述を発見すればOK。目をこらしてオラァーッッ!、とスクロールして気合で発見する、体育会系的なのも全然アリです。私はラクしたいので検索します。

「MAGの記述例」ではなく、一つ目に挙げた記述を追記してください

なお、「functions.php」に不備があると、WordPress管理画面もサイト表示も画面が真っ白!になります

その場合は当然、管理画面からは元に戻せなくなるので、FTPソフトでのファイルアップロード方法を知ってから、記述を追記するようにしてください。

 FTPソフトについてはこちらが参考になります

初心者におすすめの無料FTPソフトベスト3

4.【切り替えの “じゅもん” B】を追記

switch-by-the-device_ins4

いきなりですが【切り替えの “じゅもん” B】を紹介します。 “じゅもん” の意味をざっくり理解しときましょう。

<?php if(is_mobile()) { ?>
    //スマホで表示したい内容
<?php } else { ?>
    //PC・タブレットで表示したい内容
<?php }; ?>

「if(もしモバイルなら)」⇒「スマホで表示したい内容」。

「else(そうでなければ)」⇒「PC・タブレットで表示したい内容」。

ちょっと腰がひけそうになるかもしれませんが、意味がわかれば大丈夫ですね。注釈にあるとおり、それぞれのデバイスで表示したい内容を、書いてある場所に入れ込むだけでOK

スマホでの広告表示を解除する

で、今回はPCで表示されている広告をスマホでは表示させないようにします。つまり・・

<?php if(is_mobile()) { ?>

<?php } else { ?>
    //テーマオプションで設定した広告を呼び出すコード
<?php }; ?>

上のように、「スマホで表示したい内容」の部分には何も入れず、「PC・タブレットで表示したい内容」に、テーマオプションで設定した広告を呼び出すコードを入れる、ということ。

例えばMAGでは、「個別投稿(single.php)」内にある記事下広告呼び出しコードは、デフォルトでこんなかんじなので 

 <!-- banner1 -->
 <?php if( $options・・・(省略)
・
・(省略)
・
 </div><!-- END #single_banner_area -->
 <?php }; ?>

 <?php if(is_mobile()) { ?>

 <?php } else { ?>
<!-- banner1 -->
 <?php if( $options・・・(省略)
・
・(省略)
・
 </div><!-- END #single_banner_area -->
 <?php }; ?>
 <?php }; ?>

こうする、ということになります。ゴチャゴチャしてますが、落ち着いてよく見てみると、ハイライトされている部分が、【切り替えの “じゅもん” B】になっていることが分かります。

スマホで表示したい内容」部分には何も入れ込まず、「PC・タブレットで表示したい内容」部分にデフォルトの記述を全部入れ込んだだけの形になっていますね。つまり作業的には、ハイライト部分(【切り替えの “じゅもん” B】)の記述を追記しただけ

この機会に把握しちゃいましょう。もう一度【”じゅもん” B】だけを見てみます。

<?php if(is_mobile()) { ?>

<?php } else { ?>
    //テーマオプションで設定した広告を呼び出すコード
<?php }; ?>

さっきの記述、ちゃんとこの形になってますよね。途中のゴチャゴチャした記述の意味がわからなくても、条件分岐自体は、たったこれだけのことで実現されるんです。PHPという言語ですが、このくらいならガッツリ勉強しなくても感覚で出来てしまうんですね。ウレシイデスネ。

実際のサイト表示を確認

じゃあ早速、スマートフォン・パソコンの環境で、それぞれサイト表示を確認してみます。

 デフォルト | カスタマイズ後

switch-by-the-device_03

switch-by-the-device_07

はいオッケー。PCではちゃんと表示されてる?

switch-by-the-device_01

はいオッケー。

5.「スマホ用ウィジェット」で広告配置

さて、これで「スマホの世界じゃ広告だらけ」状態を回避できました。でも、「スマホの世界じゃ広告無ッシング」状態もちょっと寂しい。

そんな問題は「オリジナルウィジェット」を使って即・解決してやります

switch-by-the-device_08

switch-by-the-device_09

はい大成功ー。

広告は訪問者の潜在的なニーズに応えるもの

switch-by-the-device_ins5

収益化によく利用されている、Google AdSense広告。「そもそもスマートフォン表示では、1画面内に2つ見えてる瞬間があるとダメ!」という話も耳にします。ただし、執筆現在の規約では公式記述として見つかりません。(見つけたらぜひ教えてください!)

【参考】広告の配置に関するポリシー - AdSense ヘルプ 

じゃあOKになった!?というわけでもないでしょう。・・・これは個人的な想像ですが、あらゆる画面サイズのデバイスが市場に出回ったため、一貫した規約として挙げるのが難しくなっているだけではないでしょうか。

つまり根本的な考えは変わらない。ユーザビリティー重視の考えが無くなるはずはありません

switch-by-the-device_ins7

少なくとも、禁止・許可関係なく、広告をタップする時。それは訪問者が「興味を持って意図的にタップする時」であるべきです。当然ですが。自動的に判別表示されるAdSenseにしろ、自分が選んで設置する広告にしろ、そもそも訪問者の潜在的なニーズに応えるものであるはず

情報を発信する側、提供する側として、ユーザビリティーはいつも頭に入れておきたい。そのためのカスタマイズには価値がある。だからこそ、挑戦してみたくなりますよね。

関連記事

MAGのデザインをフル活用。PCとスマホの広告設置枠を自由に増やす、減らす、好きな場所へ移動する!

記事が気に入ったら
Requ.logを "いいね!"
Facebookで更新情報をお届け。

Requ.log | レク.ログ

スポンサーリンク
スポンサーリンク

ピックアップ記事

  1. 便利すぎて、もうヤミツキ。WordPressプラグインSNS Count Cac…
  2. ゆっくり、フシギな色変化。GIFアニメを使った目を引くサイトロゴの作り方
  3. 実践あるのみ!TCDテーマで学ぶ、記事装飾の簡単カスタマイズとCSSの基本
  4. 【使用者レビュー】WordPress初心者にこそおすすめのブログテーマ、TCD「…
  5. Twitterのシェア数表示を復活!「widgetoon.js & count.…

関連記事

  1. child-theme_ecmg

    ワードプレス

    「10分で終わらせてくるっ!」WordPress子テーマの作り方を2ステップで簡単解説!

    とりあえず作りきる!知識は後半!記事ページをカスタマイズしたい。え…

  2. adjust-the-button_ecmg

    ワードプレス

    【実例集】細部の余白まで美しく。オリジナルシェアボタンのデザイン変更と調整方法

    もっと思い通りに。具体的な調整例。下の記事で紹介した「カッコ美しい…

  3. original-share-button_ecmg-ps
  4. retina-os-solution_ecmg

    ワードプレス

    【Retinaディスプレイ対応1】Macで綺麗に。Windowsでサクサク。ブログ画像をOSごとに適…

    簡単に、美しく。ページ表示速度の観点で考えると、画像においてはでき…

  5. sns-count-cache_ecmg

    ワードプレス

    便利すぎて、もうヤミツキ。WordPressプラグインSNS Count Cacheの設定方法と有効…

    必要な設定だけにフォーカス!「ページを表示するたびに、今のシェア数…

  6. screenpresso-initial-setting_ec
【Requ.log記事】魅力的なブログを、今すぐ作る。
tcd-mag
【Requ.log記事】魅力を活かす、カスタマイズまとめ。
tcd-mag

特集記事

  1. theme-change_ecrt
  2. business-books_ecmg
  3. adjust-the-button_ecmg
  4. extension-tools-for-bloggers_ec
  5. tcd-theme-selection_ecmg-ps
  6. todoist_ec

ピックアップ記事

  1. sns-count-cache_ecmg
  2. intuitive-custom-post-order_ec
  3. phrase-express_ecmg
  4. media-setting_ec
  5. original-share-button_ecmg-ps
  6. todoist-productivity_ecmg

タスク管理で、自己管理。

todoist

掘り出し記事

  1. meta-seo-inspector_ecmg
  2. mergely-ecmg
  3. pushbullet_ec
  4. backup-all-in-auto_ec

魅力的なブログを、今すぐ作る。

tcd-mag

ブログのRetina対応、始めませんか?

retina-os-solution

ピックアップ記事

  1. blog-theme-mag_ecmg-ps
  2. like-button-card_ecmg-ps
  3. facebook-page-plugin_ecmg-ps
  4. tcd-css-customize_ecmg

ゆっくり、フシギなGIFアニメ。

gif-animation

とっておきのWordPressテーマ。

tcd-theme-selection

最近の記事

  1. spark-tutorial-ecmg
  2. modern-dilemma-ecmg
  3. paradigm-shift-ecmg
  4. irreplaceable-ecmg

Requ.log | WordPress Theme

WordPressテーマ「MAG(TCD036)」

思考系ピックアップ記事

  1. modern-dilemma-ecmg
  2. blog-contents_ecrt
  3. irreplaceable-ecmg
  4. restriction_ecmg-ps
  1. todoist_ec

    マネジメント

    【フリーランス必見】確実に納期を守るために。タスク管理ツールTodoistで予定…
  2. tcd-theme-user-review_ecmg

    ワードプレス

    TCDテーマ導入前に知っておきたい、2つの注目機能とユーザー目線レビュー
  3. adjust-the-button_ecmg

    ワードプレス

    【実例集】細部の余白まで美しく。オリジナルシェアボタンのデザイン変更と調整方法
  4. todoist-tips_ecmg

    マネジメント

    【小技特集】もっと使いこなす!おすすめタスク管理ツールTodoistの活用法12…
  5. valuable-content-from-image_ec

    ワードプレス

    『伝わりやすいブログ』を作るには?画像で届ける価値あるコンテンツ
PAGE TOP