デモページを参考にホームページをつくる.4
メニューページ
このページではフリーページの2ページ目を使用して、メニュー紹介のページを制作します。
1.メニューテキストを変更する
他ページと同様にメニューテキストを変更します。（メニューのテキストはページタイトルと連動しています）
- 左メニューの「ページ編集」内にある「フリーページ2」をクリックします。
- 「メニュータイトル」に「Menu」と入力。
- 最後に「更新」ボタンをクリック。
ページアドレス（URL）を変更する
初期設定で「free2」になっているページアドレス（URL）を任意のアドレスに変更できます。（使用できる文字は「英数大小文字とアンダースコア」のみです。）
デモページではメニューテキストと合わせて「menu」と設定しました。
デモページではメニューテキストと合わせて「menu」と設定しました。
- 左メニューの「ページ編集」内にある「フリーページ2」をクリックします。
- 「編集」ボタンをクリックして「menu」と入力。
- 最後に「更新」ボタンをクリック。
2.フリーエリアを編集
ここまでの説明でフリーページの操作にもすっかり慣れてきた頃かと思います。
おさらい、レイアウトバリエーションの参考としてご覧ください。
おさらい、レイアウトバリエーションの参考としてご覧ください。
「コンテンツ1列」を追加して「パスタメニュー」と入力。テキストを加工したいので、テキストを選択しておきます。
- 「太字」ボタンをクリック。
- 「フォントサイズ」から「lg」を選択。
- 「配置」から「中央揃え」を選択。
次にタイトル（パスタメニュー）の下に隙間を空けたいので、「スペース」ボタンをクリックして、スペースを追加します。（高さは1を設定）
次にコンテンツ2列を追加して写真やテキストを入力します。
- 「コンテンツ2列」ボタンをクリックして、2列のコンテンツ入力エリアを追加します。
- スマホ表示では1列にしたいので、チェックを入れます。
- 「画像を挿入」ボタンをクリックして写真を設定します。
次に写真の下にテキストを入力して、一部を見出しにします。
- 見出しにしたいテキストを選択。
- 「太字」ボタンをクリック。
- 「フォントサイズ」から「md」を選択。
価格表記を加工して目立たせます。
- 価格部分のテキストを選択。
- 「配置」から「右揃え」を選択。
- 「色」を選んで設定します。
パスタメニューとピザメニューの間にスペースと区切り線を入れます。
- スペース（高さ3）を追加。
- 区切り線を追加。
- スペース（高さ3）を追加。
ピザメニューもパスタメニューと同じ要領で制作してメニューページは完成です。
最後は必ず「更新」ボタンをクリックしてください。
最後は必ず「更新」ボタンをクリックしてください。
以上でメニューページの設定が完了しました。次はアクセスページを制作します。
デモページを参考にホームページをつくる まとめ