ACF チェックボックス レイアウト

カスタムフィールドを簡単に作れるプラグイン Advanced Custom Fields(ACF) のチェックボックス位置を揃えたり、「全て 選択/解除」を強調するレイアウトのご紹介です。

レイアウト見本

スタイルの適用方法

ACF でクラス設定

ACF のフィールド設定欄の「ラッパーの属性」＞「class」に設定したいレイアウトのクラス名を入力します。

レイアウト	クラス名
固定幅	fixed
「全て 選択/解除」の強調	toggle

※ ACF のフィールド設定欄の「Toggle」を「いいえ」にしている場合は、「全て 選択/解除」の強調は使用しないでください。

※ 固定幅、「全て 選択/解除」の強調のどちらも適用したい場合は、「fixed toggle」を入力します。

CSS コード

投稿画面で読み込まれる CSS ファイルに以下のコードを追記します。

/* チェックボックス 固定幅 */
.acf-field.fixed ul.acf-checkbox-list {
	display: inline-block;
}
.acf-field.fixed ul.acf-checkbox-list li {
	box-sizing: content-box;
	width: 10em;
	white-space: nowrap;
}
.acf-field.fixed ul.acf-checkbox-list li label {
	display: flex;
	align-items: center;
}
.acf-field.fixed ul.acf-checkbox-list li label input {
	margin-right: 0.25em;
}

/* チェックボックス toggle */
.acf-field.toggle ul.acf-checkbox-list li:first-child {
	width: 100%;
	margin-bottom: 0.5em;
	border-bottom: 1px dashed #ddd;
}

CSS コード中の「width: 10em;」は固定幅の幅を指定しています。
チェックボックスおよび選択肢が十分に表示されるよう適宜変更してください。

完成！