デモページを参考にホームページをつくる.2

トップページ

トップページはアドレス（https://◯◯◯◯.hamamatsu.life）にアクセスした時に、最初に表示されるページです。トップページの構成パーツ1〜6の設定方法を順を追ってご説明します。

トップページデモページはこちら

1.イメージ写真

イメージ写真を3枚まで設定できます。複数枚登録でスライドショー表示になります。
画像の縦横比はウィンドウサイズを変えても縦：1×横：1.6の比率を維持します。

イメージ写真の設定方法

デモページでは3枚の画像を設定しています。

左メニューの「ページ編集」内にある「トップページ」をクリックします。
写真のサイズ（横幅）が選択できます。デモページでは「フル」サイズを設定しています。
3枚の画像を設定します。「画像を選択」ボタンをクリックして設定したい画像を選択。（使用可能なファイル形式／jpg、gif、png）
最後に「更新」ボタンをクリック。

3枚の画像が設定できました。

イメージ写真の上に文字を重ねる

イメージ写真の上に文字を重ねることができます。

デモページでは以下を設定しました

文字を入力。
「太字」に設定。
フォントサイズを「XL」に設定。
配置を「中央揃え」に設定。
色を「白」を設定。
最後に「更新」ボタンをクリック。

2.ヘッダー（ページ上部）ロゴ

初期設定では組織名が表示されます

初期設定では組織名が入っている箇所にロゴ画像を設定します。

左メニューの「デザイン編集」をクリック。
「画像を選択」ボタンをクリックしてロゴ画像を設定します。
初期設定で「組織名」が設定されているホームページタイトルを任意のテキストに変更できます。（ロゴ画像が未設定の場合に表示されます）
最後に「更新」ボタンをクリック。

ロゴ画像の背景を透明にする

ロゴ画像の背景を透明にするには「透過png」データを設定してください。

3.メニューテキストを変更する

初期設定で「トップページ」になっているテキストを変更します。

左メニューの「ページ編集」内にある「トップページ」をクリックします。
「メニュータイトル」に「Home」と入力。
最後に「更新」ボタンをクリック。

4.SNSリンクボタンを設定する

SNSのリンクボタンを設定します。

左メニューの「設定」内にある「SNS設定」をクリックします。
各SNSのリンク先アドレスを入力。
最後に「更新」ボタンをクリック。

フリーエリアを編集

フリーエリアはコンテンツ（テキストや写真）のブロックを積み上げるようにしてページを作成します。（後に説明するフリーページの編集方法と同じです）
アイデア次第でさまざまな使い方が可能ですので、ぜひ操作方法を覚えて活用していきましょう。

左メニューの「ページ編集」内にある「トップページ」をクリック。
フリーエリア部分、初期状態で1列のコンテンツ入力エリアが表示されていますが、2列のコンテンツを作成したいので、一旦削除します。
「コンテンツ2列」ボタンをクリックして、2列のコンテンツ入力エリアを追加します。

2列のコンテンツ入力エリアが表示されました。
左右の入力エリアに写真やテキストを入力します。

「画像を挿入」ボタンをクリックして写真を設定します。

テキストを入力します。
テキストの一部を大きくして見出しにします。

見出しにしたいテキストを選択します。
「太字」ボタンをクリック。
「フォントサイズ」から「lg」を選択。

スマホ表示では1列にする

このチェックボックスを入れることで2列のコンテンツがスマホ表示では1列になります。

チェックが入った状態

チェックが入っていない状態

リンクボタンを追加する

スペース（空白）を入れます。
リンクボタンを設置します。
区切り線を入れる。

1.スペースを入れる

スペースボタンをクリック

1〜4の数値が選べます。数値が高い程スペースの高さが大きくなります。（デモページでは3を設定）

2.リンクボタンを設置する

まずはボタンを設置するための入力エリアを「コンテンツ1列」ボタンをクリックして追加します。

コンテンツ入力エリアが追加されました。リンクボタンの設置方法は下記リンクからご確認ください。

詳しくはこちら

3.区切り線を追加する

デザインの装飾として「区切り線」を入れます。
区切り線は情報を区切る（整理する）ことで情報のまとまりが強調され、読み手が内容を直感的に理解しやすくなります。また、視線の流れを整え、どこからどこまでが同じ情報なのかを明確に示す役割も果たします。

「区切り線」ボタンをクリック。
区切り線が追加されます。
最後に「更新」ボタンをクリック。

お問い合わせ案内を編集する

全ページ共通で表示されるお問い合わせ案内を編集します。

詳しくはこちら

以上でトップページの設定が完了しました。次は店舗案内ページを制作します。

店舗案内ページ制作の詳細はこちら

デモページを参考にホームページをつくるまとめ