【WordPress】サイトの表示をスマホ向けにする【CSS】

レスポンシブデザインとは?

レスポンシブデザインとは閲覧しているユーザーのデバイスの画面サイズに合わせて、最適な表示になるデザインです。
現在はPCだけでなくスマートフォンからサイトを閲覧する人も多くなり、画面のサイズが様々になったため、レスポンシブデザインは重要です。
スマホから見ているのにPCページしかないと見づらいと感じ、中身を読んでもらえない可能性もありますよね。そのため、スマホ対応はSEOにおいても必須と思われます。

サイトをスマホ対応にするには?

レスポンシブデザインとはひとつのHTMLで出来ていてデバイスのサイズによってCSSを振り分け表示を変えるものになるので、PCとスマホでテーマを変えることもなく、プラグインもなしで出来るものなので、管理がしやすくなるかと思います。
最近ではワードプレスの無料テーマも基本的にレスポンシブデザインになっているものが多く、初めからきちんと表示分けされているものも多いです。

viewport・メディアクエリの設定

もし何も設定をされてないテーマでスマホ表示の設定をしたい場合は、下記のコードをサイトのheadタグ内に追加します。
そしてメディアクエリ設定でそれぞれのデバイス別に設定を入れます。

元々レスポンシブデザインのテーマを使っている時でも、
自分でカスタマイズする際にメディアクエリ設定は必要となる場合があるので、
CSSファイル内のどこに書かれているかなどは見ておくと役に立つと思います。
max-width~pxで切り替える幅を変えられます。

<meta name="viewport" content="width=device-width, initial-scale=1">

メディアクエリは以下の形で書かれています。

/* pc */
@media (min-width: 1024px) {
/*ここにpc用CSS*/
}

/* tablet */
@media (max-width: 992px) {
/*ここにタブレット用CSS*/
}

/* smartPhone */
@media (max-width: 767px) {
/*ここにスマホ用CSS*/
}

まとめ

現在公開されているテーマでは1から自分で設定の必要がないことも多いかと思いますが、
自分でデバイス別に細かく設定したい場合は、メディアクエリにCSSを追加するとカスタマイズ可能なので、是非試してみてください。

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です