ひろやです。

疑問

WordPressでスマホ画面をプレビューする方法はあるのかな?

現在そんな疑問をお持ちではありませんか?

確かに投稿してからわざわざ自分のスマホ画面でどう表示されているか見るのって、かなり手間ですよね。

もうすでに記事は投稿してるのに自分のスマホ画面を見て編集して、またスマホ画面を見て、編集してって・・・かなりめんどい!

僕も最初はそういう風に確認していましたが、実は超簡単にWordPressでスマホ画面をプレビューする方法があったんですね。

そんなわけで今回はWordPressでスマホ画面をプレビューする手順について解説していきます。

ちなみに この方法であればWordPressに限らず、あらゆるサイトでスマホ表示にプレビューできます。

Sponsored Links

WordPressでスマホ画面をプレビューするのは簡単

WordPressでスマホ画面をプレビューする方法は、すごく簡単です。

その方法はパソコンのブラウザをChrome(クローム)」にするだけ。

疑問

Chromeってなに?

というとGoogleが提供しているブラウザのことで、簡単に言うと「インターネットを見るためのソフト」のことです。

Windowsであれば「Microsoft Edge」に。

Macであれば「Safari」にあたるものですね。

すでにChromeを使っている場合は問題ありませんが、もし別のブラウザを使っている場合はChromeをダウンロードしてインストールしましょう。

Chromeのダウンロードはこちらから可能です。

Chromeをダウンロードする。

WordPressでスマホ画面をプレビューする手順

Chromeがインストールできたことを前提に解説していきますね。

パソコンのデスクトップにChromeが表示されたらクリックして起動しましょう。

 

自分のWordPressにログインして、スマホ画面にしたい記事のプレビューを表示させます。

WordPressの投稿画面で「プレビュー」をクリックして・・・

 

まずは普通にパソコン画面のプレビューを表示します。

 

プレビュー記事の空白部分あたりで「右クリック検証」をクリックしましょう。

「検証」が出てこない場合はブログ上のどこかで右クリックを繰り返してみてください。

 

すると右にコードが出てくるので上側にある「スマホ・タブレット」のアイコンをクリックします。

 

すると記事の上に「Respnsive」と現われるので、この部分をクリックしましょう。

 

するとプルダウンでiPhone等のスマホ機種が並ぶので、スマホ表示したい機種をクリックして選びます。

 

iPhone Xにしたらこんな感じ。

プレビューがスマホ画面にバッチリ変わりましたね。

 

ちなみにスマホ画面の大きさは「◯%」の部分をクリックしたらパーセントの種類が表示されます。

見やすいパーセントを選んでスマホ画面を確認しましょう。

 

もし閉じたい場合は画面右側の「X」をクリックすればOKです。

ブラウザ自体を閉じても構いません。

 

解説は以上になります。

まとめ

WordPressでスマホ画面をプレビューする方法について解説しました。

記事タイトルにもありますが、この方法はWordPressに限らず色んなサイトでスマホ画面をプレビューできます。

だから、はてなブログとかでも応用できたりすると思うので、ぜひ試してみてくださいね。

以上。

ひろやでした。

無料のブログコミュニティに参加してみませんか?

メンバー全員が協力・成長していきながら 人生をハッピーにしていけるようなブログコミュニティを始めました。

その名も「Happy Blog Life(ハッピーブログライフ)」です。

僕が運営するブログコミュニティに興味があれば ぜひ以下のページから一度詳細をご覧になってください。

ブログコミュニティ「Happy Blog Life」の詳細を確認する。