ページ作成例

トップページの作成例6

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


物件を多めに表示するレイアウトです。

大きく分けて、以下のような構成になっています。
上から
  1. タイトル1(駅1)
  2. ブログ一覧 + 物件一覧(駅1)
  3. タイトル2(駅2)
  4. ブログ一覧 + 物件一覧(駅2)
  5. タイトル3(特徴)
  6. 物件一覧1(特徴1)
  7. 物件一覧1(特徴2)
  8. 物件一覧1(特徴3)
  9. 物件検索ページヘのリンク
となっています。

もくじ

トップページ作成の注意点
1. 新ページを作成する
2. ページ作成の準備
3. 見出しを表示する
4. 記事一覧を表示する
5. 物件一覧を表示する
6. 物件検索ページへのリンクを表示する
7. もう一駅分の情報を追加する
8. 特徴ごとの物件一覧を表示する
9. 物件検索ページへのリンクを設置する
10. ページ完成
動画で確認

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

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

1. 新ページを作成する

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

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


2. ページ作成の準備

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


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

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

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

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


3. 見出しを表示する

タイトル部分には文章1ブロックを使用します。

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

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

線表示
見出しの下に線を表示するかどうか選択します。

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

記事
エディターボタンをクリックするとエディターが開きます。見出しの下に表示される文章を設定します。

今回は以下のように設定します。
文字位置
中央寄せ
線表示
線表示
見出し
三鷹
記事
何も設定しません(見出し部分だけを使用するため)

色は色背景のグリーンに設定します。


4. 記事一覧を表示する

次に記事一覧を追加します。
記事一覧部分は隣に物件一覧も表示するため、カラムブロックを追加して2カラムに設定します。

手順
  1. 「ブロック追加」をクリックします
  2. カラムカテゴリを選択して、「カラム」をドラッグ&ドロップで追加します
  3. 追加したカラムブロックをクリックします
  4. カラムブロックの編集ウィンドウが開くので、「2カラム左サイド付」を選択します

カラムブロックの色は、タイトル部分の色に合わせて淡背景のグリーンに設定します。
レイアウト選択の右にある「背景色」から色を設定できます。


続いて、カラムブロックにコンテンツブロックを追加します。
手順
  1. 左カラムを選択してから「カラム内ブロック追加」をクリックし、コンテンツブロックを選択します
  2. 追加したコンテンツブロックをクリックします
  3. コンテンツブロックの設定を行います

設定項目の詳細については、こちらをご確認ください。
今回は以下のように設定します。
表示タイプ
ブログ
列数
1列
表示件数
5
日付の表示
表示
色は白背景のグリーンに設定します。


5. 物件一覧を表示する

続いて、カラムの右側に物件一覧を表示するために、物件リストブロックを追加します。

手順
  1. 右側のカラムを選択してから「カラム内ブロック追加」をクリックし、物件リストブロックを選択します
  2. 追加した物件リストブロックをクリックします
  3. 物件リストブロックの設定を行います
各設定項目の詳細については、「物件一覧の設定を行う」をご確認ください。


今回は以下のように設定します。
表示件数
3
表示順番
更新日順
三鷹駅(エリアに合わせて変更してください)
タイトル
三鷹の新着物件
列数
3列
ページ送り機能表示
表示


6. 物件検索ページへのリンクを表示する

先ほど三鷹駅が最寄り駅の物件一覧を表示しましたが、もっと三鷹駅周辺の物件を見てもらうために、駅が三鷹駅で登録されている物件の一覧ページに移動するリンクを設置します。
その一覧ページというのは、物件検索の際に駅だけを指定した時の検索結果のページになります。

ではまずそのページのURLを取得します。

手順
  1. 物件検索ページに移動します
    (ページデザインは会社ごとに異なるので、自社サイトに置き換えて見てください)
  2. 検索条件で駅を指定し、検索します
  3. 検索結果のページのURLをコピーします

これで、三鷹駅を設定している物件の一覧ページのURLが取得できました。

では続いて、物件一覧の下にリンクを設置します。
手順
  1. 「カラム内ブロック追加」をクリックして、ボタンブロックを選択します
  2. 追加したボタンブロックをクリックします
  3. ボタンブロックの設定を行います

設定項目
ボタンの横幅
ボタンの横幅を選択します。

文字の大きさ
文字の大きさを大中小から選択します。

ボタンの形
四角、角丸、丸から選択します。
それぞれ角が異なり、四角は直角、角丸は少し丸みがあり、丸は大きく丸くなっています。

リンクの開き方
リンク先のページを同じウィンドウで開くか、別のウィンドウで開くか選択します。

ボタン名
ボタンに表示させる文言です。
リンク先
リンク先のURLです。

今回は以下のように設定します。
ボタンの幅
文字の大きさ
ボタンの形
リンクの開き方
同じウィンドウで開く
ボタン名
三鷹駅周辺の物件を探す
リンク先
先ほどコピーした検索ページのURL

ここまでで以下のようになっています。


7. もう一駅分の情報を追加する

手順3~6を繰り返し、もう一駅分の情報を追加します。



8. 特徴ごとの物件一覧を表示する

ここまで、駅に関するブログと物件一覧を設置してきましたが、ここから特徴項目ごとの物件一覧を設置していきます。

まず同様の手順で、タイトルを設置します。


続いて特徴ごとのタイトルを設置します。

手順
  1. カラムブロックを追加して、1カラムに設定します
    色は淡背景のディープオレンジを指定します
  2. 「カラム内ブロック追加」をクリックして、見出しブロックを選択します
  3. 追加した見出しブロックをクリックします
  4. 見出しブロックの設定を行います

設定項目
見出しタイプ
見出しの重要度を設定します。基本的にはh2やh3を使用します。

見出し
見出しの文章を設定します。

見出しの位置
左寄せ、中央寄せ、右寄せから選択します。

線の位置
見出しを装飾する線を表示することができ、その線の表示位置を選択することができます。
未選択だと線は表示されません。

線の種類
通常の線、点線、破線から選択できます。

線の太さ
線の太さを3段階で指定できます。

今回は以下のように設定します。
見出しタイプ
見出し(h2)
タイトル
ファミリー向け物件(この後設定する物件一覧に合わせて設定します)
見出しの位置
中央寄せ
線の位置
未選択
色は色背景のディープオレンジに設定します。


続いて、物件リストブロックを追加して、下のような物件一覧を表示させます。

ブロックの設定の際、特徴項目を指定することでその特徴項目を設定している物件だけを表示することができます。

今回は以下のように設定します。
表示件数
4
表示順番
更新日順
表示特徴
ファミリー(前面に出したい特徴項目を指定します)
列数
4列
ページ送り機能表示
表示


最後に、ファミリー物件で物件検索したページに移動するリンクを設置します。
上で三鷹駅で物件検索した時と同じように、特徴項目でファミリーを選択して検索し、検索結果のページURLでボタンブロックを設定します。

ボタンブロックの各設定項目は、先ほどと同じに設定します。

これで、ファミリー物件部分が完成しました。


同様にあと2つ、ほかの特徴項目の物件一覧も設置します。

9. 物件検索ページへのリンクを設置する

最後に、物件検索ページへのリンクを設置します。


手順
  1. カラムブロックを追加して、1カラムに設定します
    色は淡背景のブルーを指定します
  2. 「カラム内ブロック追加」をクリックして、ボタンブロックを選択します
  3. 追加したボタンブロックをクリックします
  4. 見出しブロックの設定を行います

今回は以下のように設定します。
ボタンの横幅
最大
文字の大きさ
ボタンの形
角丸
リンク先
物件検索ページのURL

10. ページ完成

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

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


動画で確認

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



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