レイアウト用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:ContentField content_field="""コンテンツフィールド名">
  ・・・
  <$mt:FLCFValue field="フィールド名"$>
  ・・・
</mt:ContentField>

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

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

<mt:ContentField content_field="サンプル">
  <$mt:FLCFValue field="text1"$>
</mt:ContentField>