デモページを参考にホームページをつくる.3
店舗案内ページ
2ページ制作できるフリーページの1ページを使用して、店舗案内ページを制作します。お店の特徴や基本情報を掲載しています。
1.メニューテキストを変更する
トップページと同様にメニューテキストを変更します。（メニューのテキストはページタイトルと連動しています）
- 左メニューの「ページ編集」内にある「フリーページ1」をクリックします。
- 「メニュータイトル」に「About us」と入力。
- 最後に「更新」ボタンをクリック。
ページアドレス（URL）を変更する
初期設定で「free」になっているページアドレス（URL）を任意のアドレスに変更できます。（使用できる文字は「英数大小文字とアンダースコア」のみです。）
デモページではメニューテキストと合わせて「about」と設定しました。
デモページではメニューテキストと合わせて「about」と設定しました。
- 左メニューの「ページ編集」内にある「フリーページ1」をクリックします。
- 「編集」ボタンをクリックして「about」と入力。
- 最後に「更新」ボタンをクリック。
2.フリーエリアを編集（1）
ここからは、トップページ制作でご紹介したフリーエリアの編集方法について、改めてご説明します。レイアウトバリエーションの参考としてご覧ください。
- 「コンテンツ1列」ボタンをクリックして、1列のコンテンツ入力エリアを追加します。
- 「画像を挿入」ボタンをクリックして写真を設定します。
- 写真が追加されました。
次にテキストを入力します。
- 写真とテキストの間にスペースをいれます。「スペース」ボタンをクリック。
- スペースの高さは2を設定。
- テキストを入力するための「コンテンツ1列」ボタンをクリック。
- テキストの一部を見出しにします。見出しにしたいテキストを選択。
- 「太字」ボタンをクリック。
- 「フォントサイズ」から「lg」を選択。
3.フリーエリアを編集（2）
次のコンテンツを入力します。
コンテンツを入力する前にスペースと罫線を追加します。（点線部分）
コンテンツを入力する前にスペースと罫線を追加します。（点線部分）
- 「スペース」ボタンをクリック。
- スペースの高さは3を設定。
- 「区切り線」ボタンをクリックして区切り線を追加。
- 「スペース」ボタンをクリック。
- スペースの高さは3を設定。
- 「コンテンツ2列」ボタンをクリック。
- スマホ表示では1列にしたいので、チェックを入れます。
- テキストの一部を見出しにします。見出しにしたいテキストを選択。
- 「太字」ボタンをクリック。
- 「フォントサイズ」から「lg」を選択。
- 「画像を挿入」ボタンをクリックして写真を設定します。
- スペース（高さ4）を追加。
- 先ほどと同じ要領で、コンテンツを追加します。
4.フリーエリアを編集（3）
最後に「区切り線」と「コンテンツ2列」を使って店舗概要をリスト形式で制作します。
（そろそろ操作に慣れてきたと思いますので省略気味にご説明…）
（そろそろ操作に慣れてきたと思いますので省略気味にご説明…）
- 上に設定したコンテンツとの間にスペース（高さ4）を追加。
- 「コンテンツ1列」を追加して「店舗概要」を見出しにします。
（「太字」ボタンをクリック。「フォントサイズ」から「lg」を選択。） - スペース（高さ1）を追加。
- 区切り線を追加。
- スペース（高さ1）を追加。
- 「コンテンツ2列」を追加して、左右にテキストを入力。
（「スマホ表示では1列にする」にチェックを入れます。）
あとは3〜6を繰り返して完成です。
最後は必ず「更新」ボタンをクリックしてください。
最後は必ず「更新」ボタンをクリックしてください。
以上で店舗案内ページの設定が完了しました。次はメニューページを制作します。
デモページを参考にホームページをつくる まとめ