パーツの作り方

このマニュアルは、パーツを自分で作りたい・改造したい人向けの詳しい資料です。HTML・JSON が読める方を想定しています（PHPは書きません）。

※簡単な手順だけ知りたい場合は、別の入門マニュアルをご覧ください。

パーツとは

ページに積んで使う「部品（ブロック）」です。1つのフォルダが1つのパーツで、parts/<名前>/ に置けば自動で認識され、ページ編集の「＋パーツを追加」に出ます。

製品版で使えるパーツの一覧（どのカテゴリにどのパーツがあるか）は、パーツ一覧ページ（https://frames-cms.com/manual/list-parts.html）で確認できます。

ファイル構成

parts/<名前>/
  part.json      … パーツの定義（メタ情報＋編集項目）
  template.html  … サイトに出るHTML（{{ }}で差し込み）

part.json

{
  "title": "パーツ名（編集画面に出る）",
  "category": "リスト",
  "sort": 20,
  "description": "説明文",
  "fields": [
    { "key": "style", "type": "select", "label": "スタイル",
      "options": [ {"value": "", "label": "標準"}, {"value": "-border", "label": "枠線つき"} ] }
  ],
  "repeater": {
    "key": "rows",
    "label": "項目",
    "fields": [
      { "key": "image", "type": "image", "label": "画像" },
      { "key": "title", "type": "text",  "label": "見出し" },
      { "key": "body",  "type": "textarea", "label": "本文" }
    ]
  }
}

• title／category（追加時のカテゴリ）／sort（並び順）／description。
• status … "public"（既定）か "hidden"（一覧に出さない）。
• fields[] … 編集項目。各項目に key（英数字）・type・label、select のときは options[]。
• repeater … カードを複数並べたいときの繰り返し項目（key は通常 "rows"）。

使えるフィールド型（type）

1行テキスト(text)／複数行テキスト(textarea)／画像(image)／プルダウン(select)／アイコン(icon)／リンク(link)／チェックリスト(checklist)／箇条書き(bullets)／星(stars)／トグル(toggle)／色見本(swatch)／表(table)／埋め込み(embed)。

共通で付く項目

どのパーツにも、見出し・背景の共通項目（背景色・見出し・リード文など）が自動で先頭に付きます。part.json に書く必要はありません。

管理画面では、「セクションの見出し」だけ常時表示し、残り（背景色・見出しタイプ・寄せ・装飾テキスト・本文・アンカーID）は既定で閉じた折りたたみ「セクションの背景色・見出しスタイル・説明文・ID」にまとまっています。見出しタイプは h2 / h3 の2択・既定 h2（見出しを出したくない時は「セクションの見出し」を空欄に）。

template.html（表示するHTML）

<section{{{SECTION_ATTR}}}>
{{{HEAD}}}
<div class="list1{{style}}-parts">
{{#rows}}
<div class="list-parts inview">
{{#image_url}}<div class="image-parts"><img src="{{image_url}}" alt=""></div>{{/image_url}}
<div class="text-parts">
{{#title}}<h4>{{title}}</h4>{{/title}}
{{#body}}<p>{{{body}}}</p>{{/body}}
</div>
</div>
{{/rows}}
</div>
</section>

差し込み口のルール:

• <section{{{SECTION_ATTR}}}> … セクションの背景クラス等。必ず付ける。
• {{{HEAD}}} … 共通の見出し＋リード文。section直下に置く。
• 値の出し方:
• テキスト・プルダウン・リンクなど … {{key}}
• 画像 … {{key_url}}（＝項目キー＋ _url）。{{#key_url}}…{{/key_url}} で「あれば出す」。
• 本文（複数行）… {{{key}}}（HTMLそのまま）
• 繰り返しは {{#rows}}…{{/rows}} で囲み、中で各行のキーを使う。
• 空欄を出さないために、{{#key}}…{{/key}} で囲んでおく。

着せ替え（デザインだけ切り替える）

同じグループのパーツは、入力した内容はそのままで、見た目（デザイン）だけをプルダウンで一発切り替えできます。「カラムで作ったけど、やっぱりカタログ風にしたい」というとき、入力し直す必要はありません。

着せ替えできるグループは現在6つです：

• カード系：カラムリスト・丸画像・カタログ・横並び・コース・自動スライド・スタッフ紹介・汎用レイアウト（配置選択）・ランキング・かわいい形カラム（自動幅・マスク選択）
• CTA系：CTA（誘導ボックス）・CTA（背景写真つき）・横長ビジュアル（写真＋テキスト誘導）・横長レイアウト・横幅いっぱいレイアウト
• LINE系：LINE友だち追加ボタン（単体）・LINE誘導セクション（QR＋ボタン）
• ギャラリー系：ギャラリー（複数画像）・サムネイルギャラリー（クリックで大画像切替）・横スクロールギャラリー・サムネイル横スライド（写真・動画どちらもOK）
• ステップ系：ステップ（手順）・ステップ案内（横4列・アイコン）・ステップ案内（縦・番号＋画像）・沿革年表（タイムライン）・特徴3列（アイコン）・スケジュール（1日の流れ）※見出しと説明を共有。年表の左の列は西暦でもタイトルでもOK
• オーバーレイ系：オーバーレイ（画像リンク・横並び）・オーバーレイ（写真＋テキスト＋ボタン）

• 使い方：ページ編集で対象パーツを開くと、上に 「デザイン（見た目）」プルダウンが出ます。選ぶだけで切り替わります（先にそのパーツを保存してから切り替えてください）。
• プルダウンの隣の 「サムネで選ぶ」ボタンでも切り替えられます。押すと 同じグループの仲間の見本画像だけが並ぶ画面が開き（右上の虫眼鏡で拡大も可）、選んだサムネをクリックすると即その見た目になります。パーツ追加と同じ操作感です。
• 切り替え先で使わない項目（例：スタッフの「役職」）は画面から消えますが、入力データは保持されていて、元のデザインに戻すと再び表示されます。
• このプルダウンは、着せ替えできる仲間が2つ以上あるときだけ表示されます（例：製品版はカード系が10種類。無料版は各グループ1種類以下なので出ません）。

仕組み（作る人向け）：同じ見た目グループのパーツは part.json に同じ "family" を持ちます（カード系は "family": "card-list"）。同じ項目キー（image / title / body など）で新しいカード系パーツを作り、family を付けて parts/ に置けば、プルダウンに自動で加わります＝オリジナルのデザインを増やせます。

新しいパーツを作る手順

1. parts/<名前>/ フォルダを作る。
2. part.json に title・category・sort、必要なら fields や repeater を書く。
3. template.html に表示用のHTMLを書く（上の差し込み口を使う）。
4. ページ編集の「＋パーツを追加」に出るので、選んで内容を入れて確認する。

既存パーツを変えたいとき

• parts/<名前>/template.html や part.json を直接編集します。差し込み口や項目キーの対応を崩さないよう注意してください。