ホームページがスマートフォンでどのように表示されるかは、次の2つの方法で確認できます。スマートフォンをお持ちであれば方法1、パソコンだけで確認したい場合は方法2をお試しください。
目次
方法1：スマートフォンから編集画面にログインして確認する
- スマートフォンのブラウザで https://wevery.jp/users/sign_in を開き、ユーザー名（メールアドレス）とパスワードを入力して「ログイン」をタップします。
- ログイン後、ホームページの編集画面を開きます（詳しくはログイン・ログアウトをするをご覧ください）。
- 確認したいページの編集画面で「変更をプレビュー」をタップすると、公開前の変更内容をスマートフォンでの表示で確認できます。
※すでに公開しているページは、ホームページのURLをスマートフォンで開くだけでも確認できます。
方法2：パソコンの検証ツールで確認する
パソコンのブラウザ（Google Chromeなど）に備わっている「検証ツール（デベロッパーツール）」を使うと、画面の幅をスマートフォンと同じ大きさにして表示できます。
ここではGoogle Chromeでの手順をご案内します（Microsoft Edgeでもほぼ同じ手順です）。
- Google Chromeで確認したいページ（編集画面の「プレビュー」でも可）を開きます。
- キーボードの「F12」（または Ctrl + Shift + I）を押します（Macの場合は Option + Cmd + I ）。ページ上で右クリックし、メニューの「検証」を選んでも開けます。
- 検証ツールの画面の左上、パソコンとスマートフォンのアイコン（「デバイスツールバーの切り替え」）をクリックします。キーボードの Ctrl + Shift + M（Macの場合はCmd + Shift + M）でも切り替えられます。
- ページ上部に画面サイズの操作バーが表示されます。「Dimensitons」の右側（初期状態は「Responsive」）をクリックし、確認したいスマートフォンの機種（iPhoneなど）を選びます。
- 表示がパソコン用のままの場合は、ページを再読み込みします（F5、Macは Cmd + R）。スマートフォン用の表示に切り替わります。
- 確認が終わったら、もう一度「F12」を押して（または検証ツール右上の「×」をクリックして）検証ツールを閉じます。
※検証ツールは表示を確認するためだけの機能です。操作してもホームページの内容が変わることはありません。
※パソコン上でスマートフォンの画面を再現したものなので、実際のスマートフォンと細かい表示が異なる場合があります。最終的な確認は、実際のスマートフォンで行うことをおすすめします。
最近のコメント