ページ作成例

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

以下のような構成になっています。
上から

物件写真画像一覧
おすすめ物件
新着ブログ一覧
新着物件一覧

となっています。

トップページ作成の注意点
1. 新ページを作成する
2. ページ作成の準備
3. 物件表紙のスライドショーを表示する
4. おすすめ物件を表示する（見出し部分）
5. おすすめ物件を表示する（物件部分）
6. ブログ一覧を表示する
7. 新着物件一覧を表示する
8. ページ完成
動画で確認

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

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

手順

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

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

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

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

手順

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

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

一番上には、物件の表紙画像をスライドショーで表示します。
このスライドショーの画像をクリックすると、その物件ページに移動することができます。

手順

「ブロック追加」をクリックします
コンテンツカテゴリを選択し、「物件表紙スライダー」をドラッグ&ドロップで追加します
「ブロック追加」から追加することもできます
追加した物件表紙スライダーブロックをクリックします
物件表紙スライダーブロックの設定を行います

設定項目

賃貸・売買の選択: 表示したい物件を賃貸と売買から選択します。
契約しているもののみ表示されます。
表示件数: スライドショーに表示させたい件数を指定します。
表示特徴: 特徴を指定すると、その特徴が設定されている物件だけを表示することができます。
表示順序: 表示順を作成日順、更新日順から選択します。

今回は以下のように設定します。

表示件数: 6
表示特徴: 未選択
表示順序: 更新日順

スライドショーの下には、おすすめ物件を表示します。
このおすすめ物件は、ピックアップした物件の情報が自動的に表示されるものではなく、物件ページに誘導するために、自分で画像や文章を書いて作成します。

まず下のようなタイトルを設置します。

タイトルは横いっぱいに表示するので、カラムブロックを設置して1カラムに設定します。

手順

「ブロック追加」をクリックします
「カラム」をドラッグ&ドロップで追加します
追加したカラムブロックをクリックします
カラムブロックの設定ウィンドウが開くので、1カラムを選択します

続いて、カラムブロックに見出しブロックを追加します。

手順

「カラム内ブロック追加」をクリックして、見出しブロックを選択します
追加した見出しブロックをクリックします
見出しブロックの設定を行います

設定項目

見出しタイプ: 見出しの重要度を設定します。基本的にはh2やh3を使用します。
見出し: 見出しの文章を設定します。
見出しの位置: 左寄せ、中央寄せ、右寄せから選択します。
線の位置: 見出しを装飾する線を表示することができ、その線の表示位置を選択することができます。
未選択だと線は表示されません。
線の種類: 通常の線、点線、破線から選択できます。
線の太さ: 線の太さを3段階で指定できます。

今回は以下のように設定します。

見出しタイプ: 見出し(h2)
タイトル: 店長のおすすめ物件
見出しの位置: 中央寄せ
線の位置: 下側
線の種類: 通常
線の太さ: 細

色は色背景のインディゴを指定します。

手順

設定ウィンドウ上の「色」をクリックします
背景パターンは色背景を選択します
色はインディゴを選択します
保存ボタンをクリックします

これで見出しは設置できましたが、上の画像スライドショーとくっつきすぎています。

小技のような感じになりますが、HTMLブロックを設置することで、若干スペースを空けることができます。
HTMLブロックを追加した後、HTMLブロックをドラッグ&ドロップで見出しブロックより上に移動します。

これでスペースを空けることができました。

もう少し空けたい場合はもう一つHTMLブロックを追加してください。

続いて今設置したタイトルの下に、おすすめ物件の情報を載せていきます。
おすすめ物件部分は、左に物件写真、右に物件紹介文という構成になっています。

まず、先ほどと同様の手順でカラムブロックを追加して、色を淡背景のブルーに設定します。

手順

カラム選択箇所の右の「背景色」をクリックします
背景パターンは淡背景を選択します
色はブルーを選択します
保存ボタンをクリックします

続いて、左カラムにおすすめ物件の物件写真を追加します。

手順

最初に、カラムのレイアウトを「2カラム左サイド付」に設定します
左カラムを選択して、「カラム内ブロック追加」をクリックし写真ブロックを追加します
追加した写真ブロックをクリックします
「メディアボックスを開く」をクリックして、画像を設定します(画像の設定方法)

必要に応じて設定を行います。

設定項目

画像挿入: ブロックに表示する画像を設定します。
画像をクリックした際に物件ページに移動するようリンク先を設定しておくといいです。
バナー位置: 画像が表示領域より小さかった場合、どの位置に寄せるのか設定します。
左寄せ、中央寄せ、右寄せから選択します。
リンクの開き方: メディアボックス内で、画像をクリックした際にアクセスするリンク先を設定することができます。
このリンク先を現在のページで開くのか、新しいウィンドウ（またはタブ）で開くのか設定します。
タイトル: 設定すると、画像の上にタイトルとして表示されます。

画像の追加ができたので、続いて文章を設定していきます。

手順

右側のカラムを選択して、「カラム内ブロック追加」をクリックし見出しブロックを追加します
追加した見出しブロックをクリックします
見出しや文章、その他必要な項目を設定します

今回は以下のように設定します。

見出しタイプ: 見出し(h2)
見出し: 物件名
見出しの位置: 左寄せ
線の位置: 左側
線の種類: 通常
線の太さ: 太

色は色背景のブルーに設定します。

続いて、物件の紹介文を追加します。

手順

「カラム内ブロック追加」をクリックして、文章ブロックを追加します
追加した文章ブロックをクリックします
見出しや記事の設定を行います

設定項目

見出し: 文章ブロックは見出しと記事で構成されており、その見出しを設定します。
内容としては、物件情報登録の際のキャッチコピーのようなものを設定するといいと思います。
記事: 記事は長文を書いたり、文字を装飾することができます。
おすすめ物件の紹介なので、物件ページのリンクを設置しておきます。
文字装飾の仕方についてはこちらをご覧ください。
見出しタイプ: 見出しの重要度を設定します。基本的にはh2やh3を使用します。
見出しの位置: 左寄せ、中央寄せ、右寄せから選択します。
線の位置: 見出しを装飾する線を表示することができ、その線の表示位置を選択することができます。
線の種類: 通常の線、点線、破線から選択できます。
線の太さ: 線の太さを3段階で指定できます。