モバイルとパソコンとでデザイン分けするときどうしてますか？

パソコン版用にスタイルコードを書き、その下などにモバイル用のスタイルコードをメディアクエリを使って記述して上書きする、またはその逆で対応するのがほとんどではないでしょうか？

これだと、1つの部品に対して結構な行数の追加が必要になるし、モバイル、タブレット、パソコン用に記述する必要があるし、1つのCSSファイル内にパラパラに記述しているとどこに何があるのやら．．状態になってしまいますよね？（ならない？）。

そして探しきれないからとまたまた最終行に修正用コードを足して．．とほんとカオスになっていくと思うんです。

CSSは小さいファイルですし、スタイルコード自体が多少増えたって転送量が増えるわけでもないので、あまり重要視する必要もないのでしょうけど、それでもやはり高速表示のためには少しでも転送量を減らす努力は必要なことだと思います。

そこで以下のようにして対応していました。

  • is_mobileというタブレットをパソコンとみなすユーザー定義関数を作る
  • モバイル用とパソコン用でCSSファイルを完全に分ける
  • is_mobile関数でアクセス時に振り分けをし、どちらのCSSを読み込むのかを分岐する

こうすることで、本当に完全に分離できるので一切無駄がない形にはなっているのですが、唯一、テーマカスタマイザー上で切り替えて確認することができないのがネックでした。

かといって、メディアクエリを使って画面幅で切り分ける方法では今一歩完全レスポンシブにならない（不都合な部分を補完していくうちにどんどん．．となる）、でもできれば問題は解消したい．．。

ということでたどり着いたのが、それぞれにbodyclassつけてはどうか？という発想。

これなら1つのCSSファイルで済むし、共通のもの（bodyclassなし）に、パソコン用・モバイル用のものを列記していけば済むので便利かもということでテスト実装してみました。

調べてみたらそれぞれにbodyclassを付与するのは以外と簡単でした。

個人的には長年の不思議というか疑問が払拭された気分♪♪です。

同じこと考えてた方の参考になれば．．。

本ページの機能を実装するには、テーマのfunctions.phpへの追記が必要になりますので、スキルのない方はご遠慮願います。また、コードを見て「ああ、こんなことしてるのね」と理解できない方も避けた方がいいでしょう。

bodyclassを付与するコードについては以下のページを参考にしました。

How to Add Custom body_class Using wp_is_mobile

モバイルとパソコンそれぞれに別のbodyclassを付与する手順

タブレットをパソコンとして扱う関数を作る

WordPressの組み込み関数である「wp_is_mobile」では、タブレット端末からのアクセスがモバイルとして認識されますから、「is_mobile」というユーザー定義関数を作って、タブレットがパソコンとして認識されるようにします。

「is_mobile」関数の作成方法についてはモバイルを判定するための関数についてを参照ください

タブレットもモバイル扱いでいいよという方は関数追加の必要はありません。

モバイルとパソコンにそれぞれのbodyclassを追加する

以下のコードをテーマのfunctions.phpへ追記してください。

前述の「is_mobile」関数の記述よりも下に追記しないとエラーになりますのでご注意ください

/***** PC Mobileでそれぞれbodyclassを付与 *****/
function ha_pc_mobile_body_class( $classes ) {
    if ( is_mobile() ) {
        $classes[] = 'is-mobile';
    }else{
		$classes[] = 'is-pc';
	}
    return $classes;
}
add_filter( 'body_class', 'ha_pc_mobile_body_class' );

「wp_is_mobile」で分岐する場合には、コード中の「is_mobile」の部分を書き換えてください

コードの追記が問題なくできたら、デベロッパーツールなどでパソコン（タブレット）、モバイル表示をして、パソコン時には「is-pc」、モバイル時には「is-mobile」というbodyclassが追加されているかを確認してください。

ざっくりコード解説

上記のコードは、body_classというフィルターフックを使って、$classに指定する要素をbodyclassの中へ追加してくださいというものです。

「is_mobile」関数を使って、モバイルかを判定し、

  • モバイルからのアクセスだったらbodyclassへ「is-mobile」というクラスを追加してください
  • そうでなかったらbodyclassへ「is-pc」というクラスを追加してください

という処理をしています。

スタイルコードの書き方

実際にスタイルコードをテーマの追加CSSや子テーマのstyle.cssへ追記して確認してみましょう。

以下は、段落タグ（pタグ）に対して、パソコンでは文字サイズを20pxに、モバイルでは文字色を赤にするコードです。

/* モバイルのpタグの文字色を赤色にする */
body.is-mobile p {
    color: red;
}

/* パソコンのpタグの文字を20pxにする */
body.is-pc p {
    font-size:20px;
}

上記コードを追加CSSなどへ追記して、ページ表示をし直しても変更されない場合には

  1. スタイルコードの優先度が低い
  2. functions.phpへのコード追加に何か間違いがある

のいずれかですので、

  • 1であれば「!important」を付け、上記コードを「color:red!important;」などへ変更してみる
  • 2であれば、デベロッパーツールでbodyclassが付与されているかを確認する

などして対処してください。

また、bodyclassを追加すること自体は特にサイトへ負荷をかけるものでもありませんので、bodyclassだけ付加しておいて、必要な時には使うという運用方法でも構わないと思います。

今回は、モバイルとパソコンそれぞれに別のbodyclassを付与する方法として紹介しましたが、何かの条件に合致したらbodyclassを付与するという処理の基本となるコードですので、別の用途で使えることもあるかも知れません。