ブログ

ブログ

2019.02.12

ブロックレイアウトの変更方法

前回の記事「ホームページのレイアウト構造について」で、Rabbity-CMSのブロックレイアウト構造について解説しました。
デザインの変更を気軽に行えるRabbity-CMSのブロックレイアウト構造は、パーツの変更操作も簡単に行うことができるだけでなく、ページごとにレイアウトを変えるといったことまでクリック操作で簡単に行なえます。
本記事では、ブロックレイアウトの変更方法などの操作面について解説していきます。

パーツの入れ替えによるレイアウトの変更方法

前回の記事「ホームページのレイアウト構造について」で、Rabbity-CMSでは、ヘッダーやフッターといった各スペースをブロック単位に分けて構成した「ブロックレイアウト」というレイアウト構造を用いてページを構成していると述べました。
その各ブロックに用意されたパーツを自由に配置することでレイアウトを変更することができます。
※ここで述べている「レイアウト」とはパーツの表示位置のことです。カラム数の変更といったサイト自体のレイアウトの変更はデザインテンプレートの変更が必要です。

1.コントロールパネルの[作成]→[ブロックレイアウト]をクリックします。

[作成]から[ブロックレイアウト]を選択

2.「ブロックレイアウトダイアログ」が表示されます。

ブロックレイアウトダイアログの見方
番号

説明

1 各ブロックにレイアウトできるパーツのリストが表示されています。
2 現在そのページに適用されているレイアウトタイプやその変更を行うボタンなどが表示されています。
3 ブロック構成図が表示されています。

※「ブロックレイアウトダイアログ」表示時、ページのレイアウトタイプが「デフォルトレイアウト」や「デフォルトレイアウト(上位継承)」の場合、メッセージダイアログが表示されます。
レイアウトタイプについては下記の「ページに適用されているレイアウトタイプについて」をご覧ください。

デフォルトレイアウトのレイアウト変更

3.ダイアログ左側①のパーツリストから使用したいパーツを配置したいブロック(③の該当ブロック)へドラッグ&ドロップ操作で移動します。

パーツリストのタブをクリックすると展開するので、その中のパーツを操作します。
メインコンテンツやグレーアウトしているブロックへはパーツの配置ができませんのでご注意ください。
パーツリストの各パーツについては「ホームページのレイアウト構造について」のパーツリストをご覧ください。

パーツリストから任意のブロックへ移動

4.すでに配置しているパーツのブロックを変更したい場合は、配置されているブロックから移動させたいブロックへドラッグ&ドロップ操作で移動させます。

パーツをブロックからブロックへ移動

5.使用を止めたいパーツがある場合は、配置されているブロックからパーツリストへドラッグ&ドロップ操作で戻します。

戻す先のパーツタブはどこでも問題ありません(次回機能使用時には該当するタブ内に格納されます)。

ブロックからパーツリストへ移動

6.[OK]ボタンをクリックするとレイアウトが変更されます。

配置したパーツが表示される

ページに適用されているレイアウトタイプについて

Rabbity-CMSでは、各ページにレイアウトタイプが適用されています(ダイアログ右上②の上に記載)。
レイアウトタイプには「デフォルトレイアウト」と「個別レイアウト」があります。

レイアウトタイプの表示
タイプ 説明
デフォルトレイアウト ページのレイアウトを共通化したい場合に適用するレイアウトタイプです。
デフォルトレイアウトが適用されているページはすべて同じレイアウトになります。
また「ブロックレイアウト」機能でデフォルトレイアウトのパーツの配置を変更するとデフォルトレイアウトが適用されているすべてのページのレイアウトが変更されます。
個別レイアウト そのページのみのブロックレイアウトにしたい場合に適用するレイアウトタイプです。
個別レイアウトを適用したページのレイアウトは他のページに影響しません(「上位継承」しているページを除く)。
デフォルトレイアウト
(上位継承)
個別レイアウトが適用された上位のページが「レイアウトを下の階層に適用」しており、下層ページがデフォルトレイアウトタイプの場合は、「デフォルトレイアウト」は適用されず、上位ページの個別レイアウトが継承されます。

レイアウトタイプの変更方法

「デフォルトレイアウト」を「個別レイアウト」に変更する方法

「ブロックレイアウトダイアログ」の[個別レイアウトの作成]から[新規レイアウト]ボタンまたは[既存レイアウトの複製]ボタンをクリックすることで個別レイアウトに変更できます。
該当するボタンをクリック後、[OK]ボタンをクリックすることで個別レイアウトが適用されます。

デフォルトレイアウトを個別レイアウトに変更

[新規レイアウト]は、パーツが配置されていない状態から作成する場合に使用します(下記画像新規レイアウトからの作成時)。

[新規レイアウト]から個別レイアウトを作成

[既存レイアウトの複製]は、すでに作成されている個別レイアウトのページのレイアウトを元に作成する場合に使用します。
[既存レイアウトの複製]ボタンを押すとメッセージダイアログが表示されるので元となるページにチェックを入れて[OK]ボタンを押してください。

[既存レイアウトの複製]から個別レイアウトを作成

「個別レイアウト」を「デフォルトレイアウト」に変更する方法

レイアウトタイプ表記の右側に表示されている[デフォルトレイアウトに変更]ボタンをクリックすることでデフォルトレイアウトに変更できます。
レイアウトタイプ変更後、[OK]ボタンをクリックすることでデフォルトレイアウトが適用されます。

個別レイアウトをデフォルトレイアウトに変更

レイアウトの継承の変更方法

下層ページにレイアウト継承させない方法

レイアウトを下層ページに継承させたくない場合は、上位ページで「ブロックレイアウトダイアログ」を開き、[個別レイアウトの作成]の[既存レイアウトの複製]ボタンの右横に表示される[このレイアウトを下の階層に適用しない]にチェックを入れて[OK]ボタンをクリックします。

チェックを入れて下層ページにレイアウトを継承させない

下層ページを個別レイアウトに変更する方法

上位継承された下層ページを個別レイアウトに変更したい場合は、「ブロックレイアウト」機能立ち上げ時に表示されるメッセージ内の[このページに個別設定をする]ボタンをクリック後、[OK]ボタンをクリックすると変更できます。

レイアウト継承ページに個別レイアウトを設定する

Rabbity-CMSに
関するお問い合わせ

TEL:048-421-8571
営業時間 9:00-17:00(土日祝除く)

お問い合わせフォーム