ブログのスマホ向け画面をパソコンで確認する方法

Google Analyticsなどのアクセス解析を見るとわかるのですが、ブログへのアクセスの大半が、スマートフォンなどモバイル端末からのものです。そのため、ブログ側でもスマホ向けでも見やすいような画面の準備が必須です。

最近のWordPress（ワードプレス）テンプレートのほとんどはレスポンシブデザイン（画面サイズによってレイアウトが見やすくなるよう可変になっているデザイン）を採用しているので、レスポンシブに対応しているならば基本的には大丈夫。

しかし記事に含まれる内容によっては、パソコンでは問題なく見えていてもスマホでレイアウトが崩れている、といった問題が発生することがあります。

でもモバイル向けのレイアウトを確認するために、いちいちスマホでブログをチェックするのは手間がかかって面倒ですよね。

そんな時はパソコンのブラウザでスマホ向けレイアウトを確認する方法が便利。実機を持っていなくても、モバイルでブログを見た時の画面が確認できます。

PCブラウザでスマホ向け画面を確認

それではパソコンのブラウザで、モバイル向け画面を確認する方法です。

今回はGoogle Chromeブラウザを利用した確認方法をご紹介します（他のブラウザでも機能があれば確認できます）。

こちらは本ブログをパソコンで見た時の画面です。

こちらChromeブラウザで開き、キーボードの「Ctrl+Shift+J」を同時押ししてください（Windowsの場合）。右上のメニュー（…が縦になっているマークのボタン）から、「その他のツール→デベロッパーツール」と進んでも同じ結果になります。

すると、このようなモバイル向けの画面が表示されます（開いた直後はPC向けのレイアウトのままなので、ページ再読込（Ctrl＋R）をしてください）。レスポンシブ対応のテンプレートならば、メニューが折りたたまれたり、サイドバーの位置が変わっているモバイル用のデザインを確認できます。

上記の例ではモバイル端末として「iPhone6」が選択されており、同機種で見た場合の画面を再現しています。機種を変更すれば、他のスマホ画面での見た目も確認できます。プルダウンから任意の機種を選んでみてください。

この画面から元のパソコン用の画面に戻るには、キーボードからもう一度「Ctrl+Shift+J」を押したあと、ページを再読込してください。

モバイル向けの画面が表示されたら、ページを上から下までスクロールして、レイアウトに問題がないかを確認してみましょう。

よくあるパターンが、画像や広告が画面の横幅におさまりきらずに、横スクロールが出てしまっていること。エラーではないので致命的な問題ではありませんが、あまりかっこよい状態ではありません。

その他、意図していない表示などがあれば随時修正し、スマホ画面でもブログがキレイに閲覧できるように調整しておきましょう。

この確認方法ならば、いちいち実機を使わなくでもスマホでの見た目を確認できます。上手に利用して、スムーズなブログ運営を目指しましょう！

本ブログはレンタルサーバー「エックスサーバー」にて稼働中です。