Wordpress

携帯端末(スマホ・タブレット)とPCを判別・読み込むCSSを変える方法【WordPress】【JavaScript】

  1. HOME >
  2. Wordpress >

携帯端末(スマホ・タブレット)とPCを判別・読み込むCSSを変える方法【WordPress】【JavaScript】

PC・タブレット

携帯端末・PCでCSSを切り替える

  • 携帯端末(スマホ・タブレット)とPCで読み込むCSSを切り替えたい。
  • スマホの表示を軽くするために読み込むソースコードをコントロールしたい。

ココがポイント

結論:
JavaScriptのnavigator関数を利用してブラウザのユーザーエージェントを返してもらい、携帯端末(スマホ・タブレット)とPCを判別する。

皆様こんにちは。ユウスケと申します。
日々の生活で役立つ情報を発信しています。

ユウスケ

皆様は、Webページを作成していると、読み込むCSSの情報量が多くなり、携帯端末からのアクセスが重たくなっていると感じたことはございませんか?

この問題の解決策の1つに、携帯端末とPCとでCSSファイルを分けて、読み込む情報量を減らすという方法があります。

そこで、今回は、携帯端末とPCで読み込むCSSを切り替えることのできる方法をご紹介しようと思います。

 

1.外部CSSファイルを読み込む

外部CSSファイルを読み込むことで、余計なコード情報を省き、Webページを開く早さを上げることが可能です。
ご紹介するのは、WordPressのテーマ「AFFINGER5」を利用した、読み込みになります。

もっと詳しく

 

2.JavaScriptで携帯端末とPCを判別する

2.Step1_WordPressでjQueryを簡単に追加できるプラグイン

プラグイン「Simple Custom CSS and JS」を使用するとjQueryを簡単に実装できます。

もっと詳しく

 

2.Step2_JavaScriptのコードを追加

<link rel="stylesheet" id="userAgent_match" type="text/css" media="all"/>

Headerに以上のHTMLを追加。linkタブの方をJavaScriptよりも前に記述します。

 

<script type="text/javascript">
  jQuery(document).ready(function($){
    /*スマホ・タブレット_PC条件分岐*/
    var href ="";/*空の変数を作成*/
    if(navigator.userAgent.match(/(iPhone|iPad|iPod|Android)/i)){
      /*スマホ・タブレット(iOS・Android)の場合の処理を記述*/
      href = "https://MobileTablet.css";/*携帯端末で使用するCSSのURL*/
    }else{
      /*PCの場合の処理を記述*/
      href = "https://PC.css";/*PCで使用するCSSのURL*/
    }
    /*css読み込み*/
    $('#userAgent_match').attr('href', href);
  });
</script>

以上のJavaScriptを追加。携帯端末とPCとでhrefに代入するURLを切り替えています。

今回は「スマホ・タブレット」と「PC」とで条件分岐をしておりますが、「スマホ」と「タブレット・PC」とで条件分岐もできます。

もっと詳しく

 

3.PHPで携帯端末とPCを判別する

詳しい記事を下記にリンクしております。コードを抜粋しておりますので、PHPでの判別をご利用の方は参考にしてください。

もっと詳しく

 

3.Type1_PHPでの定義する方法

function ua_smt (){
//ユーザーエージェントを取得
$ua = $_SERVER['HTTP_USER_AGENT'];
//スマホと判定する文字リスト
$ua_list = array('iPhone','iPad','iPod','Android');
 foreach ($ua_list as $ua_smt) {
//ユーザーエージェントに文字リストの単語を含む場合はTRUE、それ以外はFALSE
  if (strpos($ua, $ua_smt) !== false) {
   return true;
  }
 } return false;
}

PHPで以上を定義。

 

if (ua_smt() == true) {
 //スマホの場合の処理
} else {
 //それ以外の場合の処理
}

PHPでの使い方。

 

<?php if (ua_smt() == true): ?>
  <!-- スマホの場合 -->
  <p>スマホで閲覧中です。</p>

<?php else: ?>
  <!-- それ以外の場合 -->
  <p>PCで閲覧中です。</p>

<?php endif; ?>

HTMLでの使い方。

 

3.Type2_WordPressにある関数wp_is_mobile()を使用する方法

function.phpに以下を追加。

//PCでのみ表示するコンテンツ
function if_is_pc($atts, $content = null ){
$content = do_shortcode( $content);
    if(!wp_is_mobile()){
        return $content;
    }
}
add_shortcode('pc', 'if_is_pc');

//スマートフォンで表示するコンテンツ
/*タブレットも含まれる*/
function if_is_sp($atts, $content = null ){
$content = do_shortcode( $content);
    if(wp_is_mobile()){
        return $content;
    }
}
add_shortcode('sp', 'if_is_sp');

ショートコードで使用:

  • PCでのみ表示
  • [sp]スマホ・タブレットでのみ表示[/sp]

もっと詳しく

 

まとめ

お疲れ様です。

携帯端末とPCを判別してくれる方法に、PHPを使用する方法があります。こちらの方法がうまく実装ができない方は、JavaScriptの方法を試してみて下さい。

ご一読いただき、ありがとうございました。

Contact Form〈お問い合わせはこちらから〉

注目記事

MY BESTランキング

Webページ作成には必携!!

逆引きの見やすさが抜群!!

だから、

  1. HTMLのソースコード画面を読み取れる。
  2. 思い通りのCSSスタイルを調べられる。

是非、一冊手元にもってブログのレイアウトを自作しよう。

たった30分間を続ける重要性がわかる一冊!!

1日たったの30分間

けれども、
それが1週間、1ヶ月、1年となると
大きな差になる。

この本を読むだけで、
1日の生活の中の「たった30分間」の重要性がすぐにわかります。

勉強を始めるモチベーションになる一冊
是非、手元に!!

アフィリエイトならA8.net

最初のアフィリエイトにもってこいのASPです。

操作性がよく、
クリック率+EPCものっているので
初心者にとってありがたい仕組みになっています。

  • この記事を書いた人
  • 最新記事
YusukeMiyoshi

YusukeMiyoshi

Illustrator、Photoshopのテクニック。 WordPressのカスタマイズ についての記事が中心です。 よい本に出会えれば、ご紹介させていただきます。 Twitterのフォローお願いいたします。

-Wordpress

ユウスケの雑記ブログ
Thank you for your follow up.

Copyright© ユウスケの雑記ブログ , 2020 All Rights Reserved Powered by AFFINGER5.