モバイルとパソコンとでデザイン分けするときどうしてますか？
パソコン版用にスタイルコードを書き、その下などにモバイル用のスタイルコードをメディアクエリを使って記述して上書きする、またはその逆で対応するのがほとんどではないでしょうか？
これだと、1つの部品に対して結構な行数の追加が必要になるし、モバイル、タブレット、パソコン用に記述する必要があるし、1つのCSSファイル内にパラパラに記述しているとどこに何があるのやら．．状態になってしまいますよね？（ならない？）。
そして探しきれないからとまたまた最終行に修正用コードを足して．．とほんとカオスになっていくと思うんです。
CSSは小さいファイルですし、スタイルコード自体が多少増えたって転送量が増えるわけでもないので、あまり重要視する必要もないのでしょうけど、それでもやはり高速表示のためには少しでも転送量を減らす努力は必要なことだと思います。
そこで以下のようにして対応していました。
- is_mobileというタブレットをパソコンとみなすユーザー定義関数を作る
- モバイル用とパソコン用でCSSファイルを完全に分ける
- is_mobile関数でアクセス時に振り分けをし、どちらのCSSを読み込むのかを分岐する
こうすることで、本当に完全に分離できるので一切無駄がない形にはなっているのですが、唯一、テーマカスタマイザー上で切り替えて確認することができないのがネックでした。
かといって、メディアクエリを使って画面幅で切り分ける方法では今一歩完全レスポンシブにならない（不都合な部分を補完していくうちにどんどん．．となる）、でもできれば問題は解消したい．．。
ということでたどり着いたのが、それぞれにbodyclassつけてはどうか？という発想。
これなら1つのCSSファイルで済むし、共通のもの（bodyclassなし）に、パソコン用・モバイル用のものを列記していけば済むので便利かもということでテスト実装してみました。
調べてみたらそれぞれにbodyclassを付与するのは以外と簡単でした。
個人的には長年の不思議というか疑問が払拭された気分♪♪です。
同じこと考えてた方の参考になれば．．。
bodyclassを付与するコードについては以下のページを参考にしました。
How to Add Custom body_class Using wp_is_mobile
本ページ掲載のコードを使用するときは
本ページで掲載しているコードは、以下に了承した上で使用ください
- コードは商用・非商用問わず自由に使っていただいて構いませんが、コード追加による不具合やトラブルが発生しても当方では一切責任を負いません
- コードは有効化しているテーマのfunctions.php、style.cssなどへ追加することで機能します。それらのファイルへの変更を行うことに不安のある方は使用しないでください
- コードは本ページの公開日時点で私の環境において動作したものです。WordPressバージョン他環境の違いによって動作しないことがあります
- コードは、セキュリティ、コードの正確さなどにおいて完全なものではありません。中には紹介するコードを簡略化するために省略している部分があるものもありますので、ご自身でコードを十分に検証し、必要な部分の編集を行った上で使用するようにしてください
- 掲載しているのは参考コードです。自身の環境に合わせるための編集はご自身で対応いただく必要があります（コメント欄等から質問いただいても基本回答は致しません）
- 掲載しているコードの転載を禁じます（SNSで紹介いただいたり、本ページへのリンクを張っていただくことは大歓迎です）
モバイルとパソコンそれぞれに別の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などへ追記して、ページ表示をし直しても変更されない場合には
- スタイルコードの優先度が低い
- functions.phpへのコード追加に何か間違いがある
のいずれかですので、
- 1であれば「!important」を付け、上記コードを「color:red!important;」などへ変更してみる
- 2であれば、デベロッパーツールでbodyclassが付与されているかを確認する
などして対処してください。
また、bodyclassを追加すること自体は特にサイトへ負荷をかけるものでもありませんので、bodyclassだけ付加しておいて、必要な時には使うという運用方法でも構わないと思います。
今回は、モバイルとパソコンそれぞれに別のbodyclassを付与する方法として紹介しましたが、何かの条件に合致したらbodyclassを付与するという処理の基本となるコードですので、別の用途で使えることもあるかも知れません。
