水瓶座列車

どこまで行けるか、とりあえず発車します。

WordPressでモバイル対応のためのCSS作成方法の解説

f:id:aquarius999:20200616160125j:plain

 

WordPressでブログをやっていると、

PCでの表示とスマホタブレットなどのモバイルでの表示の両方を意識する必要があります。 

何故かというと、表示画面のサイズが異なることによってレイアウトが崩れる場合があるからです。

例えば、CSSでサイズ固定をしていると、PCでは正確に表示されても、

スマホでは、はみ出してしまう可能性があります。

 

PCとスマホの両方の表示に対応することをレスポンシブ表示といいますが、

これをCSSを工夫して簡単に実現することができます。

 

細かく設定するとかなりCSS記述が煩雑になりメンテナンスも労力がかかりますが、

PC用とモバイル用のCSSファイルを作成して、各々のCSSファイルの中で、

サイズ別の設定を行うと、意外と簡単になります。

そのCSSファイルの作成方法を備忘も兼ねて、説明していきたいと思います。

 

 

 

 

 

1.PC表示とモバイル表示の幅を把握する

 

まず自分のサイトをどのサイズで、表示するかを決めます。

例えば、PCの場合では、いろいろなサイズのディスプレイがあり、

ブラウザの大きさを自由に変えることができます。

ブラウザの大きさを拡大したとしても、サイト自体の表示を拡大する必要はありませんので、

CSSファイルで、自分のサイトの表示標準サイズを決めておくことで、CSS記述がやりやすくなります。

 

大きいディスプレイに合わせるよりも、小さいディスプレイに合わせた方が良いと思います。

私の場合、表示標準サイズは、

・PCの場合はノートパソコンのことも考慮に入れて、1024px~、

・モバイル(スマホ)の場合は、300~700px、

・モバイル(タブレット)の場合は、760px~、

を目安としました。

 

全てのサイズに合わせることは大変なので、

とりあえず小さいサイズの方に合わせてベースのCSSファイルを作成し、

徐々に表示させたいサイズを増やしていくことで良いと思います。

 

 

2.3種類のCSSファイルの準備

 

1つのCSSファイルで全てのデバイスのスタイルを対応させようとすると、

CSSの記述が長くなりメンテナンスが面倒ですので、3つのファイルに分けます。

分け方は、こんな感じです。

・style.css     : 全共通用

・style-pc.css   : PC用

・style-mobile.css : モバイル用

 

例えば、style.cssに、 

.mokuji-box ol {
  font-size: 1.0em;
  margin-top: -17px;
  margin-left: 10px;
}

とベースとなるCSSを記述します。

 

そして、PC側の文字サイズは、1.2em、モバイル側は、1.1emにしたいとすると、

style-pc.cssファイルに、

.mokuji-box ol {
  font-size: 1.2em;
}

 

style-mobile.cssファイルに、

.mokuji-box ol {
  font-size: 1.1em;
}

 

と記述すれば、PCとモバイルでそれぞれ異なった文字サイズを設定することができます。

また、文字サイズ以外のスタイルはstyle.cssから継承され、

PCとモバイルでの変更箇所のみがそれぞれのCSSファイルに記述しますので、

PCとモバイルの相違を簡単に把握することができます。

 

 

3.独自CSSファイルの読み込みと切り替え方法

 

前項で、PC用とモバイル用のCSSファイルが準備できましたが、

サイトを表示するデバイスが、PCかモバイルかの判別を行う処理を自分で入れる必要があります。

WordPressのサイトが表示される際、親テーマ、子テーマの順で、style.cssは必ず読み込まれますが、

独自で作成したCSSファイルは、自分で読み込ませる必要があります。

 

PC/モバイルの判定処理は、header.phpのheadタグに入れます。

例えば、こんな感じです。

<head>
 <meta charset="<?php bloginfo( 'charset' ); ?>">
 <meta name="viewport" content="width=device-width, initial-scale=1">
 <link rel="profile" href="http://gmpg.org/xfn/11">

 <?php wp_head(); ?>
 
 // ↓ ここから追加
 <?php if( wp_is_mobile() ) : ?>
  <link rel='stylesheet' href="<?php echo get_stylesheet_directory_uri(); ?>/style-mobile.css" type='text/css' media='all'>
 <?php else: ?>
  <link rel='stylesheet' href="<?php echo get_stylesheet_directory_uri(); ?>/style-pc.css" type='text/css' media='all'>
 <?php endif; ?>
 // ↑ ここまで
</head>

 

header.phpのheadタグのwp_head()の下のif/else文の部分が自分で入れたものになります。

WordPress関数のwp_is_mobile()を使用して、PCとモバイルの判定を行い、

モバイル時には、style-mobile.cssを、PC時には、style-pc.cssを読み込むようにしています。

また、この2つのCSSのフォルダ位置をWordPress関数のget_stylesheet_directory_uri()を使用してフルパス指定しています。

ちなみに全共通となるstyle.cssは、wp_head()で読み込まれます。

ここでの注意点は、wp_head()の下にこのif/else文を入れることです。

その理由は、wp_head()で親テーマ、子テーマのstyle.cssが読み込まれるので、

それより前に入れると、スタイルが上書きされてしまうからです。

 

 

4.@media screen and ()の使い分け

 

画面サイズは、PCでもモバイルでもいろいろなサイズがあります。

1.で説明したように、それぞれのデバイスで、どのようなサイズで表示させたいかを決める必要があり、

CSS記述の@media screen and ()を使用して、サイズ毎にスタイル設定をすることができます。

例えば、こんな感じです。

@media screen and (max-width: 500px) {
      :
   (500px以下の画面サイズに有効となる)
      :
}

@media screen and (min-width: 760px) {
      :
   (760px以上の画面サイズに有効となる)
      :
}

 

@media screen and ()は、メディアクエリと呼ばれており、

()の中にクエリを記述することで、サイズ毎にスタイルを分けることができます。

そのクエリの種類としては、以下があります。

 

パラメータ 説明
max-width ブラウザの幅がクエリに定義された値よりも小さい場合に適用される。
min-width ブラウザの幅がクエリに定義された値よりも大きい場合に適用される。
max-height ブラウザの高さがクエリに定義された値よりも小さい場合に適用される。
min-height ブラウザの高さがクエリに定義された値よりも大きい場合に適用される。
orientation=portrait ブラウザの高さが、幅と同じかそれ以上の場合に適用される。
orientation=landscape ブラウザの幅が、高さよりも大きい場合に適用される。

 

 注意点として、

@media screen and (max-width: 300px) { ・・・ }
@media screen and (max-width: 500px) { ・・・ }

として、スマホなどで300px以下、500px以下の表示を行った場合、

300px以下の方の設定も継承されますので頭に入れておく必要があります。

また、表示サイズの小さい順に記述していくと、スタイル設定しやすいと思います。

 

 

 

5.CSSファイルの確認方法

 

一通りCSSファイルの作成が完了しましたら、動作確認をします。

PC時の確認は、簡単に確認することができますが、

モバイル時の確認は、スマホタブレットなど様々なサイズがあり、なかなか難しいです。

そこで、PC上でChromeブラウザを使用して、擬似的に様々なモバイルサイズの表示を確認することができます。

まず、Chromeブラウザの右上にある点から、「その他のツール」ー>「デベロッパーツール」をクリックします。

f:id:aquarius999:20200616001452p:plain

 

デベロッパーツール」をクリックすると、下記のようになります。

f:id:aquarius999:20200616001711p:plain

 

クリック直後は左側のサイト表示画面が更新されていませんので、左上の再読み込みボタンをクリックします。 

そうすると、モバイル表示になり、赤枠をクリックするとiPhoneなど機種名で選択でき、

緑枠では、幅を選択して再読み込みすることで、そのサイズでのモバイル画面が表示されます。

また、CSSを更新したにも関わらず反映されない場合は、キャッシュが残っている可能性がありますので、

「再読み込み」ボタン上で右クリックして、「キャッシュの消去とハードの再読み込み」をクリックすると反映されると思います。

 

 

6.最後に

 

WordPressのテーマには、既にモバイル(レスポンシブ)対応が入っているものもありますが、

今回は、自分で作成してみました。

もしモバイル対応が上手くいかない場合には、ここで説明したものを試してみるのも良いと思います。

 

 

<関連・おすすめ記事>

WordPressをレンタルサーバー無しで使用する手順 - 水瓶座列車

WordPressに必要なレンタルサーバーのおすすめランキング - 水瓶座列車

サーバー上のWordPressデータをローカル環境にインポートする手順 - 水瓶座列車

WordPressのモバイルでのページネーションの表示方法 - 水瓶座列車

Linux勉強用の中古パソコンおすすめショップランキング - 水瓶座列車