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

1. 新着物件のスライドショー
2. 文章
3. スライドするバナー
4. 記事一覧
5. 物件検索 + 物件一覧

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

1. 新ページを作成する

2. ページ作成の準備

3. 物件画像のスライドショーを設置する

4. 文章を追加する

5. スライドするバナーを設置する

6. 記事一覧を追加する

7. 物件検索 + 物件一覧を追加する

8. ページ完成

動画で確認

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

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

手順

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

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

手順

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

新着物件の画像のスライドショーを表示するには、「物件表紙スライダー」というブロックを使用します。

手順

1. 「ブロック追加」をクリックします
   
   
2. コンテンツカテゴリを選択して、「物件表紙スライダー」をドラッグ&ドロップ、またはサムネイル右上の「ブロック追加」で追加します
   
3. 追加したブロックをクリックして、設定項目を表示します

ブロックの設定を行います。

設定項目

賃貸・売買の選択

スライドショーに表示する物件を、賃貸物件か売買物件か選択します。
契約しているものだけ表示されます。

表示件数

スライドショーに表示する件数です。

表示特徴

スライドショーに表示する物件を、特徴を指定して絞り込むことができます。

表示順序

作成日順と更新日順で指定できます。

表示件数

5

表示特徴

未設定

表示順序

更新日順

次に文章箇所を作成します。

手順

1. 「ブロック追加」をクリックします
2. 文章カテゴリを選択して、「文章1」をドラッグ&ドロップまたはブロック追加ボタンで追加します
   
   
3. 追加したブロックをクリックして、設定項目を表示します

設定項目

文字位置

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

線表示

見出しの下の線の有無です。

見出し

見出しを入力します。

記事

エディターボタンをクリックして、文章を入力します。
今回の中央寄せのほか、太字にしたり文字サイズを変更したり装飾する場合は、対象となる文字列を選択後に装飾ボタンをクリックします。
文字装飾の仕方についてはこちらをご覧ください。

手順

1. 文章1ブロックの設定ウィンドウ上の「色」をクリックします
2. 背景パターンは白背景を選択します
3. カラーパレットのシアンを選択します
4. 背景パターン設定の右にある保存ボタンをクリックします（文章1ブロックの保存ボタンではありません）

スライドするバナーを設置します。イメージとしては、物件写真のスライドショーのバナー版です。
ここでは、学生向けの物件、ペット可の物件、インターネットが無料の物件を特集したページをそれぞれ作成していて、その各ページへ移動するためのバナーを表示する、という想定で進めていきます。

設置するバナーは事前に作成しておきます。
今回は横1000px、縦150pxのバナーを3種類作成しました。


それでは、まずカラムブロックを追加します。

手順

1. 「ブロック追加」をクリックします
2. カラムカテゴリを選択して、「カラム」をドラッグ&ドロップまたはブロック追加ボタンで追加します
   
   
3. 追加したカラムブロックをクリックして、設定項目を表示します
4. 1カラムを選択します
   
   

手順

1. 「カラム内ブロック追加」をクリックして、見出しブロックを追加します
   
   
2. 追加した見出しブロックをクリックして、設定項目を表示します
3. 見出しの設定を行います
   

設定項目

見出しタイプ

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

見出し

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

見出しの位置

左寄せ、中央寄せ、右寄せから選択します。

線の位置

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

線の種類

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

線の太さ

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

見出しタイプ

見出し(h2)

見出し

物件特集

見出しの位置

中央寄せ

線の位置

未選択

1. 見出しブロックの設定ウィンドウ上の「色」をクリックします
2. 背景パターンは淡背景、色はブルーを選択します
3. 背景パターン選択の右にある保存ボタンをクリックします

設定項目

画像挿入

スライダーに表示する画像をアップロード、選択します。
メディアボックスの使い方はこちらをご覧ください。

表示件数

スライダーに表示する画像の最大枚数です。

サムネイル

画像スライダーの下に表示するサムネイルの有無です。
2カラムや3カラムの狭い列にブロックを設置した場合は、サムネイルは表示されません。

表示タイプ

画像は横最大1000pxで表示されます。それに対し、縦のサイズを指定します。
画像の縦幅が指定したサイズより大きい場合、はみ出した部分は表示されません。
縦幅を自動にした場合は、縦幅の表示制限は無く、画像全体が表示されます。
今回事前に作成したバナーサイズが横1000px、縦150pxなのは、この表示サイズに合わせるためです。

リンクの開き方

スライドする画像には、クリックした際に移動するページのURLを設定することができます。
リンクが指定されていた場合、そのURLを同じページで開くか、新しいタブで開くか設定できます。

画像挿入

作成しておいたバナーを3つ設定します
バナーには、メディアボックス内でそれぞれ該当する特集ページのURLを設定しておきます

表示件数

3

サムネイル

縦幅:150px
今回は全てのバナーを同じサイズで作成しているので、「縦幅:自動」でも問題ありません

リンクの開き方

同じウィンドウで開く

続いて、記事の一覧を追加します。
バナーの時と同様の手順で新しくカラムブロックを追加し、1カラムに設定します。
記事一覧用の見出しも追加します。
見出しブロックも同じ手順で作成しますが、今回はバナーとは配色を変え、淡背景のライトグリーンに設定します。

見出しを設置したら、記事一覧を表示するためにコンテンツブロックを追加します。
「カラム内ブロック追加」をクリックし、「コンテンツ」を選択します。

設定項目

表示タイプ

「コンテンツ」と「ブログ」から選択します。
「コンテンツ」ではサムネイルが大きく表示され、「ブログ」では小さいサムネイルのコンパクト表示になります。

列数

列数は、物件リストブロックの列数と同じく、横に何列表示させるかの設定です。
以下の2つの条件を満たした場合のみ設定が有効になります。

• コンテンツリストブロックが幅が広いカラム（1カラム、2カラムの広い方、3カラムの中央）に追加されている
• 表示タイプがコンテンツになっている

表示件数

一覧に表示される最大件数です。

カテゴリ

表示される記事をカテゴリで指定します。
指定しない場合は、全てのカテゴリの記事が対象になります。

タグ

選択したタグが設定されている記事だけが表示されるようになります。
カテゴリとタグ両方指定した場合は、両方の条件を満たした記事が表示されます。

大きくする件数

一覧の先頭から指定した件数分だけ、記事の表示を大きくします。
以下の2つの条件を満たした場合のみ設定が有効になります。

• コンテンツリストブロックが幅が広いカラム（1カラム、2カラムの広い方、3カラムの中央）に追加されている
• 表示タイプがコンテンツになっている

タイトル

一覧上部にタイトルを表示できます。

ページ送り機能表示

条件に一致した件数が表示件数で指定した数より多い場合、前後のページに切り替えるためのボタンが表示されます。
以下の2つの条件を満たした場合のみ設定が有効になります。

• コンテンツリストブロックが幅が広いカラム（1カラム、2カラムの広い方、3カラムの中央）に追加されている
• 表示タイプがコンテンツになっている

日付の表示

記事の投稿日の表示の有無です。
ブログの場合は表示が必要ですが、コンテンツページの一覧を表示する場合など日付が不要になることもあるので、その時は非表示にします。

表示タイプ

コンテンツ

列数

3列

表示件数

6

カテゴリ

大好き三鷹、吉祥寺（カテゴリ名は会社によって異なります。全体の新着記事一覧にする場合は未選択にします）

大きくする件数

0

ページ送り機能表示

表示

記事一覧の下には、物件の検索フォームと新着物件の一覧を表示します。
このフォームで検索すると、隣の物件一覧に検索結果が表示されるようになります。

ここにも見出しをつけていますが、注意する点が、見出しは1カラム、物件検索 + 物件一覧が2カラムであるという点です。
そのため、見出し用のカラムブロックと、物件検索 + 物件一覧用のカラムブロック、2つのカラムブロックを追加する必要があります。

まずカラムブロックを追加し、見出しをこれまでと同様の手順で追加します。色は淡背景のオレンジに設定します。
その後、新しいカラムブロックを追加し、2カラムに設定します。

設定項目

賃貸・売買

検索対象の物件のカテゴリを選択します。

開始価格

家賃・価格で検索する際の、検索範囲の最低価格を指定します。
検索対象が賃貸の場合は賃貸開始価格、売買の場合は売買開始価格に設定します。
未設定の場合、賃貸は5万円、売買は1,000万円が開始価格になります。

終了価格

家賃・価格で検索する際の、検索範囲の最高価格を指定します。
検索対象が賃貸の場合は賃貸終了価格、売買の場合は売買終了価格に設定します。
未設定の場合、賃貸は20万円、売買は10,000万円が終了価格になります。

価格幅

家賃・価格で検索する際、選択項目の価格幅をいくらにするか設定します。
検索対象が賃貸の場合は賃貸価格幅、売買の場合は売買価格幅に設定します。

タイトル

検索フォームの上にタイトルを表示することができます。

検索方法

検索結果の物件一覧をどこで表示するかの設定です。

◯◯検索表示

その検索項目の表示／非表示を選択します。

列数

3列

表示件数

6

表示順番

更新日順

ページ送り機能表示

表示

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

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