自社デザインで作る

100%自社デザインで作る

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

目次

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

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"
}

このほか、必要に応じて次のキーを足せます。

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"> で全体を囲んでください。管理画面の「文字色」の指定が、このクラスを目印にして効きます。中の構造は自由です。

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

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

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

CMSのメニューは、デフォルトでは共通のJavaScript（jQuery）が開閉しています。
演出を自分で作りたい場合は、frame.json に次の1行を足してください。

"menu_js": false

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

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

frames/自社フレーム名/footer.html を置いて下さい。
フッターについては、Frames CMS標準フッターのように３択にはできません。１フレーム＝１フッターです。

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   ← 一覧・詳細

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

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

うまくいかない場合は

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