Team-SKY30 サイトのPVを増やそう計画

レスポンシブ設計で役立つPC/モバイルの出し分け方法4つ!

公開日:

こんばんは、児島です。

マルチスクリーンが当たり前になってきた、今日この頃ですが、今日の記事はタイトルそのまんまです。
レスポンシブ設計で役立つPC/モバイルの出し分け方法を4つ紹介します。

既に、「いまさら感」のあるネタかもしれませんが、これから先も引き続き役に立つネタでもあります。メリットデメリットなども含めて、詳しく解説したいと思います。

このページの目次


方法1 cssで出し分ける

まず最も有名でありお手軽にできるcss(スタイルシート)での出し分けです。
やり方は簡単で、CSSの[display:]プロパティと、CSS3から実装された「Media Queries(メディアクエリ)」を用いて出し分けます。

「display:」とは、指定した要素の表示形態を定義するプロパティで、「Media Queries(メディアクエリ)」とは、特定スクリーンサイズにのみスタイルを適用させるフィルタのようなものです。

例えば、スクリーンサイズ640px以下はモバイルとし、表示を消したい場合は次のように書きます。

.sample {
	display:block;
}

@media screen and (max-width: 640px){
.sample {
	display:none;
}
}

これで「.sample」に分類されたclassは640px以下のスクリーンで表示されなくなります。この出し分けは、レスポンシブWEBデザインの基本ともなりますので、ぜひ覚えましょう!

極端な話、これを応用するだけでデザイン面はほぼ事足ります。しかしこの方法には1つ注意すべき点があります。

CSSの「display:none;」は表示を消しているのではなく、隠しているという点です。ブラウザでは、見えなくなっていますが内部的に(ソースコード上)は存在しますので、表示のパフォーマンスや、SEO的に思わぬ影響を受ける可能性があります。

また、Google AdSense等の広告は、表示を隠すことを禁止している場合があります。

状況によってはCSS以外の方法で出し分ける事が必要となるかもしれません。
そんな時は下記の3つの方法が役立ちます。

方法2 wordpressの関数で出し分ける

WordPressを使っている場合、モバイル出し分け用の関数が用意されています。
「wp_is_mobile()」
UA(ユーザーエージェント)により、スマートフォンか否かを判別する関数です。
条件分岐と併用して次のように記述します。

<?php
if ( wp_is_mobile() ){
?>
ここにモバイル用コンテンツ
<?php
} else {
?>
ここにPC用コンテンツ
<?php
}
?>

WordPressを使っている場合はこの関数で出し分けが可能ですが、「wp_is_mobile()」はタブレットもモバイルと判断するようです。
画面サイズの大きいタブレットはPCと同じコンテンツを見せたいという事もあります。
その様な時は、下記の方法を用いることができます。

方法3 PHPで出し分ける

PHPで、端末のUAを調べてモバイルを判別します。

書き方はいろいろありますが、私は次のようにしています。

if(preg_match('/android.+mobile|Nexus|iemobile|ip(hone|od)|opera m(ob|in)i|psp|windows (ce|phone)|mobile.+firefox/i',$_SERVER['HTTP_USER_AGENT'])){
//モバイル
}

さらにwordpressの「wp_is_mobile()」関数のような使い方をするには、モバイル時にだけ「TRUE」を返すユーザー定義関数を作成します。

<?php

function is_mobile() {
  if(preg_match('/android.+mobile|Nexus|iemobile|ip(hone|od)|opera m(ob|in)i|psp|windows (ce|phone)|mobile.+firefox/i',$_SERVER['HTTP_USER_AGENT']))
  return true;
}
?>

上記をheaderなどに記述しておけば、サイトのどこでも次のように出し分ける事が出来るようになります。

<?php
if ( is_mobile() ){
?>
ここにモバイル用コンテンツ
<?php
} else {
?>
ここにPC用コンテンツ
<?php
}
?>

次は、最後の方法です。

方法4 Java scriptで出し分ける

私はあまり使わない方法ですが、何らかの理由でPHPが使えない場合などにJava scriptで出し分ける事が出来ます。
次のように記述します。

<script type="text/javascript"><!--

if ((navigator.userAgent.indexOf('iPhone') > 0 && 
     navigator.userAgent.indexOf('iPad') == -1) || 
     navigator.userAgent.indexOf('iPod') > 0 || 
     navigator.userAgent.indexOf('Android') > 0) {
    /* スマホのみ*/
	document.write('HTMLタグ');
}
else {
    /* パソコンのみ */
	document.write('HTMLタグ');
}
//-->
</script>

いかがでしたでしょうか。ここで紹介した方法で、PC/モバイルの出し分けはほぼ完璧にできるはずです。是非試してみてください。

また、「もっと良い方法があるよ」という情報をお持ちの方がいらっしゃいましたら、教えて頂ければ嬉しく思います。

※注
端末のUA(ユーザーエージェント)は今後変わる可能性があります。


タグ


執筆者


新着記事

2018.05.31 Thu

「アドセンスの初心者応援ライブ」を実施しました!


2017.12.04 Mon

収益性が40%向上したアクティブビュー改善の施策!


2017.12.04 Mon

アクティブビュー率向上施策 ゲーム攻略サイトはアクティブビュー率との相性がめちゃ悪い!


2017.11.28 Tue

AdSense広告の視認率を高めると収益性が向上する?


2017.11.14 Tue

【Team-SKY30の取り組み】アクティブビュー(視認率)向上の施策


2017.02.20 Mon

【告知】宮崎智之氏をゲスト講師にお招きして「第15回ゲームライターコミュニティセミナー」を開催します


2016.09.20 Tue

グローバル(多言語)サイトのURLってサブドメイン?サブディレクトリ?


2016.07.09 Sat

wordpressでループの途中に簡単に広告を入れる方法


2016.07.09 Sat

【旬?】最近やっているモバイル対策


2016.05.05 Thu

1か月PVアップトライアル!結果報告




にほんブログ村 ブログブログ ブログアクセスアップへ