WordPressの記事をスマホでプレビューする方法｜公開前に崩れを確認する3つのやり方

「PCで見たときは綺麗だったのに、公開したらスマホで画像がはみ出していた」。WordPressでブログを書いていると、一度はあるのではないでしょうか。

この記事では、WordPressの記事を公開する前にスマホ表示で確認する方法を、目的別に3つ紹介します。あわせて、スマホで必ず見ておきたいチェックポイントもまとめます。

※メニューの名前や場所は、使っているエディタ（ブロックエディタ／クラシックエディタ）やテーマ、WordPressのバージョンによって異なる場合があります。

先にポイント：3つの方法の使い分け

目的に合わせて選ぶと迷いません。

1. ざっと確認したいなら、エディタのプレビューにあるモバイル表示（ブロックエディタ）
2. 実際の見え方を確認したいなら、スマホの管理画面からプレビューを開く
3. 機種ごとの画面幅を試したいなら、Chromeのデベロッパーツール

なぜスマホで確認する必要があるのか

パソコンの画面は横に広く、スマホは縦に細長いため、同じ記事でも見え方が大きく変わります。特に次のような箇所は、PCでは問題なくても、スマホで崩れやすい部分です。

横幅の広い表、大きな画像、長いURLやコード、そして広告の位置です。公開してから気づくと、読者に崩れた状態を見せてしまうため、公開前にひと通り確認しておくのが安心です。

スマホ表示を確認する3つの方法

1. エディタのプレビューでモバイル表示にする（ブロックエディタ）

ブロックエディタで記事を書いている場合は、編集画面の中で表示を切り替えられます（WordPress 5.5以降）。いちばん手軽な方法です。

手順：編集画面の右上にある「プレビュー」を押す → 「モバイル」を選ぶ
ほかの選択肢：「デスクトップ」「タブレット」のほか、「新しいタブでプレビュー」も選べます

「新しいタブでプレビュー」を選ぶと、実際のサイトに近い表示で確認できます。モバイル表示の画面はエディタ内の目安なので、細かく確認したいときは、新しいタブのほうを使いましょう。

クラシックエディタを使っている場合は、この切り替えがありません。右側の「公開」ボックスにある「プレビュー」ボタンを押すと、新しいタブでプレビューが開きます。スマホ幅での確認は、次の方法2か方法3で行ってください。

2. スマホの管理画面からプレビューを開いて実機で確認する

いちばん確実なのは、実際のスマホで見ることです。文字の大きさや、タップしやすさまで確認できます。

手順：スマホのブラウザでサイトの管理画面にログインする → 「投稿」→「投稿一覧」を開く → 確認したい下書きのタイトルの右にある矢印（「詳細を追加表示」ボタン）を押す → 表示された「プレビュー」を開く

パソコンでは、投稿一覧の記事にカーソルを合わせると「プレビュー」のリンクが出ます。スマホではカーソルを合わせられないため、矢印のボタンで表示します。タイトルそのものを押すと編集画面が開くので、注意してください。

下書きのプレビューは、ログインしているときだけ見られます。スマホ側でも、同じアカウントでログインしておく必要があります。ログインしていないと、404のページが出ることがあります。

3. Chromeのデベロッパーツールで機種ごとの幅を試す

パソコンのChromeだけで、スマホの画面幅を再現できる方法です。複数の機種の幅を、切り替えて試せます。

手順：プレビューを開いたページで右クリック →「検証」→ 表示された画面の「デバイスツールバーの切り替え」ボタンを押す
ショートカット：デベロッパーツールを開いた状態で、Windowsは Ctrl + Shift + M、Macは Command + Shift + M

画面の上に出るメニューで、機種の選択や、横向き表示への切り替えができます。ただし、あくまでパソコン上の再現なので、フォントの見え方などは実機と少し違うことがあります。最終確認は、方法2で実機を見るのがおすすめです。

スマホで必ず見たいチェックポイント

プレビューを開いたら、次の6点を順に見てみましょう。

まとめ

スマホでの確認は、目的に合わせて使い分けるのがおすすめです。まずはエディタのプレビューでざっと確認し、気になるときはスマホの実機で見て、機種ごとの幅を試したいときはデベロッパーツールを使う、という流れにすると、崩れた状態で公開してしまうことを減らせます。

毎回すべてを確認する必要はありません。表や画像を多く入れた記事のときだけでも、公開前にスマホで見る習慣をつけてみてください。