ワードプレスで記事作成中にスマホやタブレット表示でレイアウトが崩れていないかチェックしたい時の一番簡単で便利なプレビュー表示方法をお伝えします。
プレビュー画面を開く
ここではChromeを使用した方法になります。まずワードプレスの記事作成画面からプレビューをクリックし通常のプレビューを別ウインドウに表示させます。
これで別ウインドウにプレビューが表示されたと思います。
デベロッパーツールを開く
プレビュー表示された画面を開いたままショートカットキーでデベロッパーツールを開きます。ショートカットキーは「Ctrl＋Shift＋I」です。
Ctrl＋Shift＋I
そうすると画面表示が変わって右半分に見慣れない画面と、左半分にこのような画面が出ると思います。※右側の画面は今回は無視です。チェックするのは左側だけです。
基本はこれで終了です。後は特定の機種でどのように表示されるかなども選べます。
様々な機種のプレビュー表示
左画面の上部に下のような項目を選べるところがあります。この画面では現在「Responsive」が選択されています。
▼印をクリックするといろいろな機種（画面幅）を特定してのプレビュー表示が選択できます。
「Responsive」選択でレイアウトが崩れていなければその他でも基本は問題ないですが、このように特定の機種を選択して確認も出来ます。
まとめ
ワードプレスの記事作成画面からプレビューを別ウィンドウで開き、ショートカットキー「Ctrl＋Shift＋I」だけですぐにスマホやタブレットでのプレビュー確認が出来て便利です。
サイトのレスポンシブル化はグーグルが進めているモバイルフレンドリー化対策にも重要で、対応していないとサイトの検索順位に悪影響を与えますので注意しましょう。
