誰でも簡単! WordPressで作るホームページ

【第19回】スマホレイアウトの確認

ここまでは、パソコン用のデスクトップレイアウトでページの表示を確認してきました。
今回使用しているテーマは、レスポンシブデザインになっていますから、スマホレイアウトでの表示も確認してみます。

スマホでの表示は、テーマカスタマイザーで確認できます。カスタマイザーパネルの一番下に、切り替え用のボタンがあります。

また、ブラウザの機能を使っても確認することが可能です。
ここでは、Chrome のデベロッパーツールを使って確認する方法を解説します。

  1. Chromeで、トップページ「http://localhost/pc-school/」を表示しておき、F12キーを押します。
  2. 下のアイコンをクリックし、デバイスツールバーを表示します。
  3. デバイスは、最近のスマホで最も画面幅が狭い ‘iPhone 5/SE’ を選択します。
  4. メニューボタンをクリックし、ページを切り替えて表示を確認しましょう。
  5. 確認が終わったら、F12キーを押してデベロッパーツールを終了します。

これでひと通りの作業が終わり、講座も終了となります。
お疲れさまでした。

なお、今回のような講座をお客さまのオフィスにうかがって開講するサービス、
「ホームページ制作出張講座」もあります。

その講座では、お客さまの状況に合わせてカリキュラムを組むことが可能ですので、興味がある方はこちらのページをご覧ください。
>>ホームページ制作出張講座

 │