自社デザインで作る

100%自社デザインで作る

お手持ちのHTML・CSSをそのまま使って、Frames CMS を自社デザインのCMSにするための手順です。
※Free（無料版）でもお試し頂けます。
（関連リンク：フレームだけ自社デザイン、パーツはFrames CMS標準パーツを使う）
（関連リンク：仕様の詳細リファレンス）

目次

1. 作業の前に「必ず」行って下さい
2. ダウンロードと設置
3. フレームの作り方
4. パーツの作り方
5. メニューを自社のJSで動かす
6. フッターを自社のものにする
7. フォーム・お知らせ・一覧（プラグイン）の見た目
8. お客様の管理画面をすっきりさせる（使わない指定）
9. 納品前のチェックリスト
10. うまくいかない場合は

1. 作業の前に「必ず」行って下さい（1分で終わります）

1. 受皿の準備
Free（無料版）をどれでもいいので先にDLしておいて下さい。
すでに製品版をご購入されている場合は、Free（無料版）をDLした上で、マイページから製品版zipをDLして上書きしておいて下さい。

2. 最上層に「demo-pack.php」があれば削除。
初回アクセス時にサンプルのページを自動で作るためのファイルなので削除しておきます。
※お問い合わせ・お知らせなどのページは、プラグインが別に自動で作ります。不要なら管理画面から削除してください。

3. 不要ファイルの削除（いずれもFrames CMS専用なので残しておくと崩れます。）
framesフォルダを丸ごと削除。（以下手順で骨格のみのフレームが入ります）
partsフォルダを丸ごと削除。（以下手順で骨格のみのパーツが入ります）
footersフォルダを丸ごと削除。（以下手順でオリジナルのfooterを準備して頂きます）

2. ダウンロードと設置

設置のしかた

1. zipを解凍し、framesフォルダ と partsフォルダ を、ご利用中のCMSのルート（index.php がある場所）に移動。
2. アップロードし、管理者認証を済ませてログインします。
3. サイト側を表示すると、装飾のない素のHTMLが出ます。先ほどDLした骨組みフレーム（starter-zero）です。
   
4. 管理画面のパーツの「基本セット」に「見出しと文章（starter-text）」「画像（1枚）（starter-image）」が出ます。先ほどDLしたzipに入っていたパーツの2種類です。
   

3. フレームの作り方

ファイル構成

frame.json

フレームの名前とメイン画像の種類を書くファイルです。同梱のものは、この3行だけです。

{
  "name": "スターター：完全自社版（starter-zero）",
  "description": "デザイン選択画面に出る説明文",
  "mainvisual_type": "static"
}

mainvisual_type は "static"（静止画）／"slideshow"（スライド）／"video"（動画）のどれかです。メニューを常にハンバーガーにしたいときは "menu_type": "hamburger" を足します。
管理画面の入力欄は、HTMLに書いた差し込み口から自動で決まるので、ほかの設定はほとんど要りません（全キーは仕様の詳細リファレンス ↗）。

layout.html の差し込み口

自社のHTMLに、下の差し込み口を埋め込んでいきます。囲みのタグやクラス名は自由です。

必ず必要なもの

よく使うもの

ロゴの書き方

4つの差し込み口がセットで「ロゴ画像が登録されていれば画像を、無ければサイト名の文字を出す」という動きをします。下の形をまるごとコピーして使ってください。囲むタグは自由に変えられます。

<p><a href="{{HOME_URL}}">{{#HAS_LOGO}}<img src="{{LOGO_URL}}" alt="{{SITE_NAME}}">{{/HAS_LOGO}}{{^HAS_LOGO}}{{SITE_NAME}}{{/HAS_LOGO}}</a></p>

差し込み口の書き方のルール

そのまま残すタグ

下の4つは、メニューの開閉やページトップへ戻る動作にCMSのJSが使っています。id とクラス名は変えないでください。置く場所と見た目は自由です。

✅ 使いたいときだけ書く差し込み口（書くと管理画面に欄が出ます）

mainimg.html（メイン画像）

layout.html の {{{MAINVISUAL}}} の場所に、このファイルの中身が入ります。<div class="mainimg"> で全体を囲んでください。管理画面の「文字色」の指定が、このクラスを目印にして効きます。中の構造は自由です。

使わない差し込み口は、書かなければ管理画面の入力欄も出ません（画像そのものを使わないときだけ、frame.json に "mainvisual_no_image": true）。

✅ スライド・動画のメイン画像を作る場合

<div class="mainimg">
{{#MV_IMAGES}}
<div class="slide img{{n}}">
<picture>{{#HAS_SP}}<source media="(max-width:800px)" srcset="{{MV_SP}}">{{/HAS_SP}}<img src="{{url}}" alt=""></picture>
</div>
{{/MV_IMAGES}}
<div class="slide-indicators"></div>
</div>

.mainimg {position: relative;}
.mainimg .slide {position: absolute; inset: 0; opacity: 0; transition: opacity 1s;}
.mainimg .slide.active {opacity: 1;}
.mainimg .slide:first-child {position: relative;}	/*高さを確保するため*/

<div class="mainimg">
{{#HAS_VIDEO}}
<div class="slide">
<video 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>

style.css に残すもの

スターターの style.css には、CMSの動作に必要な指定だけが入っています。レイアウトも装飾もリセットCSSも入れていません。ブロックごとにコメントを書いてあるので、読んでから編集してください。

CMSが自動で出力するクラス

下は「管理画面のどこを操作すると、どのHTMLが出るか」の一覧です。使う予定のものだけCSSを書けば十分です。

✅ セクションの上下の余白の作り方（重要）

/*セクション（パーツ1つ分）の上下・左右の余白*/
section {
	padding: var(--content-space-v, var(--content-space-l)) var(--content-space-l);
}

/*section内の最初と最後の要素のマージンはリセット*/
section > :first-child {margin-top: 0;}
section > :last-child {margin-bottom: 0;}

/*見出しの上のマージンもリセット*/
main h2 {margin-top: 0;}

theme.css（色・余白・フォント）

色は「背景色 / その上に乗る文字色 / 枠線の色」の3点セットで、4つの面ぶん用意されています。ここに書いた値が、管理画面「デザイン（枠・色）」の初期値になり、お客様（クライアント）が変更するとその値で上書きされます。

4. パーツの作り方

パーツ（＝管理画面で1つずつ追加する「セクション」）は、2つのファイルだけで作れます。同梱の starter-text と starter-image を見本にしてください。

parts/自社パーツ名/
├ part.json      ← パーツの名前と、管理画面に出す入力欄の定義
└ template.html  ← 出力するHTML

フォルダ名がそのままパーツのキーになります（半角英数字とハイフン）。

part.json

{
  "title":       "見出しと文章",
  "category":    "基本セット",
  "sort":        1,
  "description": "一覧に出る説明文",
  "fields": [
    { "key": "image", "type": "image", "label": "画像" },
    { "key": "alt",   "type": "text",  "label": "画像の説明（任意）",
      "hint": "入力欄の下に出る補足文（任意）" }
  ]
}

✅ 入力欄で使える型（type）の一覧

template.html

<section{{{SECTION_ATTR}}}>
{{{HEAD}}}
{{#image_url}}
<img src="{{image_url}}" alt="{{alt}}">
{{/image_url}}
</section>

同梱の starter-text は、この仕組みを使って入力欄の定義をゼロ（"fields": []）にし、テンプレートを3行だけにした例です。

行を繰り返す入力（リピーター）

「カードを3つ並べる」「スタッフを人数分並べる」のように、同じ形を繰り返すパーツを作るときに使います。お客様（クライアント）は管理画面から、行の追加・削除・並べ替えができます。

part.json に repeater を足します（fields と並べて書きます）。

{
  "title": "スタッフ紹介",
  "category": "基本セット",
  "fields": [],
  "repeater": {
    "key": "rows",
    "label": "項目",
    "fields": [
      { "key": "image", "type": "image",    "label": "写真" },
      { "key": "name",  "type": "text",     "label": "名前" },
      { "key": "body",  "type": "textarea", "label": "紹介文" }
    ]
  }
}

template.html では、繰り返す部分を {{#rows}}〜{{/rows}} で囲みます。中では、行の key をそのまま書きます。

<section{{{SECTION_ATTR}}}>
{{{HEAD}}}
<div class="staff-list">
{{#rows}}
<div class="staff-item">
{{#image_url}}<figure><img src="{{image_url}}" alt=""></figure>{{/image_url}}
{{#name}}<h4>{{name}}</h4>{{/name}}
{{#body}}<p>{{{body}}}</p>{{/body}}
</div>
{{/rows}}
</div>
</section>

パーツのCSSとサムネイル

• パーツ用のCSSは、フレームの css/style.css にまとめて書いてください。パーツのフォルダにCSSを置いても読み込まれません。
• バージョンアップで parts を上書きしても、自社で追加したパーツのフォルダは消えません。
• クラス名は自由ですが、Frames CMS標準パーツと同じ名前（末尾が -parts のもの）は避けたほうが安全です。
• parts/自社パーツ名/thumb.webp を置くと、パーツ選択画面に見本画像が出ます（任意）。
• フレームを複数作って切り替える（着せ替える）場合、パーツの中身（入力された文章や画像）はそのまま残りますが、見た目は自動では引き継がれません。パーツ用のCSSはフレームごとに持っているためです。着せ替える予定があるなら、着せ替え対象の各フレームに、同じパーツ用のCSSを用意してください。

5. メニューを自社のJSで動かす

CMSのメニューは、共通のJS（jQuery）が style="display:..." を書き換えて開閉しています（開いた状態のクラスは付かないので、CSSの transition による演出は使えません）。
演出を自分で作りたい場合は、frame.json に次の1行を足してください。

"menu_js": false

これでCMSデフォルトの開閉JSが止まり、ハンバーガーの開閉・子メニューの開閉を、すべて自社のJSで自由に作れます。サンプルを js/menu-sample.txt に入れてあるので、ファイル名を js/main.js に変えて（コードももちろん変更して下さい）お試しください。

6. フッターを自社のものにする

frames/自社フレーム名/footer.html を置いて下さい。
フッターについては、Frames CMS標準フッターのように３択にはできません。１フレーム＝１フッターです。
無料版のクレジット表示はCMSが自動で末尾に足すので、書く必要はありません。footer.html を消せば、管理画面「フッター」で選ぶデザインに戻ります。

7. フォーム・お知らせ・一覧（プラグイン）の見た目

フォーム、お知らせ、一覧・詳細はプラグインとして動いており、HTMLの構造もCSSもプラグイン側が持っています。CSSは自動で読み込まれるので、何もしなくてもそれなりに表示されます。自社デザインに合わせる場合は、次の順で進めるのがおすすめです。

1. 自社CSSで上書きする。スターターは自社CSSをCMSのCSSより後ろに読ませているので、同じクラス名を書けば上書きできます。バージョンアップで消えないので、この方法が安全です。
2. それでも足りなければ、プラグインのCSSを直接書き換える。ただしバージョンアップで上書きされるので、変更内容は手元に控えておいてください。

   plugins/form/assets/form.css           ← フォーム
   plugins/list-news/assets/list-news.css ← お知らせ
   plugins/list-pro/assets/list-pro.css   ← 一覧・詳細

一覧・詳細はクラスが約100個あるので、色と余白の調整にとどめるのがおすすめです。フォームとお知らせ（各20個ほど）は、必要なら書き直せる量です。

8. お客様の管理画面をすっきりさせる（使わない指定）

1つのデザインで納品するときは、お客様（クライアント）に見せない入力欄や管理メニューを隠せます。data フォルダに hide.json を置き、名前をカンマ区切りで書きます。

{ "hide": "mv_text_color, mv_text_size, part_bg, menu_design, menu_code" }

• 隠した欄は何も選んでいない状態（フレームのCSSのまま）で表示されます。入力済みの値は消えません。
• 名前を間違えると、管理画面の上に赤い帯でお知らせします。

指定できる名前の一覧は仕様の詳細リファレンス ↗をご覧ください。

9. 納品前のチェックリスト

• 使わないフレーム・パーツを、サーバーから削除した
• サイトを表示して、レイアウト崩れが無いか確認した（スマホ幅も）
• メニューの開閉、子メニュー、ページ上部へ戻るボタンが動く
• お問い合わせフォームから実際に送信して、メールが届く
• 管理画面「デザイン（枠・色）」で色を変えても、極端に崩れない
• パーツに背景色を設定しても、文字が読める
• お客様（クライアント）が触る管理画面に、使えない選択肢が残っていない → 使わない指定（↑）
• CMSが出力するクラス（.btn / .bg1-* / .c など）に、自社CSSを当てた → CMSが自動で出力するクラス（↑）

うまくいかない場合は

Free（無料版）をご利用中のお客様はフォーラムから。
製品版を購入済みのお客様はサポート掲示板（マイページからアクセス）からお問い合わせ下さい。
尚、当ページ冒頭に記載のように、プログラム側のカスタマイズはサポート外なのでご了承ください。