こんな悩みを解決したいと思います。
こんにちは、ユキトモです。
WordPressや無料ブログでサイト作成するときは、PCを使って作る方が大勢いらっしゃると思います。
完成したらPCとスマホで両方、表示の確認をしますよね？
スマホをいちいち取り出して表示を確認するのは面倒ですよね。
PC上で確認できれば便利です。
その方法をご紹介します。
Google Chromeから確認する方法
プラグインをいれると、サイトの動きが鈍くなる傾向にあるので、できたらプラグインを増やしたくない方に最適な方法です。
この方法は記事を公開した後に確認する方法となります。
Google Chromeがすでにインストール済みの方はすぐに確認できます！
Google Chromeをインストールしていない場合は事前にインストールしておいて下さいね。
step
1Google Chromeで調べたいサイトを表示させます。
右上の点をクリックして、「その他のツール」→「デベロッパーツール」を選びます。
step
2スマホとタブレットのアイコンをクリックします。
step
3スマホの機種を選択するとさらに詳細に調べることができます。
step
4スマホを横にしたときの表示画面の表示は下記のボタンをクリックします。
Google Chromeがすでにインストールされている場合はすぐに確認できるのでオススメです！
Blisk(ブリスク)をインストールしてスマホを表示
Blisk(ブリスク)とは、Web制作者などがよく使用するWebブラウザです。
Google Chromeと同様にブラウザ上に表示して確認します。
スマホ以外にも、デスクトップパソコン、タブレットPCなどの表示状態を確認することができます。
step
1Blisk(ブリスク)をダウンロードします。
Blisk(ブリスク)公式
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
1width の値を変更
私の環境では、96行目にありました。
～width="320px"～とあるので、数値を増減して調整して表示の具合を確認してみて下さい。
以上がプラグインを使ってスマートフォン表示を確認する方法でした。
他にもパソコンからスマホの表示確認ができるプラグインがあります。
しかし、「Responsive Post Preview」がとても優秀なのでオススメです。
まとめ
設定方法の説明は以上です。
最後まで読んでいただきありがとうございました。