パソコンでWordPress等ブログやWebサイトのスマホ表示確認のやり方とは?

パソコンでWordPress等ブログやWebサイトのスマホ表示確認のやり方の手順画像_5ブログ運用
スポンサーリンク

先日、ブログ運営している友人と、ブログ運営について話をしていましたが、その中で、友人が運営しているブログのアクセス媒体が

  • パソコン
  • スマートフォン

と、異なることで画面表示レイアウトが崩れてしまうという話を聞きました。

画面表示レイアウトが崩れた際の修正方法はわかるものの、画面表示レイアウト崩れが

  • 起きていないか
  • 修正が正しく反映されているか

をスマホで都度確認するのが面倒くさいとのことでした。

基本的に画面表示レイアウト修正はパソコンで行うので、スマホの画面表示レイアウト確認もパソコンで行った方が楽ですよね!?

その悩みを解決してくれるのがブラウザ「GoogleChrome」です。

簡単にスマホの画面表示レイアウト確認ができます。

下記に画像付き手順をまとめましたので、同じ悩みを抱えている方は参考にしてください。

【パソコンでWordPress等ブログやWebサイトのスマホ表示確認の手順書について】

  • 本手順の対象者:パソコンで運営しているブログやWebサイトのスマートフォンでアクセスした際の画面レイアウト崩れや見やすさを確認したい人
  • 前提条件:パソコンにGoogleChromeをインストール済みであること。
  • 設定時間目安:1分
  • 手順書作成日:2019年8月14日

【パソコンでWordPress等ブログやWebサイトのスマホ表示確認の手順書】

GoogleChromeを起動し、スマホ表示確認したいブログやサイトへアクセス後、キーボードのF12キーを押下します。

パソコンでWordPress等ブログやWebサイトのスマホ表示確認のやり方の手順画像_1

DevToolsメニューの左側から2つ目のメニューを押下します。

パソコンでWordPress等ブログやWebサイトのスマホ表示確認のやり方の手順画像_2

確認したいスマホの種類を下記画像赤枠箇所より選択します。

パソコンでWordPress等ブログやWebサイトのスマホ表示確認のやり方の手順画像_3

iPhone Xを選択します。
※iPhone X以外のスマホ表示確認を行いたい場合、そのスマホ端末を選択下さい。
スマホ表示確認したい端末がリストに表示されない場合、類似端末や画面表示の縦×横のサイズが近しい端末を選択しましょう。

パソコンでWordPress等ブログやWebサイトのスマホ表示確認のやり方の手順画像_4

iPhone Xでの画面表示確認を目視にて行います。

パソコンでWordPress等ブログやWebサイトのスマホ表示確認のやり方の手順画像_5

その他にも画像付きの手順で「ブログのカスタマイズ方法」をまとめています。

パソコンが苦手な方でも簡単にできますので、ご一読ください!

コメント

dosankokazu

北海道札幌市在住の生粋道産子です。
パパ歴2年目。
子育て、北海道、グルメ、体験談、エンタメ(映画含む)、日常生活で役立つ情報等を発信します。
娘の笑顔を糧に日々奮闘。

dosankokazuをフォローする