PCからCocoonで作成したブログをスマホでの表示画面の確認方法

PCでCocoonのテーマを使ってブログを作成する時など、プレビューで確認すると思いますが、プレビュー画面はパソコンで表示した時の画面なのでスマホの画面ではどう表示されているのかわかりません。

パソコンとスマホの画面では画面サイズが異なるので表示レイアウトが変わります。そのためスマホの画面は意外にイメージと違った画面表示がされていることが多々あります。

スマホ画面の困りごと

など、実際にサイトの検索流入はスマホからも多く閲覧しているのでスマホ画面のプレビュー確認は必須作業とも言えます。

そんなイメージと異なったスマホ画面のブログをアップする前にスマホの表示プレビューも必ず確認してからアップする必要があります。

今回の記事ではWordPressの無料テーマ「Cocoon」で作ったブログを「スマホの画面のプレビュー」の確認方法を解説します。

実際にWordPressのテーマを使用していればやり方は同じですが、今回はテーマ「Cocoon」を「クラシックエディター」使用した手順です。クラシックエディターの詳細は以下の記事にまとめています。

スマホ画面のプレビュー確認はとても簡単な操作なので是非ご活用ください。

私は最初からブログは「Cocoon」のテーマを使用してブログをアップしています。初心者でも使いやすく無料テーマですが多機能で多くのブログユーザーに利用されている優良テーマです。まだCocoonを使ったことがないかたは下記の記事内の公式サイトからダウンロードが可能ですので是非活用してみてください。

目次よりジャンプ

パソコンからスマホ画面のプレビューを確認する手順

パソコンからスマホ画面のプレビューの確認方法は非常に簡単です。

まず以下の手順を行います。

▼スマホ画面確認手順▼

スマホ画面のプレビュー確認手順はコレだけです。

次に画像付きでわかりやすいように説明します。

こちらはWordPressの投稿編集ページ（クラシックエディター使用）の右上あたり下記の画像のような項目があります。

まず「変更をプレビュー」をクリックします。

サイトのプレビュー画面が表示されたら

左上の「カスタマイズ」をクリックします。

左下あたりに左から「💻パソコン」「📱タブレット」「📱スマホ」の順にアイコン並んでいます。

「📱スマホ」のアイコンをクリックします。

最初は「パソコン」のプレビュー画面でしたが「スマホ」アイコンをクリックするだけで「スマホのプレビュー」画面に瞬時に切り替わります。

スマホのプレビューも画面スクロールできるので作成したブログのレイアウトの確認ができます。

スマホ画面のレイアウトが変だったりや文字化けなどを発見したら投稿編集画面へ戻って修正しましょう。

修正が完了したら再度プレビューで確認します。