FreeLayoutContentFieldプラグインは、HTMLとCSSでレイアウトできるコンテンツフィールドを追加するプラグインです。1つのコンテンツフィールドの中に複数の入力欄(フィールド)を入れることができ、それらをHTMLとCSSでレイアウトすることができます。

1つのコンテンツフィールドの中で、同じフィールドの組み合わせを複数回入れることができます。例として、以下のような状況を考えてみてください。 1つの商品で、色のバリエーションがいくつかあります。 色ごとに型番があります。 商品によって色の数が異なります。 商品をコンテンツデータとして扱い、各色の画像と型番をコンテンツフィールドで管理したいとします。 Mov...

フィールドの組み合わせを複数種類用意しておき、それらを自由に組み合わせることも可能です。フィールドの組み合わせを「ユニット」と呼びます。例えば、「見出しと本文」「見出しと本文と画像」「見出しと箇条書き」などのユニットを定義しておいて、それらを自由に組み合わせて、1つのコンテンツフィールドに入れることができます。 ユニットの例

FreeLayoutContentFieldプラグインをMovable Typeにインストールするには、以下のような手順を取ります。 FreeLayoutCustomFieldプラグインとの共通部分のアップロード Movable Type 7ではコンテンツタイプで制作を行うことを推奨していますが、従来のMovable Typeとの互換性も考慮して、記事やウ...

FreeLayoutContentFieldプラグインをインストールすると、「フリーレイアウト」という型のコンテンツフィールドが追加されます。この型のコンテンツフィールドを作成し、その中で使うフィールドを定義し、またHTMLとCSSでレイアウトを決めます。この節では、簡単な例として、1行入力欄とセレクトの2つのフィールドからなるコンテンツフィールドを作り、コ...

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

フィールド定義の書式 フリーレイアウト型コンテンツフィールドの設定ページで、「フィールドの定義」の欄に、以下のような書き方で使用するフィールドを定義します。 fields: フィールド名: label: ラベル type: タイプ class: クラス名 label_class: ラベルのクラス名 default:...

プラグインの概要のところで述べたように、FreeLayoutContentFieldプラグインでは、1つのコンテンツフィールドの中で、同じフィールドの組み合わせを複数回入れることができます。 同一フィールド群の複数回追加の概要 1つのコンテンツフィールドで、「いくつかの値の組み合わせ」を、複数回入力したい場面は、少なくありません。例えば、本書の概要のところで...

FreeLayoutContentFieldプラグインでは、同一フィールド群を複数回追加できるようにするだけでなく、異なるフィールド群（ユニット）を複数回追加できるようにすることもできます。 ユニット機能の概要 リッチテキストエディタで記事などの文章を入力する場合、1つのリッチテキストエディタの中には、見出し／文章／画像など、様々な要素が含まれます。その中か...

FreeLayoutContentFieldプラグインでは、ユニットをグループ化して、複数のユニットをまとめて追加したりすることもできます。 ユニットグループの概要 例えば、以下のような状況を考えてみてください。 「見出し」「本文」「画像」の3つのユニットを登録している ユニットを追加する際に、「見出し」と「本文」や、「見出し」と「画像」のように、複数のユ...

フィールドの組み合わせやユニットを複数回追加できるようにする場合、それらをタブやアコーディオンで切り替えることもできます。 タブ／アコーディオンのユーザーインターフェース フィールドの組み合わせやユニットを複数回追加した場合、通常は各組み合わせ／ユニットを縦に並べて表示します。各組み合わせ／ユニットの内容を一度に見ることができますが、一方で画面が縦に長くなり...

FreeLayoutContentFieldプラグインで入力したデータは、テンプレートタグで出力することができます。この節では、テンプレートタグの書き方を解説します。なお、当面の間、静的出力のみ対応です（Movable Type 7本体がコンテンツタイプのダイナミックパブリッシングに対応していないため）。 個々のコンテンツフィールドに対応するブロックタグ フ...

フィールドに入力された値のバリデーションや自動置換を行う機能があります。 「入力値チェック」の欄にテンプレートタグを記述 バリデーションおよび自動置換を行うには、対象のコンテンツフィールドの設定ページを開き、「入力値チェック」の欄にその記述を行います。 バリデーション／自動置換は、以下のテンプレートタグや、当プラグインのその他のテンプレートタグ、またMova...

FreeLayoutContentFieldプラグインを使って複雑なコンテンツフィールドを作る際に、フィールドの動作を細かくカスタマイズしたい場面もあります。そのような状況を想定して、JavaScriptでカスタマイズする機能も提供しています。 カスタマイズが必要な例 例えば、FreeLayoutContentFieldプラグインを使って、野球のスコアボー...

フリーレイアウト型のコンテンツフィールドの値は、内部的には以下のようなJSON文字列として保存しています（実際には不要な改行やスペースを詰めて保存します）。フィールドの組み合わせ（またはユニット）の1件分のデータを、1つのオブジェクトとして扱います。そして、フィールドの組み合わせ（またはユニット）の複数回の繰り返しを、配列として扱います。 フリーレイアウト型...