a-blog cmsのカスタムユニット：ボタン

acms_admin_entry_unit_extend_button.html

<!-- BEGIN custom_button -->
<table class="entryFormColumnSettingTable entryFormColumnTable">
	<tr>
		<td class="entryFormFileControl">
			<table class="entryFormColumnSettingTable">

				<tr>
					<th style="white-space: nowrap;">ボタンの文字列</th>
					<td>
						<input type="text" name="button_text{id}" value="{button_text}" class="acms-admin-form-width-half" />
						<input type="hidden" name="unit{id}[]" value="button_text{id}" />
					</td>
				</tr>

				<tr>
					<th style="white-space: nowrap;">リンク先URL</th>
					<td>
						<input type="text" name="button_url{id}" value="{button_url}" class="acms-admin-form-width-full" />
						<input type="hidden" name="unit{id}[]" value="button_url{id}" />
					</td>
				</tr>

				<tr>
					<th style="white-space: nowrap;">ラジオボタン</th>
					<td>
						<label class="acms-admin-form-radio"><input type="radio" name="button_size{id}" value="small"{button_size:checked#small} /><i class="acms-admin-ico-radio"></i>小</label>
						<label class="acms-admin-form-radio"><input type="radio" name="button_size{id}" value=""<!-- BEGIN_IF [{button_size}/em] --> checked="checked"<!-- END_IF --> /><i class="acms-admin-ico-radio"></i>中</label>
						<label class="acms-admin-form-radio"><input type="radio" name="button_size{id}" value="large"{button_size:checked#large} /><i class="acms-admin-ico-radio"></i>大</label>
						<input type="hidden" name="unit{id}[]" value="button_size{id}" />

				    <label class="acms-admin-form-checkbox" for="input-button_block{id}">
						<input type="checkbox" name="button_block{id}[]" value="1" id="input-button_block{id}"{button_block:checked#1} />
						<i class="acms-admin-ico-checkbox"></i>幅を広げる
						</label>
						<input type="hidden" name="unit{id}[]" value="button_block{id}" />

					</td>
				</tr>

				<tr>
					<th style="white-space: nowrap;">ボタンの色</th>
					<td>
						<select name="button_color{id}" class="acms-admin-form-width-full">
							<option value="">グレー</option>
							<option value="primary"{button_color:selected#primary}>青</option>
							<option value="success"{button_color:selected#success}>緑</option>
							<option value="info"{button_color:selected#info}>黒</option>
							<option value="warning"{button_color:selected#warning}>オレンジ</option>
							<option value="danger"{button_color:selected#danger}>赤</option>
						</select>
						<input type="hidden" name="unit{id}[]" value="button_color{id}" />
					</td>
				</tr>

			</table>
		</td>
	</tr>
</table>
<!-- END custom_button -->

acms_include_unit_extend_button.html

<!-- BEGIN unit#custom_button -->
<p class="acms-text-center">
	<!-- BEGIN_IF [{button_url}/nem/and/{button_text}/nem] -->
	<a href="{button_url}" class="acms-btn<!-- BEGIN_IF [{button_size}/nem] --> acms-btn-{button_size}<!-- END_IF --><!-- BEGIN_IF [{button_color}/nem] --> acms-btn-{button_color}<!-- END_IF --><!-- BEGIN_IF [{button_block}/eq/1] --> acms-btn-block<!-- END_IF -->">
		{button_text}
	</a>
	<!-- ELSE -->
	<small>【！】ボタンの文字列・リンク先URLの両方を入力してください</small>
	<!-- END_IF -->
</p>
<!-- END unit#custom_button -->

a-blog cmsの公式テーマでいきなり使えるボタンのセット。

サイズ・カラー・ブロック化の有無を選択することができる。
カスタムユニットでは必須チェックができない（らしい）ので、文字列とリンク先URLのいずれかが未入力だった場合はエラー文を表示する（何も表示しないとダイレクト編集で直すことができない）。

ファイルユニットに使用されているtd.entryFormFileControlを改変。モバイルに対応する。
td.entryFormFileControlは、th要素の幅が8emと狭いので、th要素にnowrapを明示している。