Twitterはこちら instagramはコチラ

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

スマホのプレビュー画面の確認方法 Cocoon
スポンサーリンク

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

 

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

 

スマホ画面の困りごと
  • パソコンのプレビューと微妙に表示が違う
  • 枠からボタンがはみ出していた
  • スマホからは思っていた文字サイズでなかった
  • PCの表示は良いのにスマホからのイメージは違った

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

 

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

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

 

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

 

Word Press(ワードプレス)初期設定_Classic Editer(クラシックエディター)【初心者向け】

 

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

 

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

 

「初心者ブログ向け」初めにWordPressのテーマを決めよう【Cocoon】

 

スポンサーリンク

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

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

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

▼スマホ画面確認手順▼
  1. 「プレビュー」をクリック
  2. 「カスタマイズ」をクリック
  3. 「スマホアイコン」をクリック

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

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

WordPress「プレビュー」をクリック

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

変更をプレビューをクリック

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

「カスタマイズ」をクリック

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

左上のカスタマイズをクリック_

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

 

「スマホアイコン」をクリック

左下にあるスマホのアイコンをクリック

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

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

スマホのプレビューを確認する

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

スマホ画面のプレビュー確認_

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

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

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

 

 

 

コメント

タイトルとURLをコピーしました