オリジナルのレイアウトを作るには、レイアウト機能のモードを拡張するために編集用と表示用のテンプレートを作り、管理画面からラベルを設定します。

編集用テンプレート

レイアウト機能の編集用テンプレートは /themes/system/admin/layout/block.html になります。CMSのアップデート時に上書きしてしまう可能性がありますので、/themes/system/admin/layout/block.htmlをオリジナルのテーマの中に複製します。

テンプレートのカスタマイズ方法

.js-acms_layout_row の中の からまでが1つのモードブロックになります。モードブロックを増やすには、 という記述で始まるブロックをコピー&ペーストしてください。

例）col12モードのブロックのソースコード

<!-- BEGIN type#col12 -->
	<div class="js-acms_layout-unit acms-admin-layout-unit clearfix">
		<div class="js-acms_layout_edit_box acms-admin-layout-edit-box">
			<span class="acms-admin-layout-label-name">{blockLabel}</span>
			<div class="acms-admin-inline acms-admin-float-right">
				<button class="js-acms_layout_delete_unit acms-admin-btn-unstyled acms-admin-icon-delete"><span class="acms-admin-hide-visually">削除</span></button>
			</div>
		</div>
		<div class="acms-admin-layout-contents acms-admin-col-12">
			<div class="js-acms_layout_contents acms-admin-layout-contents-inner" data-col="1">
				<!-- COL#1 -->
			</div>
		</div>
	</div>
<!-- END type#col12 -->

カスタマイズ手順

の #○○をオリジナルのブロック名に変更
.acms-admin-layout-contents の開始タグから閉じタグまでを追加したい列分追加
.acms-admin-layout-contents に付属するレイアウトのクラス名を適応したいスタイルのクラス名に変更
.js-acms_layout_contents のdata-col=""を追加した番号順に記述する（1つめならdata-col="1"、2つめならdata-col="2"）

例）オリジナルで作ったcol6-6_testブロック（2カラム）のソースコード

<!-- BEGIN type#col6-6_test -->
	<div class="js-acms_layout-unit acms-admin-layout-unit clearfix">
		<div class="js-acms_layout_edit_box acms-admin-layout-edit-box">
			<span class="acms-admin-layout-label-name">{blockLabel}</span>
			<div class="acms-admin-inline acms-admin-float-right">
				<button class="js-acms_layout_delete_unit acms-admin-btn-unstyled acms-admin-icon-delete"><span class="acms-admin-hide-visually">削除</span></button>
			</div>
		</div>
		<div class="acms-admin-layout-contents acms-admin-col-6">
			<div class="js-acms_layout_contents acms-admin-layout-contents-inner" data-col="1">
				<!-- COL#1 -->
			</div>
		</div>
		<div class="acms-admin-layout-contents acms-admin-col-6">
			<div class="js-acms_layout_contents acms-admin-layout-contents-inner" data-col="2">
				<!-- COL#2 -->
			</div>
		</div>
	</div>
<!-- END type#col6-6_test -->

表示用テンプレート

表示用テンプレートである /themes/sytstem/include/layout.html をオリジナルのテーマに複製し、編集します。

テンプレートのカスタマイズ方法

の中のからまでが一つのブロックになります。

例）col12モードのブロックのソースコード

<!-- BEGIN type#col12 -->
    <div class="acms-admin-grid-r">
        <div class="acms-admin-col-12">
            <!-- COL#1 -->
        </div>
    </div>
<!-- END type#col12 -->

カスタマイズ手順

の #○○をオリジナルのモード名に変更
.acms-admin-col-12 というレイアウト用のクラスが適応された要素の開始タグから閉じタグまでを追加したい列分追加
レイアウト用のクラスを適応したいスタイルのクラス名に変更

モードブロックの命名規則

ブロック名はtype#ブロック名になります。また（カラム数 - 1）個のハイフンをモード名に含めて下さい。

例）オリジナルで作ったcol6-6_testブロック（2カラム）のソースコード

<!-- BEGIN type#col6-6_test -->
    <div class="acms-admin-grid-r">
        <div class="acms-admin-col-6">
            <!-- COL#1 -->
        </div>
        <div class="acms-admin-col-6">
            <!-- COL#2 -->
        </div>
    </div>
<!-- END type#col6-6_test -->

管理画面からラベルを設定する

現在は編集用テンプレートと表示用テンプレートを作成しただけなので、サイドバーにcol6-6_testモードのブロックが追加されていません。追加するには、管理ページ＞コンフィグの順に編集設定のページへ移動します。

レイアウト追加ボタンという見出しの下に、すでにデフォルトのレイアウトの設定が登録されています。左下にある追加ボタンをクリックし、同じように登録します。

モード	テンプレートに記述したtype#○○の○○の部分を記入
グループ	レイアウトグループ（※）を設定
ラベル	レイアウトを選択しやすいようなラベルを入力

※レイアウトグループは同じ編集設定のページにある、「レイアウトグループ」の項目で増やすことができます。

オリジナルレイアウトの追加

ここではモードを「col6-6_test」、グループを「2カラム」、ラベルを「オリジナルレイアウトブロック」に設定しました。設定をしたら保存ボタンをクリックします。

実装の確認

表のテンプレートに移動し、レイアウトボタンをクリックしてレイアウト編集画面にします。サイドバーに先ほどの項目が追加されているのを確認し、ドラッグアンドドロップでレイアウトの確認をします。

オリジナルレイアウトが作成できました

サイドバーには「2カラム」のグループの中に「オリジナルレイアウトブロック」が所属しており、メインエリアにドラッグアンドドロップすると「オリジナルレイアウトブロック」というラベルの2カラムのブロックが追加されました。

Ver. 2.8.20 をダウンロード

レイアウト機能用モジュールのテンプレート作成方法

テンプレートの用意

レイアウト機能で使うモジュールのテンプレートは3種類あります。

標準テンプレート
選択テンプレート
固定テンプレート

標準テンプレート、選択テンプレート、固定テンプレートは設置先やファイル名の指定の仕方が異なるだけで、それぞれ中身のソースコードは同じです。

標準テンプレート

/themes/system/内にテンプレートがあり、システム側であらかじめテンプレートを用意してあります。モジュール選択画面ではプルダウンの「標準」項目を選択して指定します。

標準テンプレートを作る際は、/themes/オリジナルのテーマ/inlude/module/template/フォルダの中に、テンプレート名をモジュール名と同じ（例：Entry_Summary.html）にすることで設定できます。

例：/themes/オリジナルのテーマ/inlude/module/template/Entry_Summary.html

選択テンプレート

選択テンプレートは、テンプレートを自由に選択でき、複数用意することができます。モジュール選択画面ではプルダウンで選択できます。

選択テンプレートを作る際には、/themes/オリジナルのテーマ/inlude/module/template/モジュール名/の中にテンプレートを用意します。テンプレート名は自由に付けられます。

例：/themes/オリジナルのテーマ/inlude/module/template/Entry_Summary/summary.html

固定テンプレート

特定のモジュールIDで使用するテンプレートを制限するのが固定テンプレートです。テンプレートのファイル名と同じモジュールID名に指定したモジュールIDは固定テンプレートしか使用できません。モジュール選択画面では「固定テンプレート」と表示されます。

固定テンプレートを作る際には、/inlude/module/template/モジュール名/の中にテンプレートを用意し、テンプレート名には管理画面で設定したモジュールID名を使います。

例：/themes/オリジナルのテーマ/inlude/module/template/Entry_Summary/topSummary.html （モジュールIDがtopSummaryだった場合）

ソースコード

普段使っているモジュールと同じスニペットをペーストして使います。

ただ、レイアウトモジュールのテンプレートとして使う場合は、始まりの、を省いた記述もできます。

リンクモジュールの例

<section class="moduleSection">
	<!--#include file="/admin/module/setting.html"-->
	<!-- BEGIN moduleField -->
	<!-- BEGIN_IF [{module_heading}/nem] -->
	<div class="moduleHeader clearfix">
		<h2 class="moduleHeading">{module_heading}</h2>
	</div><!-- END_IF --><!-- END moduleField -->
	<ul class="acms-list-group">
		<!-- BEGIN loop -->
		<li><a href="{url}" class="acms-list-group-item sideListLink">{name}</a></li>
		<!-- END loop -->
	</ul>
</section>

また、 という風にモジュールIDが指定されていても、テンプレートのモジュールIDは無視し、レイアウト機能で指定したモジュールIDが優先されます。

レイアウトモジュールで用意されているブロック

ブロックを使えば、レイアウトモジュール編集画面に表示されるダミーを用意することができます。

表示用ブロック

<!-- BEGIN layout#display -->
....
<!-- END layout#display -->

ダミー用ブロック

<!-- BEGIN layout#dummy -->
....
<!-- END layout#dummy -->

記述例

<!-- BEGIN layout#display -->
	<!-- BEGIN_MODULE Links id="linkList" -->
		<section class="moduleSection">
			<!--#include file="/admin/module/setting.html"-->
			<!-- BEGIN moduleField -->
			<!-- BEGIN_IF [{module_heading}/nem] -->
			<div class="moduleHeader clearfix">
				<h2 class="moduleHeading">{module_heading}</h2>
			</div><!-- END_IF --><!-- END moduleField -->
			<ul class="acms-list-group">
				<!-- BEGIN loop -->
				<li><a href="{url}" class="acms-list-group-item sideListLink">{name}</a></li>
				<!-- END loop -->
			</ul>
		</section>
	<!-- END_MODULE Links -->
<!-- END layout#display -->

<!-- BEGIN layout#dummy -->
<div class="moduleSection">
	<h2 class="acms-list-group-heading sideTitle">リンク集</h2>
	<ul class="acms-list-group">
		<li><a href="base.html" class="acms-list-group-item">全部載せ</a></li>
		<li><a href="http://www.a-blogcms.jp" class="acms-list-group-item">a-blog cms</a></li>
		<li><a href="http://www.appleple.com" class="acms-list-group-item">有限会社アップルップル</a></li>
	</ul>
</div>
<!-- END layout#dummy -->

Siteテーマではとの2種類のブロックが使われていますが、ブロックの記述がなくてもスニペットのみでも動作するようになっています。

label.yamlを設定する

選択テンプレートのとき、デフォルトのままではテンプレート名がモジュール選択画面で表示されます。テンプレート名では運営者もわかりづらくなってしまいますので、label.yamlに日本語名を設定します。

label.yamlを設定していないため、banner.htmlと表示されている

label.yamlの記述例

label.yamlは以下のように指定します。

◯○.html（テンプレート名） : △△（日本語名）

実際の記述例：

topImage.html: スライダー
banner.html: バナー広告

label.yamlを設定したためバナー広告と表示された

label.yamlの場所

/include/module/template/◯◯（モジュール名）/ のディレクトリーに置いてください。

バナーモジュールの場合、/include/module/template/Banner/ に設置する

バナーモジュールのlabel.yamlの設置例

必要なテンプレートの記述

レイアウト機能を使うには、以下の作業が必要になります。

テンプレートにレイアウトモジュールのスニペットを貼る
編集用ボタンのインクルードの記述をする

スニペット

<!-- BEGIN_MODULE Layout id="sampleLayout" -->
	<!-- BEGIN display -->
		<!--#include file="/include/layout.html" -->
	<!-- END display -->

	<!-- BEGIN edit -->
		<div class="acms-container">
			<!--#include file="/admin/layout/edit.html"-->
		</div>
	<!-- END edit -->
<!-- END_MODULE Layout -->

のid=""には、モジュールID名を記入してください。レイアウトモジュールのモジュールIDは管理画面に登録することはなく、テンプレートに記述するだけです。

編集ボタン

レイアウトモジュールを使うためのボタンを追加する必要があります。以下のインクルードの記述を任意の場所に貼ってください。

<!--#include file="/admin/layout/action.html"-->

編集用テンプレート

テンプレートのカスタマイズ方法

例）col12モードのブロックのソースコード

カスタマイズ手順

例）オリジナルで作ったcol6-6_testブロック（2カラム）のソースコード

表示用テンプレート

テンプレートのカスタマイズ方法

例）col12モードのブロックのソースコード

カスタマイズ手順

モードブロックの命名規則

例）オリジナルで作ったcol6-6_testブロック（2カラム）のソースコード

管理画面からラベルを設定する

実装の確認

テンプレートの用意

標準テンプレート

選択テンプレート

固定テンプレート

ソースコード

リンクモジュールの例

レイアウトモジュールで用意されているブロック

表示用ブロック

ダミー用ブロック

記述例

label.yamlを設定する

label.yamlの記述例

label.yamlの場所

スニペット

編集ボタン

イントロダクション

入門

コア概念

フロントエンド開発

機能ガイド

リファレンス

アップデート

拡張・カスタマイズ

ツール