デザイン編集編

カラムブロックの使い方

カラムブロックとは

カラムとは列のことです。
カラムブロックを使用することで、ページを1列、2列、3列のレイアウトにすることができるようになります。
カラムブロック自体は列を表現するだけなので、そこにさらに物件一覧やブログ一覧などの専用ブロックを設置して使用します。

1カラム

1列だけなので、カラムブロック以外のブロックと同じく、横幅いっぱいに中身のブロックが表示されます。

2カラム

左列にブログ一覧、メイン列に物件一覧を表示した例です。ブログ一覧の列は、メイン列の右側に表示することもできます。

3カラム

3カラムは、メイン列の左右に狭い列があるレイアウトです。

1. デザイン編集ページに移動する

デザイン編集ページは、物件編集ページ、メニュー編集ページ、コンテンツ編集ページ(ブログ)で使用できます。

物件編集ページ

物件編集ページの右上にある「デザイン編集」というボタンから移動できます。

メニュー編集ページ、コンテンツ編集ページ

メニュー編集ページとコンテンツ編集ページ(ブログ)では、コンテンツ一覧でページを指定し、上部の「デザイン編集」から移動できます。

2. カラムブロックを追加する

左メニューにある「ブロック追加」をクリックします。
するとブロックリストが表示されるので、一番上の「カラム」をドラッグ&ドロップ(左クリックしながら移動)し、先ほどの「ブロック追加」のボタンの上まで移動させます。
そうすることでカラムブロックをページに追加することができます。

アニメーションで確認

ブロックリストの右側にカラムのプレビューが表示されているので、そこの「ブロック追加」をクリックすることでもカラムブロックを追加することができます。
アニメーションで確認

3. レイアウトを選択する

追加したカラムブロックの編集ボタンを押し、ブロックの編集ウィンドウを開きます。

編集ウィンドウの上部に、カラムの表示パターンが4つ表示されているので、そのうち好きなものをクリックします。

4. カラムにブロックを追加する

表示パターンを選択したら、カラムにブロックを追加していきます。
今回は、3カラムで中央に物件一覧を表示する例で説明します。
まず、中央のブロックの下部にある「追加」をクリックします。

カラムブロックに追加できるブロックの一覧が表示されるので、「物件リスト」をクリックします。
これで中央のカラムに物件一覧が表示されるようになりました。

実際のページです。左右のカラムはまだ何も追加していないので空白になっています。

追加したブロックは、編集ボタンから表示に関する設定を行うことができます。

ヘッダー・フッターの設定