ブログを運営されている方は、パソコンで記事作成やブログのデザインから構成など、日々作業されていることと思います。
私もその一人で、まだまだ初心者なのでわからないことだらけで、毎日悪戦苦闘しています。
近年ではスマホの普及によって、Webサイトがスマホ用に最適化され、綺麗に表示されるようになったのでパソコンを使わないスマホユーザーでもストレスなく快適にサイト閲覧ができるのが当たり前となりました。
私自身のブログもどのように表示されているか気になったのですが、毎回スマホで確認するのは面倒ですし、時間が掛かってしまいます。
そこで、Google Chromeからパソコンでスマホサイトの閲覧が簡単にできる方法があるので、詳しく解説していきたいと思います。
表示切替に使用する「Google Chrome デベロッパーツール」について
Google Chromeのデベロッパーツールとは、Googleが提供しているブラウザで使用できる開発者ツールのことです。
他に有名なブラウザは、Internet ExplorerやSafariなどがあります。
このツールで一体何ができるのか、簡単に言いますと以下の内容になります。
|
①HTMLやCSSで表示されている状態の確認 ②スマホやタブレットなどのデバイス表示切替 ③存在しているエラーがないかどうかの確認 |
今回使用するのは②のデバイス表示切替になるので、①と③に関してはスルーしていきましょう。
私自身②以外でデベロッパーツールを使用した経験がないので、詳しい内容はわかりません。
パソコンでスマホサイトを閲覧する方法
パソコンからスマホ表示にしたいWebページを開き、Windowsならパソコンのキーボードにある『F12』を押すとデベロッパーツールが開きます。
この方法以外の場合は、画面右上Google Chromeの『メニュー』を開き、『その他のツール』内にある『デベロッパーツール』をクリックします。
デベロッパーツールがデフォルトのままなら画面右側に表示されるので、上部にあるToggle device toolbarアイコン(スマホのようなマーク)をクリックします。
キーボードの『Ctrlキー＋Shiftキー+Mキー』でも可能です。
先程のアイコンの色が変わり、サイトが表示されている上部にある『Responsive』をクリックすると、スマホやタブレットの一覧が出るので、表示させたいものを選択してクリックします。
それに合わせて画面解像度が変更され、選択したスマホ・タブレット表示モードになります。(まだ未完了の状態)
スマホ・タブレット一覧の一番下にある『Edit』を選択すると、さらに色々なデバイスの追加ができるので、一覧になかった場合はこちらから探してみましょう。
また、Responsiveをデバイスとして選択すると解像度や表示サイズなどをカスタマイズすることも可能です。
この状態ではパソコン表示のままなので、スマホ表示にする為にはWebサーバに変更したことを教える必要があるので、必ず画面上部の再読み込みマーク(F5でも可能)をクリックしてWebページを更新しましょう。
これでスマホ表示切替が完了となります。
デベロッパーツールを閉じたい場合は右上にある『×マーク』、隣のメニューアイコンからデベロッパーツールの表示場所を変更することもできます。
以上がパソコンでスマホサイトを閲覧する方法になります。
注意点として、ウインドウが切り替わると、パソコン表示に戻ってしまうので、その都度同様の設定をする必要があります。
スマホ表示をパソコン表示に戻す方法
パソコン表示に戻したい場合は、デベロッパーツールからToggle device toolbarアイコン(スマホのようなマーク)をクリックするか、キーボードの『Ctrlキー＋Shiftキー+Mキー』を押して解除します。
解除が完了するとアイコンマークの色が元の色に戻ります。
この時点ではまだスマホ表示の状態なので、再読み込みマーク(F5でも可能)を必ずクリックしましょう。
これでパソコン表示の状態に戻ります。
デベロッパーツールの使い方を一度覚えてしまえば、切替え方法自体は難しくないのでいつでも手軽に利用することができると思います。
まとめ
デベロッパーツールでは、もっと詳細な設定なども可能なので扱いに慣れてきたら活用方法の幅も今より広がるので、ブログ運営にも役立つ便利なツールです。
Google Chromeを利用されている方は、ブログ運営力を向上させる為にも活用してみてはいかがでしょうか。
この方法以外に、拡張プラグインをインストールしてユーザーエージェントを変更する方法もあり、どちらかと言うと拡張機能を使用した方が便利な面が多いです。
どうしても拡張プラグインをインストールしたくないという方は、デベロッパーツールを利用していきましょう。
拡張プラグインでスマホ表示にしたい方は↓↓こちらに記事を参考にして下さい。
