こんにちは。ジロウです。
WEBサイトがスマートフォンの画面でどのように表示されているか、パソコン画面で確認する方法をご紹介します。
それには、Googleが提供するブラウザ「Chrome」がとても便利です。
アドセンス広告もリアルに表示されるし、通常のパソコン表示では分からなかった問題点も見つけることができます。
ユーザーの7割以上がスマホからアクセスすると言われる昨今、その状況をチェックすることは重要ですよね。
パソコンで自分のブログ記事のスマホ表示を確認したい！
ブログを運営していると、使っているテーマ（テンプレート）がヴァージョンアップされたり、プラグインが更新されたり・・・。
そのたびに過去の投稿した記事との互換性が気になって、スマホの表示が正常かどうか、チェックしたくなることもあると思います。
でも、スマホにいちいち記事のURLやタイトルを入力するのは、けっこう面倒なものです。
その点、使い慣れたパソコンでチェックできたなら作業しやすいのに・・・。
ということで、パソコン画面で、
“よりリアルな” スマホ表示をチェックする方法はないものか？
と調べてみたところ、意外に簡単にその方法が分かったんです♪
利用するブラウザは、Googleの「Chrome（クローム）」です。
まだ取り入れていない方は、取り急ぎインストールしてください。
Chrome（クローム）を使ってパソコンでスマホ表示をリアルにチェック
それでは、このブログ内の記事を実験台に、「Chrome（クローム）」でスマホ表示を確認する手順をご紹介します。
■「Chrome（クローム）」を開きます。
■Windowsの場合には、キーボードの［F12］キーを押します。
Macの場合には、［⌘（command］＋［option（alt）］＋［I］です。
すると、「Developer Tools」が開いて、下図のような左右分割の画面表示になります。
元の画面に戻すときにも操作は一緒です。
なお、表示がおかしい場合には、Windowsなら［F5］、Macなら［⌘（command］＋［R］を押して、一度リロードしてみましょう。
■画面上の、
をクリックすると、左側の画面がスマホ表示に変わります。
■左側の画面の上、［Responsive］をクリックすると、プルダウンメニューから表示パターンを選ぶことができます。
今回ここでは、例として「iPhone 7」を選んでみます。
■ブラウザのURL欄に、確認したい記事のURLを入力して［Enter］キーを押します。
すると、下図のように記事ページがスマホと同様に表示されます。
■スマホ表示の上にカーソルを置いてクリック＆ドロップすることで、画面をスクロールさせることができます。
「Chrome（クローム）」の画面を元に戻すには、画面右上の「×」をクリックするか、画面を閉じれば次回からは通常どおりの表示になります。
この機能を使うと、アドセンス広告も実際のスマホ表示のとおりに見られます。
また、以前このブログでご紹介した、
「記事の表示が細くなって、YouTube動画やGoogleマップがはみ出して表示される」
といった、下図のような不具合・・・。
こんな現象もそのまま表示されるので、チェックするにはとても便利です。
「Firefox」など他のブラウザにも似なような機能はあるみたいですが、「Chrome」の方が操作も簡単で分かりやすいと思います。
もしご存知でなかったなら、ぜひぜひお役立てください♪
コメントを残す