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番アクセスがある端末に合わせちゃうのも有りかと思います。

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

 

急上昇の記事

トークライバー画像

アプリ

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

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

ライブアプリ

アプリ 比較・まとめ

【2020年】最新の稼げるライブ配信アプリはどれ?

2020年11月現在、コロナ禍の影響もあり、自宅にいながらお小遣い稼ぎが可能なライブ配信アプリが物凄い勢いで普及しています。お小遣い稼ぎや副業としてアプリに参加している『ライバー』増えている一方で、自 ...

ビゴライブロゴ

アプリ

【BIGO LIVE】ビゴライブとは?稼げるライブ配信アプリの使い方を徹底攻略!

2020/11/27    , ,

ライブ配信アプリの中でも 稼げるライブ配信優秀なアプリ使いやすい操作が簡単 などと評判の良い 【BIGO LIVE】(ビゴライブ)   最近とにかくビゴライブの噂を耳にするので、どんなライブ ...

ショッピファイの公式サイト

インターネット

最近噂のShopify(ショッピファイ)とは…?使い方から費用まで

最近話題の『Shopify(ショッピファイ)』   皆様ご存じですか?   名前は聞いた事があるけど、細かいことまで知っているって人はまだまだ少ないのではないでしょうか・・・ &n ...

イリアムのロゴ

アプリ

人気でハマる人が続出…?ライブ配信アプリの【IRIAM】イリアム

2020/12/2    ,

誰でもキャラクターになってライブ配信を行うコトができる   【IRIAM】イリアム   一般的なよくあるライブ配信アプリでは、ライブ配信者が自分の顔をスマートフォンにかざして、テレ ...

よく読まれている記事

-WordPress
-, , ,

© 2021 wright BLOG