レイアウト機能admin20

レイアウト機能とは

a-blog cms では、表示されているページのコンテンツやレイアウトをブラウザ上から追加・変更できるレイアウト機能があります。
レイアウト機能を使うことで、これまでテンプレートhtmlファイルへの変更が必要だったレイアウトの変更やモジュールの追加が、ブラウザからの操作のみで行えるようになります。

この機能は、a-blog cms に同梱されているテーマ「site2015」で利用できます。site2015での利用を元に説明を進めますが、独自に作成したテーマをご利用の場合には別途テンプレートファイルに変更が必要です。レイアウト機能の使用については、a-blog cmsのテンプレートを作成された方にご相談ください。


レイアウトの利用開始

site2015テーマのa-blog cmsに管理者としてログイン後、トップページに表示される「レイアウト」ボタンでレイアウト機能の利用を開始します。
※トップページ以外ではレイアウト機能は利用できません。
レイアウト機能が起動すると、ページ内の各コンテンツがレイアウト(灰色の囲み)とモジュール(青色の囲み)で区切られた表示に切り替わり、画面左上にレイアウト機能の操作パネルが表示されます。



レイアウト機能を起動した状態。
画面内の各コンテンツがレイアウト枠とモジュール枠で区切られているのがわかります。


レイアウト、モジュールの追加・配置・変更

レイアウト機能では、ページ内でのカラム数などを制御する「レイアウト」と、登録されている情報(エントリなど)をどのように表示するかを制御する「モジュール」のそれぞれを自由に追加・配置・変更できます。
レイアウト機能によるレイアウト、モジュールの追加手順は以下の3ステップとなります。

  1. レイアウトの配置
  2. モジュールの配置と設定
  3. 保存
1.レイアウトの配置

レイアウト枠の項目はカスタマイズの内容により変わりますが、site2015では、1カラム、2カラム、3カラム、パーツの4カテゴリから配置したいレイアウト枠を選択してドラッグ&ドロップでページ上に配置します。



2.モジュールの配置と設定

モジュールについても同様に、ページ内に配置したレイアウト枠にモジュールをドラッグ&ドロップでレイアウト枠内に配置します。
配置後にどのモジュールを表示するかをモジュール変更ボタンから選択します。
モジュール変更ボタンからは、これまでに設定されているモジュールIDを選択できます。表示したい内容のモジュールIDを左端の「選択」ボタンで選択します。




このモジュール一覧で選択したモジュールIDが、枠内に表示されます。これらのモジュールIDについては、レイアウト機能とは別に管理画面からも設定・編集もできます。


3.保存

レイアウトやモジュールは、ドラッグ&ドロップによる追加後も、再度ドラッグ&ドロップすることで自由に再配置できます。
1.と2.の作業を必要に合わせて繰り返し、最終的にレイアウト機能の操作パネルの「保存」ボタンで追加・変更した内容を確定します。
実際に保存する前には、レイアウト機能の操作パネルの「プレビュー」ボタンからPC、スマートフォンのそれぞれの変更後の状態を確認できます。
誤ってレイアウトやモジュールを削除してしまった、最初からやり直したい、という場合にはレイアウト機能の操作パネルの右上「X」ボタンでこれまでの変更内容を破棄できます。




a-blog cmsを体験してみよう!

お手元のPC、スマートフォンで a-blog cms製Webサイトをご覧いただけます。

メニューの「ログイン」からエントリーの投稿も!

a-blog cms デモサイト