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

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

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

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

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

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

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

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

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

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

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

スポンサーリンク

オンライン講座

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


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

提供しているサービス

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

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

サービス詳細ページ >>

申し込みフォーム >>


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

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

サービス詳細ページ >>

申し込みフォーム >>

スポンサーリンク

ページの先頭へ