条件分岐を使ってスマホ・タブレット・PCの表示を切り分ける方法【WordPress】

デザインノウハウ
この記事は約 < 1 分で読むことができます。

webサイトなどで、スマホ・タブレット・PCそれぞれ表示を切り替えたい場合は条件分岐を使う方法がおすすめです。

画像の表示・非表示を切り替えるだけではなく、htmlやJSなどの構造ごと切り替えることができるので、表現の幅が広がりますよ!

ASK
ASK
今回紹介する条件分岐はphpファイルに記載するためのコードだよ。
普通の固定ページや投稿ページに記載しても意味がないので注意してね!

スマホ・タブレット・PCそれぞれ表示を切り替える条件分岐

<?php
$ua = $_SERVER['HTTP_USER_AGENT'];
if ((strpos($ua, 'Android') !== false) && (strpos($ua, 'Mobile') !== false) || (strpos($ua, 'iPhone') !== false) || (strpos($ua, 'Windows Phone') !== false)) {
?>

  //スマホで表示させたい内容を記載

<?php } elseif ((strpos($ua, 'Android') !== false) || (strpos($ua, 'iPad') !== false)) { ?>

  //タブレットで表示させたい内容を記載

<?php } else { ?>

  //PCで表示させたい内容を記載

<?php } ?>

スマホとそれ以外で表示を切り替える条件分岐

<?php
	$ua=$_SERVER['HTTP_USER_AGENT'];
	$browser = ((strpos($ua,'iPhone')!==false)||(strpos($ua,'iPod')!==false)||(strpos($ua,'Android')!==false));
		if ($browser == true){
		$browser = 'sp';
	}
	if($browser == 'sp'){
?>

  //スマホで表示させたい内容を記載

<?php }else{ ?>

  //タブレット・PCで表示させたい内容を記載

<?php } ?>

CSSで表示を切り分けちゃダメなの?

最近はレスポンシブデザインが主流ではありますが、時にはPC・スマホで別々の画像を表示させたい場面が出てきます。

詳しくはこちらで解説しています↓

PCとスマホでバナーを切り替えたほうが良い3つの理由!アダプティブデザインの効果を徹底解説!

そんな時にCSSのdisplay:noneを駆使して表示を切り替えてもいいのですが、これには1つ問題があります。

ページを表示する際、表示されていない画像のコードも毎回読み込まれるので、ページの表示速度に影響が出てしまいます。

そこまで大した差ではありませんが、こういった小さな積み重ねで結果的にサイトが重くなってしまうのです。

なるべく無駄なコードを無くすためにもなるべく条件分岐を使うようにしましょう!

まとめ

今回紹介したコードをphpファイルにコピペするだけで条件分岐を使うことができます。

Webサイトを作成するうえで必ず使うコードですので、お気に入りに登録しておくことをおすすめします。

最初は難しく思えるかもしれませんが、やってみると簡単ですのでぜひ試してみてください!

デザイナーを目指すならスクールに通おう

当サイトでは、
本気でWebデザイナーになりたいならデザインスクールに通うことをおすすめしています。

なぜかというと、デザインの勉強は独学では難しいからです。

独学が難しい理由

  • モチベーション維持が難しい
  • 自分のデザインの良し悪しを判断できない
  • 無意識のうちに、好きなデザインばかりを作ってしまう
  • いくら勉強しても就職できるかは別問題

デザインというものは勉強すればするほど上達できるわけではありません。

プロに見てもらいながら、正しく勉強して初めて、デザインは上達するんです。

独学で無駄な時間を費やすくらいなら、多少お金はかかってもWebデザインスクールに通って最速でデザイナーになるべきです!

当サイトおすすめのWebデザインスクールについては下記リンクよりご覧ください!

おすすめWedデザインスクール17選!現役デザイナーが解説します!
デザインノウハウ

応援クリックをポチッとお願いします!
ブログランキング・にほんブログ村へ   

ハジデザ | 初めてのWebデザイナー転職

コメント