ページ作成例

トップページの作成例8

以下のようなトップページを作成する手順です。


以下のような構成になっています。
上から
  1. メインタイトル
  2. 地域1に関する情報
    • 地域紹介文
    • 地域情報 + 地域物件
    • 地図検索
  3. 地域2に関する情報
    • 地域紹介文
    • 地域情報 + 地域物件
    • 地図検索
となっています。


もくじ

トップページ作成の注意点
1. 新ページを作成する
2. ページ作成の準備
3. メインタイトルを表示する
4. 地域1に関する情報(地域紹介文)
5. 地域1に関する情報(地域情報 + 地域物件)
6. 地図検索を設置する
7. もう1地域分作成する
8. ページ完成
動画で確認

トップページ作成の注意点

トップページは常に公開状態となっています。
そのため、トップページの編集を行うと、編集途中のページがお客様に見られてしまう可能性があります。
トップページにアクセスするたびに表示が変わると、お客様を混乱させてしまう可能性があるので、少しの編集なら問題ありませんが、完全にレイアウトを変更する場合などは、新しくページを作成して非公開状態で編集し、完成したらそのページをトップページに切り替えるようにします。
トップページへの切り替えは管理ページでは行えないので、ドリームワンにご連絡ください。

1. 新ページを作成する

新しいトップページになる、新ページを作成します。

手順
  1. 左メニューの「メニュー編集」をクリックします
  2. 左上の「新規追加」をクリックします
  3. 作成したページにわかりやすいようにタイトルを設定します


2. ページ作成の準備

以降はデザイン編集ページで作業を行います。
右上の「デザイン編集」をクリックします。


デザイン編集ページに移動すると、作成したページがプレビュー表示されています。

初期状態ではカラムブロックが1つ設置されており、その中にブログ表示に適したブロックが複数追加されています。
これらは不要なので、カラムブロックを削除することで一括で削除します。

手順
  1. 左上の「ブロック削除」をクリックします
  2. カラムブロックのチェックボックスにチェックを入れます
  3. 「選択したブロックを削除」をクリックします

ページに何もない状態になるので、ここからページの作成を進めていきます。


3. メインタイトルを表示する

まずトップページ全体の見出しにあたるメインタイトルを作成します。


手順
  1. 「ブロック追加」をクリックします
  2. 文章カテゴリを選択して、「文章1」をドラッグ&ドロップで追加します
    「ブロック追加」をクリックしても追加できます
  3. 追加した文章1ブロックをクリックします
  4. 文章1ブロックの設定を行います

設定項目
文字位置
見出しの文字を寄せる位置を左寄せ、中央寄せ、右寄せから選択します。

線表示
見出しと記事の間に表示される線の有無を選択します。

見出し
見出しを設定します。

記事
エディターボタンをクリックして、見出しの下に表示される文章を設定します。
文字装飾の仕方についてはこちらをご覧ください。

今回は以下のように設定します。
文字位置
中央寄せ
線表示
線表示
見出し
三鷹・吉祥寺の物件・地域情報なら
記事
あいうえお不動産におまかせください
(文字装飾:中央寄せ、文字の大きさ36px、色Teal)

色は淡背景のシアンに設定します。
手順
  1. 設定ウィンドウ上の「色」をクリックします
  2. 背景パターンは淡背景を選択します
  3. シアンを選択します
  4. 背景パターン設定箇所の右の保存ボタンをクリックします


4. 地域1に関する情報(地域紹介文)

ここから地域ごとの情報を掲載する部分を作成していきます。

まずはアクセントとなる色のラインを作成します。


手順
  1. 「ブロック追加」をクリックします
  2. 「カラム」をドラッグ&ドロップで追加します
  3. 追加したカラムブロックをクリックします
  4. カラムブロックの設定ウィンドウが開くので、上部の「背景色」をクリックします
  5. 色背景のグリーンを選択して適用します

カラムブロック内には特に何かブロックを追加する必要はありません。
カラムブロックは中に何もブロックを追加しなくても、それ自体にわずかに高さがあるので、それを応用します。
同じくこれを利用して、先ほどの文章1ブロックの上下に空のカラムブロックを設置すると、余裕を持たせたデザインにすることができます。


では、地域紹介文を作成していきます。
この部分では、文章だけでなく画像もいくつか表示できる、写真+文章1ブロックを使用します。

手順
  1. 「ブロック追加」をクリックします
  2. 文章+写真カテゴリを選択して、「写真+文章1」をドラッグ&ドロップで追加します
  3. 追加した写真+文章1ブロックをクリックします
  4. 「メディアボックスを開く」をクリックして、画像を登録します(画像の設定方法)
  5. 紹介文を入力します

設定項目
画像を指定する
表示する画像を指定します。
メディアボックスの基本的な使い方はこちらをご覧ください(画像の並び替えなどはこちら)。
画像は4枚指定します。メディアボックスで一番左にある画像が大きく表示される画像になります。
画像の順番を変えたい場合は、メディアボックス内で画像をドラッグ&ドロップして並び替えます。

ブロックタイプ選択
大きい画像が左にあるタイプ、右にあるタイプの2種類から選択します。

見出し
小さい写真の上に表示される文章です。

コメント
小さい画像の下に表示される文章です。文字の装飾を行うことができます。
文字装飾の仕方についてはこちらをご覧ください。

色は上のアクセントの色に合わせて、淡背景のグリーンに設定します。


5. 地域1に関する情報(地域情報 + 地域物件)

続いて地域情報の一覧と地域物件の一覧を作成します。

手順
  1. 「ブロック追加」をクリックします
  2. 「カラム」をドラッグ&ドロップで追加します
  3. 追加したカラムブロックをクリックします
  4. カラムブロックの設定ウィンドウが開くので、「2カラム左サイド付」を選択します
  5. 左カラムを選択して、「カラム内ブロック追加」をクリックしコンテンツブロックを追加します
  6. 追加したコンテンツブロックをクリックします
  7. ブロックの設定を行います

設定項目の詳細については、こちらをご確認ください。
今回は以下のように設定します。
表示タイプ
ブログ
列数
1列
表示件数
4
タグ
三鷹の情報(カテゴリやタグで表示する記事を指定してください)
タイトル
三鷹の新着情報
ページ送り機能表示
非表示
日付の表示
表示
色は白背景のグリーンに設定します。


次に、右側に物件一覧を表示します。
手順
  1. 右側のカラムを選択します
  2. 「カラム内ブロック追加」をクリックして、物件リストブロックを追加します
  3. 追加した物件リストブロックをクリックします
  4. 物件リストブロックの設定を行います

各設定項目の詳細については、「物件一覧の設定を行う」をご確認ください。
今回は以下のように設定します。
表示件数
3
表示順番
更新日順
三鷹駅(営業エリアに合わせて選択してください)
タイトル
三鷹の新着物件
列数
3列
ページ送り機能表示
表示
色は白背景のグリーンに設定します。


これで記事一覧 + 物件一覧部分が完成しました。


6. 地図検索を設置する

最後に、該当の駅を中心にした地図検索を設置します。
管理ページでGoogleマップのAPIキーを設定していないと地図検索機能は利用できません。
詳しくはこちらをご確認ください。


手順
  1. カラムブロックを追加して、1カラムに設定します
  2. 「カラム内ブロック追加」をクリックして、マップブロックを追加します
  3. 追加したマップブロックをクリックします
  4. マップブロックの設定を行います

設定項目
初期位置
地図の中心地点を指定します。マーカーのある場所が中心になります。
例えば検索ボックスに「三鷹駅」と入力し検索すると、自動的に三鷹駅の場所にマーカーが移動します。
位置を細かく指定したい場合は、マーカーをドラッグ&ドロップして調整します。
また、座標のほかに縮尺も保存されます。

開始価格
検索フォームに表示される価格(家賃)の範囲の下限です。

終了価格
検索フォームに表示される価格(家賃)の範囲の上限です。

価格幅
開始価格から終了価格までを、指定した価格で区切ります。
例)開始価格:50000、終了価格:120000、価格幅:5000に設定した時

タイトル
地図の上にタイトルを表示することができます。

初期間取り
最初に地図が表示された時点で地図上に表示される物件を、間取りで絞り込むことができます。

初期特徴
最初に地図が表示された時点で地図上に表示される物件を、特徴で絞り込むことができます。

今回は以下のように設定します。
開始価格
50000(該当エリアの家賃に合わせて設定してください)
終了価格
200000(該当エリアの家賃に合わせて設定してください)
価格幅
10000
色は白背景のグリーンを設定します。


ここまでで、ページは以下のようになっています。


7. もう1地域分作成する

ここまでで、地域1の情報(紹介文、地域情報+物件、地図検索)の作成が完了しました。
2地域分掲載するので、手順4~6を繰り返し、地域2の情報を掲載します。
地域1と地域2の間隔を空けたい場合は、前と同様に空のブロックを追加して調整します。
今回は地域1のマップの下にHTMLブロックを2つ追加しています。



8. ページ完成

以上で新トップページの作成が完了しました。

あとはこのページを現在のトップページと切り替えるだけですが、管理ページでは切り替え作業を行うことはできません。
ドリームワン側で切り替え作業を行いますのでご連絡ください。


動画で確認

全体を通しての操作を動画で確認できます。



トップページの作成例7
トップページの作成例9