フレームの作り方

目次

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

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

フレームとは

サイト全体の「枠（デザインのテンプレート）」です。フレームを切り替えても、ページの中身（パーツ）やメイン画像はそのまま引き継がれます。1つのフォルダが1つのフレームで、frames/<フレームID>/ に置きます。フォルダを置くだけで、管理画面の「デザイン（枠・色）」に選択肢として出ます。

ファイル構成

frames/<フレームID>/
  frame.json      … フレームの定義（必須）
  layout.html     … サイト全体の骨組み（必須）
  mainimg.html    … トップのメインビジュアル（必須）
  css/style.css   … レイアウト・装飾
  css/theme.css   … テーマカラー（色の変数）
  js/main.js      … フレーム固有のスクリプト（任意）
  images/         … 同梱画像（メイン画像の初期素材など）
  thumb.jpg       … デザイン選択画面のサムネ（任意）

frame.json

{
  "name": "フレーム名（管理画面に出る）",
  "description": "説明文",
  "mainvisual_type": "static"
}
  • mainvisual_type は "static"（静止画1枚）／"slideshow"（複数枚スライド）／"video"（動画）のいずれか。
  • 任意で次も指定できます（例）。
{
  "mainvisual_type": "static",
  "menu_breakpoint": 1000,
  "menu_hide_when_hidden": true,
  "menu_dropdowns": ["header nav"]
}

差し込み口（プレースホルダ）のルール

CMSが値を入れる場所を {{ }} で書きます。

  • {{key}} … 値を入れる（記号は自動でエスケープ）
  • {{{key}}} … HTMLをそのまま入れる（メニューや本文など、HTMLが入る場所）
  • {{#key}}…{{/key}} … 値があるときだけ表示（配列なら繰り返し）
  • {{^key}}…{{/key}} … 値がないときだけ表示
⚠️ この差し込み口を消したり名前を変えたりすると、ロゴ・メニュー・本文などが出なくなります。

layout.html（サイトの骨組み）

最低限、次の差し込み口を含めます（既存フレームをコピーして直すのが安全です）。

  • {{META_TITLE}} / {{META_DESCRIPTION}} … タイトル・説明
  • {{BASE}} / {{FRAME}} … CSS・JSの読み込みパスに使う
  • {{{HEAD_CSS}}} … CMSが足す <head> 内CSS
  • {{#IS_HOME}}…{{/IS_HOME}} … トップだけ（メインビジュアルの出し分けなど）
  • {{HOME_URL}} … トップへのリンク
  • ロゴ … {{#HAS_LOGO}}<img src="{{LOGO_URL}}" alt="{{SITE_NAME}}">{{/HAS_LOGO}}{{^HAS_LOGO}}{{SITE_NAME}}{{/HAS_LOGO}}
  • {{{NAV}}} … メニュー
  • {{{MAINVISUAL}}} … メインビジュアル（トップのみ）
  • {{{CONTENT}}} … 各ページのパーツ
  • {{{FOOTER}}} … フッター
  • {{{SCRIPTS}}} … 共通スクリプト

このほか、開閉ボタン（ハンバーガー #menubar_hdr）、メニューオーバーレイ #menubar-overlay、ページ上部へ戻る .pagetop を規約どおり置きます。

mainimg.html（メインビジュアル）— 3タイプ

テキスト・ボタンの差し込み口は3タイプ共通です。

{{#HAS_TEXT}}
<div class="text {{MV_TEXT_CLASS}}">
{{#HAS_CATCH}}<h2>{{{MV_CATCH}}}</h2>{{/HAS_CATCH}}
{{#HAS_SUB}}<p>{{{MV_SUB}}}</p>{{/HAS_SUB}}
{{#HAS_BTN1}}
<div class="btn-container">
<div class="{{MV_BTN1_CLASS}}"><a href="{{MV_BTN1_URL}}">{{MV_BTN1_TEXT}}</a></div>
{{#HAS_BTN2}}<div class="{{MV_BTN2_CLASS}}"><a href="{{MV_BTN2_URL}}">{{MV_BTN2_TEXT}}</a></div>{{/HAS_BTN2}}
</div>
{{/HAS_BTN1}}
</div>
{{/HAS_TEXT}}

静止画（static）・スライド（slideshow）

画像を {{#MV_IMAGES}}…{{/MV_IMAGES}} で繰り返します（静止画は1枚、スライドは複数枚で、同じ仕組み）。

<div class="mainimg">
{{#MV_IMAGES}}
<div class="slide img{{n}}">
  （ここに上のテキスト・ボタンブロック）
  <picture>{{#HAS_SP}}<source media="(max-width:900px)" srcset="{{MV_SP}}">{{/HAS_SP}}<img src="{{url}}" alt=""></picture>
</div>
{{/MV_IMAGES}}
</div>

スライドにするときは、<div class="slide-indicators"></div> を足し、CSS・JSでスライド動作を付けます。HTMLの骨格は静止画とほぼ同じです。

動画（video）

<div class="mainimg video-zone">
{{#HAS_VIDEO}}
<div class="slide img1">
  （ここに上のテキスト・ボタンブロック）
  <video class="bgVideo" autoplay muted loop playsinline preload="metadata">
  {{#HAS_VIDEO_SP}}<source src="{{MV_VIDEO_SP}}" media="(max-width:800px)" type="video/mp4">{{/HAS_VIDEO_SP}}
  <source src="{{MV_VIDEO}}" type="video/mp4">
  </video>
</div>
{{/HAS_VIDEO}}
</div>

新しいフレームを作る手順

  1. frames/<新ID>/ フォルダを作る。
  2. frame.json を置く（name・description・mainvisual_type）。
  3. 既存フレームの layout.html・mainimg.html をコピーして直す（差し込み口は残す）。
  4. css/style.css・css/theme.css を整える。
  5. 管理画面「デザイン（枠・色）」で選んで適用する。

既存フレームを変えたいとき

  • 色だけなら、管理画面「デザイン」のテーマカラーで足りることが多い（コード変更不要）。
  • レイアウトを変えるときは style.css や layout.html を直接編集。差し込み口（{{…}}）は消さない。

困ったとき

  • ロゴやメニューが出ない → 差し込み口を消していないか確認。
  • メインビジュアルが出ない／崩れる → frame.json の mainvisual_type と mainimg.html の型が合っているか確認。