WordPress

【超簡単】PC上でサイトのスマホ・モバイルでの表示を確認する方法


スマホを笑顔で操作する女性

いまやインターネットサイトの閲覧は、その多くがスマホ(モバイル)で見ているユーザーが多数です。

運営しているサイトや記事が、スマホでどのように表示されるかを確認することは重要、かつ必須ですが、自分が持っている携帯デバイスや友人知人のデバイスを借りて確認することは手間がかかります。パソコン上で簡単に確認できると楽ですね。

本記事では、パソコン上でスマホの見た目を簡単に確認する方法を2通り紹介します。

  • 「Google Chrome」または「Microsoft Edge」の標準機能で確認する方法
  • 「WordPress」の機能で確認する方法

手軽に確認できますので、ぜひ、ご利用ください。

「Google Chrome」または「Microsoft Edge」の標準機能で確認する方法

Chrome または Edge をお使いの場合、拡張機能の追加なしで使える標準のディベロッパーツールを用いて確認することが可能です。

■ ディベロッパーツールの起動方法

ディベロッパーツールはブラウザ上でショートカットキーを押すことで起動します。

※ Chrome、Edge とも手順は同一です。

ディベロッパーツール起動方法

  • Windows の場合:「Ctrl+Shift+I」または「F12」キー
  • Mac の場合:「⌘(コマンド記号)+option+i」
ディベロッパーツールの起動

右側にプログラムコードのような表示が現れたら成功です。

(右側の細かい部分は使いませんので、「わけわからない」と心配しなくても大丈夫です)

■ スマホでの表示の確認

画面上部にある操作パネルを利用します。

デバイスを選ぶ

「ディメンション:レスポンシブ」のプルダウンから確認したいデバイス(例:iPhone SE など)を指定することで、ほぼデバイスと同じ画面サイズで確認できます。

  • 表示の確認は「縦横幅」での主にサイズをもとにした確認となります
  • 必ずしも選択したデバイスと同一の表示になるわけではありません
  • デバイスのブラウザアプリによっても表示が異なります
  • 色合い、文字フォントなどはパソコンのフォントが利用されるため、見た目が異なる場合があります

■ プルダウンに端末が足りない場合の追加方法

確認したい端末がプルダウンの項目にない場合、端末設定を拡張することができます。

デバイスを追加する

プルダウンから「編集」をクリックすると右側に対象デバイス(エミュレート済みデバイス)を表示しますので、プルダウンリストに追加したいデバイスにチェックを入れます。

デバイスを新規追加する

自分が利用したいデバイスが無い場合は、「カスタマイズデバイスの追加」ボタンから自分でデバイスを追加することも可能です。

「WordPress」の機能で確認する方法

WordPress 上でも簡単にスマホ(およびタブレット)での見た目を確認することができます。

WordPress でスマホの見た目を確認する

WordPress の管理画面から「外観」→「カスタマイズ」を選択します。

左下のデバイスアイコンを切り替えることで、一般的な「PC」、「タブレット」、「スマホ」のサイズで見た目を確認できます。

まとめ

パソコン上でスマホの見た目を簡単に確認する方法です。

  • 「Google Chrome」または「Microsoft Edge」の標準機能で確認する
  • 「WordPress」の機能で確認する

手軽に確認できますので、ぜひ、ご利用くださいませ。

WordPress の情報、テクニック一覧はこちらをクリック!










ブログランキング・にほんブログ村へ  




Presented By Irojiro Haraguro .Com