レイアウト機能

目次

レイアウト機能の基本

レイアウト機能とは?

レイアウト機能とは、モジュールの配置をHTMLの知識がない方でもブラウザ上から追加・変更ができるようになる機能です。たとえば、新しくエントリーヘッドラインやエントリーサマリーのモジュールを追加したくなった場合、普段であればHTMLを修正しなければいけませんが、ブラウザ上からドラッグアンドドロップの操作で新規モジュールの追加ができます。

レイアウト機能のデモ


スクリーンショット:レイアウト編集画面

サイドバーのモジュールボタンをメインエリアにドラッグアンドドロップする


モジュールの追加


レイアウト編集ボタン

レイアウト編集ボタン


レイアウトボタンをクリックしてレイアウト編集画面に移動します。


レイアウトモードのブロックをメインエリアにドラッグアンドドロップ

レイアウトモードのブロックをメインエリアにドラッグアンドドロップ

レイアウト編集画面に移動したら、配置したいレイアウトをサイドバーから選び、メインエリアにドラッグアンドドロップします。


モジュールモードのブロックをメインエリアにドラッグアンドドロップ

モジュールモードのブロックをメインエリアにドラッグアンドドロップ

同じ操作感で、モジュールをサイドバーから、メインエリアのレイアウトのユニット内にドラッグアンドドロップします。


モジュールブロックをドラッグアンドドロップをした後

モジュールブロックをドラッグアンドドロップをした後

モジュールブロックをドラッグアンドドロップすると、モジュールを挿入できるユニットが追加されます。左上のモジュールボタンを押してモジュールの一覧画面へ移動します。


使用したいモジュールIDのテンプレートを選び、選択ボタンをクリックします。


モジュール選択画面

モジュール選択画面


選択し、元の画面へ戻った画面

選択し、元の画面へ戻った画面

選択し、元の画面へ戻ると、選択したモジュールがユニットの中に入っています。


レイアウトの保存

レイアウトの保存

サイドバーにある保存ボタンをクリックしてレイアウトを反映します。


ブラウザ上の操作だけで、テンプレートにモジュールが反映されました。


レイアウト機能はVer.2.5よりご利用いただけます。

レイアウト機能の操作感を体験する

実際の操作感を知りたい方はデモサイト、または以下の動画よりご覧ください。


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

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

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

スニペット

<!-- 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 -->

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

編集ボタン


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

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

必要な管理画面の設定

「レイアウト/ユニット」の項目をオンにする

管理画面>モジュールIDの順に移動し、モジュールの設定画面から、レイアウト機能で使いたいモジュールの「レイアウト/ユニット」の項目をオンにする必要があります。


レイアウトモジュールで利用できるようにモジュールを設定

レイアウトモジュールで利用できるようにモジュールを設定


この設定がオンになっていないと、レイアウト編集画面で表示するモジュールIDの一覧に表示されません。

レイアウト機能のモードを拡張する

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

編集用テンプレート

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

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

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

例)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 -->

カスタマイズ手順

  1. <!-- BEGIN type#○○ --> の #○○をオリジナルのブロック名に変更
  2. .acms-admin-layout-contents の開始タグから閉じタグまでを追加したい列分追加
  3. .acms-admin-layout-contents に付属するレイアウトのクラス名を適応したいスタイルのクラス名に変更
  4. .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 をオリジナルのテーマに複製し、編集します。

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

<!-- BEGIN block:loop --> の中の<!-- BEGIN type#col12 -->から<!-- END type#col12 -->までが一つのブロックになります。

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

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

カスタマイズ手順

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

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

ブロック名は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カラムのブロックが追加されました。

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

テンプレートの用意

レイアウト機能で使うモジュールのテンプレートは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だった場合)

ソースコード

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

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

リンクモジュールの例

<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>

また、<!-- BEGIN_MODULE Links id="linksList" --> という風にモジュール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テーマでは<!-- BEGIN layout#display -->と<!-- BEGIN layout#dummy -->の2種類のブロックが使われていますが、ブロックの記述がなくてもスニペットのみでも動作するようになっています

label.yamlを設定する

選択テンプレートのとき、デフォルトのままではテンプレート名がモジュール選択画面で表示されます。テンプレート名では運営者もわかりづらくなってしまいますので、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の設置例