ワードプレスのスマホ表示の確認とスタイル

レスポンシブ(PCでもスマホでもレイアウトが調節されて見れるサイト)なウェブサイトでは、多くの場合スマホ用のスタイルが適応されています。

スマホでの見た目をブラウザーで確認する方法

まず、ブラウザーでスマホでのサイトの見た目を再現する方法をご紹介いたします。ブラウザーで該当のページを開かれたら、右クリック→「要素の検証」を選び、開発コンソールの左上などにあるスマホビューに切り替えます。

※下記はChromeの例です。

下図のようにスマホでのウェブサイトの見た目になることがわかります。ブラウザーによってはスマホの機種や縦横幅を選ぶこともできます。

※変更後はページを再読み込みされて設定を適応されてください。

ワードプレスのテーマではスマホに別のスタイルシートが指定されてる場合があります

スタイルシート(サイトの見た目やレイアウトを制御するコード)にはブラウザの横幅で分ける書き方があります。また、ワードプレスにはスマホを判別して別のHTMLやCSSを出力する仕組みがついていますのでスマホではPCと別のCSSが適応されている場合がございます。
CSSを調整する際はスマホでの見た目も考慮する必要があります。

※下記の例ではスマホ用のメニューを表示するのにPCとは別のルールがヘッダーに適応されているのがわかります。@media screen and …の部分が画面サイズに合わせて別のスタイルシートをサイトに適応する指定部分となります。

スマホで別のスタイルシートを適応する書式

PCとスマホで特定の要素に別のスタイルシートを適応するにはメディアクエリというサイトを表示しているブラウザーの横幅で判別して分けて記載する方法が一般的です。

/* 横幅992px以下の画面では、背景色を青にする */

@media screen and (max-width: 992px) {
  body {
    background-color: blue;
  }
}

/* 横幅600px以下の画面では、背景色をオリーブ色にする */

@media screen and (max-width: 600px) {
  body {
    background-color: olive;
  }
}

また下記のようにコンテンツを含むDIV要素の幅をスマホでは100%にするなどのメディアクエリも良く利用されます。

@media screen and (max-width: 600px) {
  .columndiv {
    width: 100%;
  }
}

このコンテンツは役に立ちましたか?

関連コンテンツ

コメントを投稿する


上の計算式の答えを入力してください