PC（パソコン)でスマホの表示が確認できれば楽ちんですよね。
PCで書いた記事がスマホでどんな風に表示されているか確認する作業はブロガーにとってとても重要なことです。
当ブログも訪問者の半数以上がスマホから訪れてくれています
パソコンだとちゃんと表示されてても、スマホだとすごい見づらいって時が…
記事を投稿した後に自分のスマホで表示確認すればまあできるっちゃできるんですけど、そんなことしなくても超簡単にパソコンでスマホ表示確認できます。
本記事では、グーグルクロームでスマホ表示にする方法とワードプレスでスマホ表示にする方法をそれぞれ画像付きで詳しく解説していきます。
今回ご紹介するテクニックを使ってパソコンでもスマホでも見やすいサイトを作ってください！
Google Chrome(グーグルクローム)でスマートフォン表示を確認する
ではまずchromeを使ってスマホ表示にしていきましょう。
デベロッパーツールを開く
一言でいえば、F12を押す。
クロームの画面でF12を押すと下のような画面になります。これだけでほぼ目的は達成ですね。
更新ボタン（下の写真）またはF5を押さないと画面の中身がパソコン表示のままでスマホ表示になっていないときもあるので気を付けてください。
あと機能としては、Responsiveっていうボタンを押すとスマホの機種が選べて、その機種の画面の大きさになってくれます。
そして、・・・が縦に並んでるボタンからShow device frameをおすとスマホの枠が出ます。
よりリアルになりますね
僕はこの表示にしてスクショをとって、ブログに貼り付けることが多いです。結構便利ですよ。
以上でchromeを使ったスマホ表示のやり方は終わりになります。ちなみにですが最初のF12を押す代わりに
- ctrl+shift+I
- 右クリック⇒検証
- 画面右上のたて・・・⇒その他のツール⇒デベロッパーツール
上記のような手順でも同じ効果になりますので、ちょびっと確かめてみてください。
mobile browser emulatorを使う
上記のやり方で十分だと私は思いますが、別の方法でchrome 拡張機能のmobile browser emulatorを使うという方法もあります。
詳細は外部リンク様々なスマホの画面サイズを1度に開いて動作確認できるChrome拡張「mobile browser emulator」をご確認ください。
WordPress(ワードプレス)でスマートフォン表示を確認する
では続いてWordPressでスマホ表示を確認する方法の説明です。
カスタマイズ画面で表示を変更できる
まずは外観→カスタマイズと進んでください。
そしたら下の方にあるスマホのマークを押しましょう
下の画像のようなスマホ表示になります。
パソコンだけでばっちりスマホの表示を確認できますね！
PCでスマホ表示を確認してブログをより見やすくしていこう
本記事では、「PCでスマホ表示の確認ができる！超簡単な画面切り替え方法」
ということでパソコンでスマホ表示を確認する方法を2種類ご紹介してきました。
ブロガー目線でいうと、パソコン表示だけで満足して投稿していては絶対にブログの滞在時間が伸びてきません。
- 文字が詰まりすぎている
- 画像が小さすぎて見えない
- 表示が変
スマホ表示を確認すると修正ポイントが浮き彫りになってきます。
ユーザーに快適なブログを目指していきましょう
おすすめブログ関連記事
ここではブロガーに向けて当ブログのおすすめ記事を紹介していきます。
ブログの画像素材に困っている方へ⇒参考記事 ブログの画像はどこから選べばいいのか？おすすめのフリー画像素材サイト８選
ブログやインスタ、YouTube等SNSを複数やっている方にはリンクをまとめたプロフィールページを作るのがおすすめです。
参考記事 プロフィールサイトがおしゃれに無料で作れる‼twitterやインスタに活用しよう【作り方解説】
使用する画像にモザイク加工をかけたいという方へ⇒参考記事 モザイクをペイントで超楽にかける方法！3分で粗さも自由に変えられる
コメント