【第20回】モバイルビューの確認

連載講座:WordPressで作る簡単Webサイト

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

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

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

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

サンプルサイトでは、タイトルのフォントサイズやメニュー項目の間隔など、デスクトップ/タブレット/スマホそれぞれのビューで微調整を行っています。

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

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

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

WordPressサイト制作出張講座 >>

«次の連載記事»
«前の連載記事»

スポンサーリンク

オンライン講座

Webの基礎マスター講座ページへのリンク


連載講座:WordPressで作る簡単Webサイトページへのリンク

提供しているサービス

WordPressサイト制作出張講座ページへのリンク

WordPress を利用した Webサイト制作の方法を、
あなたのオフィスにうかがいご説明いたします。
料金:¥49,500

サービス詳細ページ >>

申し込みフォーム >>


Webサイト1日公開サービスページへのリンク

一刻も早く Webサイトが必要な方のために、
一緒に作業し1日で公開までもっていきます。
料金:¥49,500

サービス詳細ページ >>

申し込みフォーム >>

スポンサーリンク

ページの先頭へ