a-blog cms では、表示されているページのコンテンツやレイアウトをブラウザ上から追加・変更できるレイアウト機能があります。
レイアウト機能を使うことで、これまでテンプレートhtmlファイルへの変更が必要だったレイアウトの変更やモジュールの追加が、ブラウザからの操作のみで行えるようになります。
この機能は、a-blog cms に同梱されているテーマ「site2015」で利用できます。site2015での利用を元に説明を進めますが、独自に作成したテーマをご利用の場合には別途テンプレートファイルに変更が必要です。レイアウト機能の使用については、a-blog cmsのテンプレートを作成された方にご相談ください。
site2015テーマのa-blog cmsに管理者としてログイン後、トップページに表示される「レイアウト」ボタンでレイアウト機能の利用を開始します。
※トップページ以外ではレイアウト機能は利用できません。
レイアウト機能が起動すると、ページ内の各コンテンツがレイアウト（灰色の囲み）とモジュール（青色の囲み）で区切られた表示に切り替わり、画面左上にレイアウト機能の操作パネルが表示されます。
レイアウト機能を起動した状態。
画面内の各コンテンツがレイアウト枠とモジュール枠で区切られているのがわかります。
レイアウト機能では、ページ内でのカラム数などを制御する「レイアウト」と、登録されている情報（エントリなど）をどのように表示するかを制御する「モジュール」のそれぞれを自由に追加・配置・変更できます。
レイアウト機能によるレイアウト、モジュールの追加手順は以下の3ステップとなります。
レイアウト枠の項目はカスタマイズの内容により変わりますが、site2015では、1カラム、2カラム、3カラム、パーツの4カテゴリから配置したいレイアウト枠を選択してドラッグ＆ドロップでページ上に配置します。
モジュールについても同様に、ページ内に配置したレイアウト枠にモジュールをドラッグ＆ドロップでレイアウト枠内に配置します。
配置後にどのモジュールを表示するかをモジュール変更ボタンから選択します。
モジュール変更ボタンからは、これまでに設定されているモジュールIDを選択できます。表示したい内容のモジュールIDを左端の「選択」ボタンで選択します。
このモジュール一覧で選択したモジュールIDが、枠内に表示されます。これらのモジュールIDについては、レイアウト機能とは別に管理画面からも設定・編集もできます。
レイアウトやモジュールは、ドラッグ＆ドロップによる追加後も、再度ドラッグ＆ドロップすることで自由に再配置できます。
1.と2.の作業を必要に合わせて繰り返し、最終的にレイアウト機能の操作パネルの「保存」ボタンで追加・変更した内容を確定します。
実際に保存する前には、レイアウト機能の操作パネルの「プレビュー」ボタンからPC、スマートフォンのそれぞれの変更後の状態を確認できます。
誤ってレイアウトやモジュールを削除してしまった、最初からやり直したい、という場合にはレイアウト機能の操作パネルの右上「X」ボタンでこれまでの変更内容を破棄できます。
お手元のPC、スマートフォンで a-blog cms製Webサイトをご覧いただけます。
メニューの「ログイン」からエントリーの投稿も！
a-blog cms デモサイト
