カスタムユニットの項目や表示を編集する

このテーマ独自の追加ユニットのカスタマイズについて解説します。案件に応じた編集・追加をしやすいファイル構造にしています。
ユニットの基本機能の解説は下記を参照ください。



ユニット関連のファイル構造について

カスタムユニットが呼び出された時に使用されるテンプレートは、下記にあります。

編集画面用

/dist/themes/echo_zero/admin/entry/unit/extend.html

公開画面用

/dist/themes/echo_zero/include/unit/extend.html

extend.html からは、さらに同じディレクトリ内にある、各ユニットのテンプレートをインクルードで呼び出しています。カスタマイズする場合はこれらのテンプレートを編集してください。ユニットとテンプレートのファイル名の関係は下記の通りです。

余白ユニットextend_custom_spacer.html
ボタンユニットextend_custom_button.html
画像+テキストユニットextend_custom_imgtext.html

編集画面用テンプレートの先頭には、下記のCSSが記述されています。これは、カスタムユニット内の注意文や「ボタンユニット」での特殊な選択肢に使用しています。

<style>
.acms-admin-ex-notice {
	margin: 5px 0;
	padding: 5px;
	background-color: #f9f9f9;
	color: #390;
	font-size: 12px;
	line-height: 1.25;
}
.acms-admin-ex-boxlabel {
	display: inline-block;
	margin: 0 10px 10px 0;
	padding: 10px;
	background-color: #e6e6e6;
}
</style>

カスタマイズ例:余白をピクセル単位にする

CSSでの調整が難しくなりますが、Jimdoのような「ピクセル単位での余白指定」に変更する場合は、下記の通り作業してください。

この変更は、過去に公開されたエントリーに対しては適用されません。それ以前の余白ユニットは、エントリーを更新するまで表示に不具合が発生しますのでご注意ください。不具合を避けたい場合は、ユニットの新規追加を検討ください。

編集画面側のテンプレートを編集します。下記ファイルをエディタで開いてください。

/dist/themes/echo_zero/admin/entry/unit/extend_custom_spacer.html

9行目に、余白を選択させるラジオボタンがあります。

<td>
	<label class="acms-admin-form-radio"><input type="radio" name="spacer_size{id}" value="p-t-md"{spacer_size:checked#p-t-md} /><i class="acms-admin-ico-radio"></i>小(1行分)</label>
	<label class="acms-admin-form-radio"><input type="radio" name="spacer_size{id}" value="p-t-lg"{spacer_size:checked#p-t-lg} /><i class="acms-admin-ico-radio"></i>中(2行分)</label>
	<label class="acms-admin-form-radio"><input type="radio" name="spacer_size{id}" value="p-t-xl"{spacer_size:checked#p-t-xl} /><i class="acms-admin-ico-radio"></i>大(4行分)</label>
	<input type="hidden" name="unit{id}[]" value="spacer_size{id}" />
</td>

これを、単一行の数値のみテキストボックスに書き換えてください。

<td>
	<input type="number" name="spacer_size{id}" value="{spacer_size}" class="acms-admin-form-width-mini">ピクセル (必須)
	<input type="hidden" name="unit{id}[]" value="spacer_size{id}" />
</td>

続いて、公開画面側のテンプレートを編集します。下記ファイルをエディタで開いてください。

/dist/themes/echo_zero/include/unit/extend_custom_spacer.html

空のdiv要素のみが記述されています。

<!-- BEGIN unit#custom_spacer -->
<div class="column-echo-spacer {spacer_size}"></div>
<!-- END unit#custom_spacer -->

クラス名として指定されている{spacer_size}を、以下の通り、インラインスタイルに書き換えてください。

<!-- BEGIN unit#custom_spacer -->
<div class="column-echo-spacer" style="height: {spacer_size}px;"></div>
<!-- END unit#custom_spacer -->

以降はピクセルでの指定が可能となります。

参考

カスタムユニット | ユニット | ドキュメント | a-blog cms developer

カスタムユニット ハンズオン | 合宿 | ブログ | a-blog cms developer