WordPress

WordPressスマホ表示プレビュー画面をパソコンで確認する方法

PCからスマホプレビュー

突然なんですが…
このブログサイトは、パソコンからのアクセスよりも、圧倒的にスマートフォンからのアクセス数が多いです。てか、スマートフォンからのアクセスを狙って運営しております。

 

皆さんのサイトは、どうなんでしょうか?

ちょっと前までは「ホームページをスマホ対応にっ!」みたいな事をやたら聞きましたが、最近だとスマホに対応していないサイトを探す方が困難な気がします。

 

 

そんなこんなで、WordPressでブログなどの運営を行っている人向けな記事です。

WordPressで記事を投稿して、スマホからの表示は毎回確認されていますか…?毎度毎度で、記事を公開してからお手持ちのスマートフォンで表示を確認してたりしませんか?

 

それが面倒くさいと思った方に向けた機能の、3パターンをご紹介。

パソコンからでも、スマートフォンのプレビュー表示(見栄え)が確認できるツールです。

 

スポンサードサーチ

WordPressプラグイン「Responsive Post Preview」

bliskブリスク使い方2

こちらは、WordPress専用プラグインをインストールする方法です。

まずは、プラグインをダウンロード。

管理画面から「プラグイン新規追加」の検索かけてもヒットしなかったので、ダウンロードリンク張っておきます。こちらからどうぞ(Responsive Post Preview

 

プラグインをダウンロードします。任意の場所にzipファイルを一旦保存。保存が完了したら、プラグイン新規追加の画面で「ファイルのアップロード

先程ダウンロードしたファイルを選択して、アップロードしましょう。

自分のWordPressにインストールできたら【有効化】をして完了です!

特に設定も必要なく利用が出来ます。

 

Responsive Post Previewの使い方

基本的な使い方からご紹介。

使い方としては、ブログ記事を一旦「下書き」しないと、スマホ表示を確認する事ができません。

公開は、しなくて大丈夫です。下書きです。

 

とりあえず、プラグインをインストールして有効化したら、記事投稿で何かテスト文でも記載して「下書き」して下さい。

すると、画面右側の【公開】の下にスマートフォン&タブレットのアイコンが自動で表示されるようになります。

こんな感じです⇓ ⇓ ⇓

スマホ表示プレビュー

この、スマートフォン or タブレットのアイコンをクリックすれば、実際の表示が確認できます。

ただ、記事を更新したら、その都度「下書き」をしないと最新のプレビューが確認できませんので要注意!

 

Responsive Post Previewの注意点

パソコンからのサイズ感と、スマートフォンでの表示プレビューが若干異なる場合があります。

多分、スマホの機種によって違うカモ…

 

そんな時の対処法です。

WordPressの管理画面から「プラグインプラグイン編集

編集するプラグイン「Responsive Post Preview」を選んで、サイズを変更させれば任意のサイズ表示に切り替わります。

下記の画像のの手順でやれば解決できます。

スマホプレビューをパソコンから表示させて、サイズが若干異なっていたら編集してみてください。

スマホ表示プレビュー2

以上がプラグインをインストールして、スマートフォン表示を確認する手順です。他にもパソコンからスマホの表示確認ができるプラグインがありますが、「Responsive Post Preview」が非常に優秀です。

 

Google Chromeから確認する方法

続いて、プラグインではなくWebからの検索する方法です。

プラグインいれると、重くなる疑惑があるので、無駄なプラグインをインストールしたくない人向けな方法です。

ですが、記事を公開した後に確認する方法となります。

※シークレットモードでも可能。

 

まずは、Google Chromeで調べたいサイトを表示させます。

ワードプレススマホ表示確認

その他のツール」⇒「デベロッパーツールを開きます。

画像に記載してある通り、ショートカットからは「Ctrl+Shift+I」で開けます。

 

開いたら、スマホとタブレットのアイコンをクリック。

これね⇓ ⇓ ⇓

ワードプレススマホ表示確認2

ここをクリックすれば、スマホの表示プレビューがパソコン上に表示されます。

 

ちなみに下記の画像のように、スマホの機種カテゴリをクリックすれば、機種別で細かく調べることが可能となっています。

ワードプレススマホ表示確認3

これ、非常に便利なのでやってトライ!

スマホが手元になくてもできるので、GOODです。

 

Blisk(ブリスク)を使ってスマホ表示を確認

blisk使い方(ブリスク)

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

ダウンロードして使用するのですが、1番便利なパソコンからのスマホ表示確認方法だと思います。1度パソコンにダウンロードすれば、すぐに使えるようになるし。

スマホ以外にも、タブレット、デスクトップ等パソコンなどの表示確認が可能。

 

Blisk(ブリスク)の使い方

Bliskで表示確認をする使い方をご紹介。

まずは、ダウンロードします。

Blisk(ブリスク)公式
https://blisk.io/

 

サイトを開いたら【DOWNLOAD BLISK】をクリック

blisk使い方(ブリスク)2

クリックすると、osが表示されます。

自分の使っているosを選択して【DOWNLOAD BLISK】をクリック。
これでダウンロードが開始されます。

 

ダウンロードが完了したら、Bliskを起動します。

起動したら、検索窓に調べたいサイトのURLを入力。ココです⇓ ⇓ ⇓

blisk使い方(ブリスク)3

調べたいサイトを入力したら、サイトが表示されます。

画面の左側がスマホの表示、右側がパソコンとなっています。(変更も可能)

こんな感じの画面です⇓ ⇓ ⇓

bliskブリスク使い方

 

表示を確認したい端末は、画面の左側からクリックで変更が可能。見づらいですが、上記の画像だと緑色のチェックが入っているiPhone8になっています。

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

 

このBliskは、選べる端末がほぼ全部あるので、困ることないです。

サムスンとかまであるし…

 

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

 

まとめ

好きなのをチョイスしてやってみてね。

どの端末からのアクセスが多いのは、アナリティクスから情報収集できます。アナリティクスで調べて、1番アクセスがある端末に合わせちゃうのも有りかと思います。

スマホで、一々チェックするのを卒業しましょう!

 

急上昇の記事

マシェバラトークラーバー

アプリ

【マシェバラ・トークアプリ】配信用ライバーで気軽にお小遣い稼ぎ!

2018/11/20    , ,

【女性必見】 お小遣い稼ぎが出来ちゃう。マシェバラトークアプリをご紹介!   ライブ配信で、報酬ゲット!ってゆーアプリです。 使い方や、どんなアプリなのかを徹底解説していきます! &nbsp ...

リップスアプリ

アプリ

【LIPS】コスメ・メイク好き女子必見の無料アプリ(リップス)とは…?使い方を徹底調査。

2019/5/27    , ,

  LIPS(リップス)   コスメ・メイク好きが、こぞって利用している無料アプリ LIPS(リップス) 美容系で有名なYouTuber、TikToker、インスタグラマーなどの多 ...

cartuneapp4

アプリ

CARTUNE(カーチューン)車好きが集まるSNSアプリ

2018/12/1    

CARTUNE(カーチューン)   車好きな人が集まるSNSコミュニティアプリのCARTUNE(カーチューン)   今までにも車関連のアプリやSNSといった車好きが集まるコミュニテ ...

女性人気アプリ

アプリ

女性に人気の話題アプリをまとめて紹介 / これがトレンド

女性向けに人気のアプリを まとめて紹介!!   スポンサードサーチ ■ 美容系アプリ LIPS(リップス) コスメ・メイク好き女子に人気の 美容アプリです。   最近ではローラさん ...

ホンネアプリロゴ

アプリ

【HONNE(ホンネ)】匿名の悩み相談ができるヒマつぶし無料アプリの使い方

2018/12/25    , , ,

誰か悩みを聞いてぇー 誰でもイイから、かまちょー 相談にのってぇー そんな時にバッチリなアプリ【HONNE】     「みんなの本音、覗きみちゃう」がキャッチフレーズな完全ヒマつぶ ...

アプリ

【ARINE(アリネ)】女性のための美容まとめ無料アプリ。使い方から評判などを解説!

2018/12/3    

キレイになりたい。 可愛くなりたい。 オシャレになりたい。 美容が大好き。 すべての女性の為の、美容アプリ【ARINE(アリネ)】   美容に関する全般(ヘア・メイク・コスメ・ファッション・ ...

よく読まれている記事

-WordPress
-, , ,

Copyright© wright BLOG , 2019 All Rights Reserved.