HTMLの入力

カスタムフィールドの中に表示する内容は、「レイアウト用HTML」の欄に入力します。一般のHTMLと、フィールドを表す特殊なタグを組み合わせて、カスタムフィールドのHTML構造を決めます。
ここで取り上げる例では、「レイアウト用HTML」の欄に以下のように入力します。

「レイアウト用HTML」の欄に入力する内容

<p>{{text1_label}} {{text1}}</p>
<p>{{select1_label}} {{select1}}</p>

「{{text1}}」や「{{select1}}」など、「{{」と「}}」で囲んだ部分は、フィールドを表します。これらの部分は、プラグインによってinputやselectなどのHTML要素に置き換えられます。
また、「｛｛」と「｝｝」の間の「text1」や「select1」は、フィールドの定義の際につけたフィールド名に対応しています。
「{{text1_label}}」や「{{select1_label}}」など、「{{フィールド名_label}}」の部分は、フィールドに付けるラベルを表します。
これらの部分は、プラグインによってHTMLのlabel要素に置き換えられます。

CSSの入力

カスタムフィールド内のHTMLに対して、CSSで各種の装飾を行うことができます。このCSSは、「レイアウト用CSS」の欄に入力します。
なお、ここで取り上げる例では、CSSは使いません（空欄にしておきます）。
CSSを使い方は、こちらのページをご参照ください。

JavaScriptの入力

カスタムフィールドの細かな動作を、JavaScriptで記述することができます。このJavaScriptは、「カスタムJavaScript(初期化用)」と「カスタムJavaScript」の2つの欄に入力します。
ここで取り上げる例では、JavaScriptは使いません（空欄にしておきます）。
JavaScriptの使い方は、こちらのページを参照。

テンプレートの入力

フリーレイアウトカスタムフィールドに入力した値を、テンプレートタグで出力することができます。
基本的なテンプレートタグの組み方は、以下のようになります。

基本的なテンプレートタグの組み方

<mt:テンプレートタグ名Block>
・・・
<$mt:FLCFValue field="フィールド名"$>
・・・
</mt:テンプレートタグ名Block>

リスト内の「テンプレートタグ名」には、カスタムフィールドの設定画面で、「テンプレートタグ」の欄に入力したタグ名を入れます。また、「フィールド名」の箇所には、カスタムフィールドの設定画面で、「フィールドの定義」の欄のYAMLで決めた各フィールドの名前を入れます。
例えば、ここまでで取り上げたカスタムフィールドで、「テンプレートタグ」の欄に「FLCFBasic」と入力したとします。この場合、テキストの入力欄の値（フィールド名はtext1）を出力するには、次のページのようにテンプレートを組みます。

テンプレートの組み方の例

<mt:FLCFBasicBlock>
<$mt:FLCFValue field="text1"$>
</mt:FLCFBasicBlock>