突然なんですが…
このブログサイトは、パソコンからのアクセスよりも、圧倒的にスマートフォンからのアクセス数が多いです。てか、スマートフォンからのアクセスを狙って運営しております。
皆さんのサイトは、どうなんでしょうか？
ちょっと前までは「ホームページをスマホ対応にっ！」みたいな事をやたら聞きましたが、最近だとスマホに対応していないサイトを探す方が困難な気がします。
そんなこんなで、WordPressでブログなどの運営を行っている人向けな記事です。
WordPressで記事を投稿して、スマホからの表示は毎回確認されていますか…？毎度毎度で、記事を公開してからお手持ちのスマートフォンで表示を確認してたりしませんか？
それが面倒くさいと思った方に向けた機能の、３パターンをご紹介。
パソコンからでも、スマートフォンのプレビュー表示（見栄え）が確認できるツールです。
WordPressプラグイン「Responsive Post Preview」
こちらは、WordPress専用プラグインをインストールする方法です。
まずは、プラグインをダウンロード。
管理画面から「プラグイン新規追加」の検索かけてもヒットしなかったので、ダウンロードリンク張っておきます。こちらからどうぞ（Responsive Post Preview）
プラグインをダウンロードします。任意の場所にzipファイルを一旦保存。保存が完了したら、プラグイン新規追加の画面で「ファイルのアップロード」
先程ダウンロードしたファイルを選択して、アップロードしましょう。
自分のWordPressにインストールできたら【有効化】をして完了です！
特に設定も必要なく利用が出来ます。
Responsive Post Previewの使い方
基本的な使い方からご紹介。
使い方としては、ブログ記事を一旦「下書き」しないと、スマホ表示を確認する事ができません。
公開は、しなくて大丈夫です。下書きです。
とりあえず、プラグインをインストールして有効化したら、記事投稿で何かテスト文でも記載して「下書き」して下さい。
すると、画面右側の【公開】の下にスマートフォン＆タブレットのアイコンが自動で表示されるようになります。
こんな感じです⇓ ⇓ ⇓
この、スマートフォン or タブレットのアイコンをクリックすれば、実際の表示が確認できます。
ただ、記事を更新したら、その都度「下書き」をしないと最新のプレビューが確認できませんので要注意！
Responsive Post Previewの注意点
パソコンからのサイズ感と、スマートフォンでの表示プレビューが若干異なる場合があります。
多分、スマホの機種によって違うカモ…
そんな時の対処法です。
WordPressの管理画面から「プラグイン」⇒「プラグイン編集」
編集するプラグイン「Responsive Post Preview」を選んで、サイズを変更させれば任意のサイズ表示に切り替わります。
下記の画像の① ⇒ ② ⇒ ③の手順でやれば解決できます。
スマホプレビューをパソコンから表示させて、サイズが若干異なっていたら編集してみてください。
以上がプラグインをインストールして、スマートフォン表示を確認する手順です。他にもパソコンからスマホの表示確認ができるプラグインがありますが、「Responsive Post Preview」が非常に優秀です。
Google Chromeから確認する方法
続いて、プラグインではなくWebからの検索する方法です。
プラグインいれると、重くなる疑惑があるので、無駄なプラグインをインストールしたくない人向けな方法です。
ですが、記事を公開した後に確認する方法となります。
※シークレットモードでも可能。
まずは、Google Chromeで調べたいサイトを表示させます。
「その他のツール」⇒「デベロッパーツール」を開きます。
画像に記載してある通り、ショートカットからは「Ctrl+Shift+I」で開けます。
開いたら、スマホとタブレットのアイコンをクリック。
これね⇓ ⇓ ⇓
ここをクリックすれば、スマホの表示プレビューがパソコン上に表示されます。
ちなみに下記の画像のように、スマホの機種カテゴリをクリックすれば、機種別で細かく調べることが可能となっています。
これ、非常に便利なのでやってトライ！
スマホが手元になくてもできるので、GOODです。
Blisk（ブリスク）を使ってスマホ表示を確認
Blisk（ブリスク）とは、Web制作者などがよく使用するWebブラウザといった感じ。
ダウンロードして使用するのですが、１番便利なパソコンからのスマホ表示確認方法だと思います。１度パソコンにダウンロードすれば、すぐに使えるようになるし。
スマホ以外にも、タブレット、デスクトップ等パソコンなどの表示確認が可能。
Blisk（ブリスク）の使い方
Bliskで表示確認をする使い方をご紹介。
まずは、ダウンロードします。
Blisk（ブリスク）公式
https://blisk.io/
サイトを開いたら【DOWNLOAD BLISK】をクリック
クリックすると、osが表示されます。
自分の使っているosを選択して【DOWNLOAD BLISK】をクリック。
これでダウンロードが開始されます。
ダウンロードが完了したら、Bliskを起動します。
起動したら、検索窓に調べたいサイトのURLを入力。ココです⇓ ⇓ ⇓
調べたいサイトを入力したら、サイトが表示されます。
画面の左側がスマホの表示、右側がパソコンとなっています。（変更も可能）
こんな感じの画面です⇓ ⇓ ⇓
表示を確認したい端末は、画面の左側からクリックで変更が可能。見づらいですが、上記の画像だと緑色のチェックが入っているiPhone8になっています。
スマホを横にした場合の表示もプレビュー出来ちゃいます。
このBliskは、選べる端末がほぼ全部あるので、困ることないです。
サムスンとかまであるし…
以上がBliskでのスマホ表示を確認する方法です。
まとめ
好きなのをチョイスしてやってみてね。
どの端末からのアクセスが多いのは、アナリティクスから情報収集できます。アナリティクスで調べて、１番アクセスがある端末に合わせちゃうのも有りかと思います。
スマホで、一々チェックするのを卒業しましょう！
