WordPress

WordPress スマホ表示プレビュー画面をPCで確認する【最短1分で解決します】

2020年6月30日

PCで編集したWordPressのプレビュー画面をPC上でスマホ表示できないかな。

 

こんな悩みを解決したいと思います。

 

こんにちは、ユキトモです。

WordPressや無料ブログでサイト作成するときは、PCを使って作る方が大勢いらっしゃると思います。

完成したらPCとスマホで両方、表示の確認をしますよね?

スマホをいちいち取り出して表示を確認するのは面倒ですよね。

PC上で確認できれば便利です。

その方法をご紹介します。

 

Google Chromeから確認する方法

 

プラグインをいれると、サイトの動きが鈍くなる傾向にあるので、できたらプラグインを増やしたくない方に最適な方法です。

この方法は記事を公開した後に確認する方法となります。

Google Chromeがすでにインストール済みの方はすぐに確認できます!

Google Chromeをインストールしていない場合は事前にインストールしておいて下さいね。

step
1
Google Chromeで調べたいサイトを表示させます。

右上の点をクリックして、「その他のツール」→「デベロッパーツール」を選びます。

 

step
2
スマホとタブレットのアイコンをクリックします。

 

 

step
3
スマホの機種を選択するとさらに詳細に調べることができます。

 

step
4
スマホを横にしたときの表示画面の表示は下記のボタンをクリックします。

 

Google Chromeがすでにインストールされている場合はすぐに確認できるのでオススメです!

 

Blisk(ブリスク)をインストールしてスマホを表示

 

Blisk(ブリスク)とは、Web制作者などがよく使用するWebブラウザです。

Google Chromeと同様にブラウザ上に表示して確認します。

スマホ以外にも、デスクトップパソコン、タブレットPCなどの表示状態を確認することができます。

 

step
1
Blisk(ブリスク)をダウンロードします。

Blisk(ブリスク)公式

https://blisk.io/

 

step
2
サイトが表示されたら「DOWNLOAD BLISK」をクリックします。

 

step
3
自分が使っているOSをえらんで「DOWNLOAD BLISK」をクリックします。

 

自分のPCはWindowsなので、真ん中のアイコンを選んでボタンをクリックしました。

Macは左のアイコン、Linuxは右のアイコンを選んでクリックして下さい。

 

step
4
適当な場所(デスクトップなど)にファイルを保存します。

 

step
5
「Blisk_installer.exe」をダブルクリックします。

インストールが始まります。自分の環境ではインストールされるまで数分かかりました。

 

step
6
インストールが完了したら、検索窓に調べたいサイトのURLを入力して下さい。

 

 

step
7
サイトが表示されます。

左側のエリアに表示を確認したいスマホを選んでダブルクリックすると画面イメージが表示されます。

 

 

step
8
サイトが表示されます。

スマホの画面イメージが表示されます。

画面の左側がスマホの表示、右側がパソコンとなっています。

 

 

上記の画像だと緑色のチェックが入っているiPhone8になっています。

 

step
9
スマホを横にした場合の表示もプレビュー出来ます。

 

 

このBliskは、選べる端末がほぼ全部あるので、とても便利です。

サムスンもありますね。

以上がBliskでのスマホ表示を確認する方法です。

 

プラグイン「Responsive Post Preview」を使用する

 

Google Chrome、Bliskを使用する方法は記事を「公開」してから確認でしたが、

プラグインを使うと下書きしてから確認できます。

以下、やり方を説明します。

step
1
プラグインをダウンロードします。

管理画面から「プラグイン新規追加」の検索かけてもヒットしなかったので、「Responsive Post Preview」からダウンロードして下さい。

 

step
1
デスクトップなどどこでもいいので、ファイルを保存します。

 

step
1
管理画面から「プラグイン」→「新規追加」をクリックします。

 

step
1
プラグインをアップデートします。

 

 

step
1
参照ボタンをクリックします。

 

step
1
ファイルを選択出来たら「今すぐインストール」ボタンをクリックします。

 

 

step
1
インストールできたこと確認。

 

step
1
管理画面から「投稿」→記事の「編集」を選ぶ

下書きボタンをクリックすると、「変更をプレビュー」の下にスマホとタブレットPCの絵が表示されています。

このアイコンをクリックすると実際の表示が確認できます。

 

プレビューが若干異なる場合の対処方法

step
1
管理画面から「プラグイン」→「プラグインの編集(プラグインエディター)」を選びます。

 

 

step
1
「理解しました」ボタンをクリックします。

step
1
width の値を変更

私の環境では、96行目にありました。

~width="320px"~とあるので、数値を増減して調整して表示の具合を確認してみて下さい。

 

 

以上がプラグインを使ってスマートフォン表示を確認する方法でした。

他にもパソコンからスマホの表示確認ができるプラグインがあります。

しかし、「Responsive Post Preview」がとても優秀なのでオススメです。

 

まとめ

設定方法の説明は以上です。

最後まで読んでいただきありがとうございました。

スポンサーリンク

-WordPress
-,

© 2020 Yukitomo Blog