パソコン(PC)でホームページをスマホサイト表示にする方法

スマホサイトの表示を確認する

どうも、スマコマのコマ太郎です。元気もりもり

今やホームページはスマホサイト対応は常識。WordPress のテーマを使えば、ほぼスマホ対応されていますよね。

アクセスの大半がスマホというジャンルも多くなっていて、スマホサイトの重要度は増すばかりです。

でも WordPress を使うのはパソコンだから、意外とスマホ表示を確認していない人も多いのでは?

文字だけなら問題ありませんが、画像やテーブルタグを使うとスマホではデザインが崩れてしまうなんてことも。

ですからページを作ったら、毎回確認しておきたいものです。でも毎回、スマホの実機を使って確認するのは面倒ですよね。

そこで今回はパソコンでスマホサイトを確認する方法をご紹介しようと思います。

ブラウザの機能を使ってスマホ表示する

実はブラウザには、スマホ表示をエミュレートする機能が実装されているのです。

なので、ブラウザでスマホ表示ができちゃうんですね。(chrome, firefox, ie, safariなど)

方法は簡単です。

まず表示を確認したいページを表示させます。(ここでは chrome で説明します)

次に [F12]キーを押し、開発者ツール(デベロッパーツール)を表示します。

chromeデベロッパーツール

chromeデベロッパーツール

開いたウィンドウにあるスマホアイコン(上図)をクリックするとスマホ表示とパソコン表示が切り替わります。

パソコン表示に戻したい場合はもう一度クリックすると戻ります。

なお表示を切り替えた際は、一度ブラウザの更新ボタンを押すことをおすすめします。サイトによってはパソコンとスマホで使っているデータが違うため、再リクエストして正しいデータを読み込ませるのが無難です。

スマホサイトの表示

スマホサイトの表示

上図の赤枠部分をクリックするとデバイス(iPad,iPhone,Galaxyなど)を変更することもできます。

開発者ツールは、再度 [F12]キーを押すことで終了させることができますよ。

なお Firefox や IE でも似たような操作でスマホ画面を確認することができます。

PCでスマホサイトを見るのまとめ

ブラウザの開発者ツールでスマホ画面を確認する方法をご紹介しました。

わざわざ実機で確認する必要がないので便利ですよ。

ただあくまでエミュレーターであることには注意してください。実際の表示と若干違うことがあります。

ですからページの作成途中で簡易的に確認したいときに使うと良いでしょう。そして最終確認は実機で行うことをおすすめします。

ちなみにLINEを使うと手早くパソコンとスマホ間でデータのやり取りができますよ。ぼくはこれを使って実機で最終確認を行っています。LINEを使って自分だけにメッセージを送る方法はこちらの記事に書きました。

あわせて読みたい記事
パソコンとスマホでデータをやり取りする
どうも、スマコマのコマ太郎です。 作ったページをスマホで確認したい。この文章やフレーズをパソコンに送りたい。そんなときあなたはどうしていま...

 コメント/質問、お気軽にどうぞ。

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

関連記事

アクセス解析研究所

1つのタグで複数サイトのデータを監視できる広告なしのアクセス解析

初心者のためのFFFTPの基本的な使い方。注意点などを交え初期設定から解説

パソコンとスマホでデータをやり取りする

PCからスマホ(逆も)にLINEで自分だけに文字やURLを送る方法

PDFファイルをまるごと翻訳できるサイト

英語のPDFファイルを丸ごと日本語に翻訳できる無料サイト

WordPressサイトが利用しているテーマ名を調べる方法

WordPressサイトが利用しているテーマ名を調べる方法