WordPressでブログをやっていると、
PCでの表示とスマホやタブレットなどのモバイルでの表示の両方を意識する必要があります。
何故かというと、表示画面のサイズが異なることによってレイアウトが崩れる場合があるからです。
例えば、CSSでサイズ固定をしていると、PCでは正確に表示されてもスマホでは、はみ出してしまう可能性があります。
PCとスマホの両方の表示に対応することをレスポンシブ表示といいますが、これをCSSを工夫して簡単に実現することができます。
細かく設定するとかなりCSS記述が煩雑になりメンテナンスも労力がかかりますが、
PCとモバイルのCSSファイルを別々にして、各々のCSSファイルの中で、
サイズ別の設定を行うと、意外と簡単になります。
そのCSSの作成方法を備忘も兼ねて、説明していきたいと思います。
１．PCとモバイルの幅を把握する
まず自分のサイトをどのサイズで、表示するかを決めます。
どういうことかというと、例えばPCの場合では、いろいろなサイズのディスプレイがあり、ブラウザの大きさを自由に変えることができます。
ブラウザの大きさを拡大したとしても、サイト自体の表示を拡大する必要はありませんので、
CSSファイルで、自分のサイトの表示標準サイズを決めておくことで、CSS記述がやりやすくなります。
大きいディスプレイに合わせるよりも、小さいディスプレイに合わせた方が良いと思います。
私の場合、表示標準サイズは、
・PCの場合はノートパソコンのことも考慮に入れて、1024px～、
・モバイル(スマホ)の場合は、300～700px、
・モバイル(タブレット)の場合は、760px～、
を目安としました。
全てのサイズに合わせることは大変なので、とりあえず小さいサイズの方に合わせてベースのCSSファイルを作成し、徐々に表示させたいサイズを増やしていくことで良いと思います。
２．3種類のCSSファイルの準備
１つのCSSファイルで全てのデバイスのスタイルを対応させようとすると、
CSSの記述が長くなりメンテナンスが面倒ですので、３つのファイルに分けます。
分け方は、こんな感じです。
・style.css ： 全共通用
・style-pc.css ： PC用
・style-mobile.css ： モバイル用
例えば、style.cssに、
.mokuji-box ol {
font-size: 1.0em;
margin-top: -17px;
margin-left: 10px;
}
と記述して、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から継承されるので簡略化できます。
３．独自CSSファイルの読み込みと切り替え方法
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を読み込むようにしています。
また、この２つのCSSのフォルダ位置をWordPress関数のget_stylesheet_directory_uri()を使用してフルパス指定しています。
ちなみに全共通となるstyle.cssは、wp_head()で読み込まれます。
ここでの注意点は、wp_head()の下にこのif/else文を入れることです。
その理由は、wp_head()で親テーマ、子テーマのstyle.cssが読み込まれるので、
それより前に入れると、スタイルが上書きされてしまうからです。
４．@media screen and ()の使い分け
画面サイズは、PCでもモバイルでもいろいろなサイズがあります。
１．で説明したように、それぞれのデバイスで、どのようなサイズで表示させたいかを決める必要があり、
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以下の方の設定も継承されますので頭に入れておく必要があります。
また、サイズの小さい順に記述していくと、スタイル設定しやすいと思います。
５．CSSファイルの確認方法
一通りCSSファイルの作成が完了しましたら、動作確認をします。
PC時の確認は、簡単に確認することができますが、
モバイル時の確認は、スマホやタブレットなど様々なサイズがあり、なかなか難しいです。
そこで、PC上でChromeブラウザを使用して、
擬似的に様々なモバイルサイズの表示を確認することができます。
まず、Chromeブラウザの右上にある点から、「その他のツール」ー＞「デベロッパーツール」をクリックします。
「デベロッパーツール」をクリックすると、下記のようになります。
クリック直後は左側のサイト表示画面が更新されていませんので、左上の再読み込みボタンをクリックします。
そうすると、モバイル表示になり、赤枠をクリックするとiPhoneなど機種名で選択でき、
緑枠では、幅を選択して再読み込みすることで、そのサイズでのモバイル画面が表示されます。
また、CSSを更新したにも関わらず反映されない場合は、キャッシュが残っている可能性がありますので、
「再読み込み」ボタン上で右クリックして、「キャッシュの消去とハードの再読み込み」をクリックすると反映されると思います。
６．最後に
WordPressのテーマには、既にモバイル(レスポンシブ)対応が入っているものもありますが、
今回は、自分で作成してみました。
もしモバイル対応が上手くいかない場合には、ここで説明したものを試してみるのも良いと思います。
＜関連・おすすめ記事＞
WordPressに必要なレンタルサーバーのおすすめランキング - 水瓶座列車
WordPressのデフォルトテーマをベースにした自作テーマの作成手順 - 水瓶座列車
サーバー上のWordPressデータをローカル環境にインポートする手順 - 水瓶座列車
WordPressのモバイルでのページネーションの表示方法 - 水瓶座列車
Linux勉強用の中古パソコンおすすめショップランキング - 水瓶座列車