自社デザインにCMSを組み込む（業者向け：スタート版）

HTMLとCSSを最低限の骨組みだけにしたフレームを用意しました。まずこれを動かして、自社のデザインを組み込んでいくとより理解が進みます。細かい仕様はこちら（自社デザインで作り込む）をご覧ください。

最低限の骨組みだけのフレームをダウンロード

zip解凍後、「starter-bare」フォルダをご利用中のCMSの「frames」フォルダに移動してアップロードして下さい。
その後、CMS管理画面の「デザイン（枠・色）」で「スターター：骨組みのみ（starter-bare）」を選択して適用して下さい。

フレームのファイル構成

ファイル／フォルダ	役割	必須
`layout.html`	サイト全体の骨組み。解説（↓）	必須
`mainimg.html`	トップのメイン画像。解説（↓）	必須
`frame.json`	フレームの定義（表示名・メイン画像タイプなど）。フレーム単位で書き換えが必要です。解説（↗）	必須
`css/style.css` `css/theme.css`	レイアウト・装飾。色・余白・フォントの設定。解説（↓）	必須
`js/main.js`	このフレーム専用のJS。	任意
`images/`	フレームに同梱する画像。	任意
`thumb.webp`	デザイン選択画面に出る見本画像。	任意

layout.html の解説

✅ 骨組みから、最低限整った形にしてみたい方へのヒント

↓ Before：この骨組みだけの状態から

↓ After：横並びのレイアウトに調整します。

layout.htmlに<header>タグを追加します。

style.cssに最低限のレイアウト用スタイルを追加します。

/*ヘッダー設定*/
header {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 2rem;
}

/*ヘッダーh1*/
header h1 {
	font-size: 0.7rem;
	width: 100%;
}

/*メニュー*/
#menubar ul {
	list-style: none;
	margin: 0;
	padding: 0;
}

/*大きな端末メニュー*/
.large-screen #menubar > nav > ul {
	display: flex;
	gap: 1rem;
}

/*大きな端末メニューのドロップダウン*/
.large-screen #menubar ul ul {
	position: absolute;z-index: 100;
}

/*小さな端末メニュー*/
.small-screen #menubar {
	position: fixed;overflow: auto;z-index: 100;
	right: 0px;top: 0px;
	width: 100%;
	height: 100%;
	padding: 50px;
	background: var(--primary-color);
	color: var(--primary-inverse-color);
}

以上です。
必要に応じてスタイルを追加して下さい。

必ず必要な差し込み口

差し込み口	役割・書き方
`{{META_TITLE}}`	ページのタイトル。`<title>{{META_TITLE}}</title>` のように使います。
`{{META_DESCRIPTION}}`	ページの説明文。`<meta name="description" content="{{META_DESCRIPTION}}">` のように使います。
`{{BASE}}` / `{{FRAME}}`	自分のCSSや画像を読み込むためのパス。`<link rel="stylesheet" href="{{BASE}}/frames/{{FRAME}}/css/style.css">` のように使います。
`{{{HEAD_CSS}}}`	CMSが出すCSS。`</head>` の直前に必ず置きます。
`{{{SCRIPTS}}}`	CMSが出すJS。`</body>` の直前に必ず置きます。
`{{{CONTENT}}}`	パーツを一括出力します。`<main>` の直下に置いてください。間に他のタグを挟むと、パーツの背景色などが正しく出ません。
`{{{MAINVISUAL}}}`	メイン画像。同じフォルダの `mainimg.html` の中身がここに入ります。
`{{{FOOTER}}}`	フッター。
`{{{NAV}}}`	メニュー。
`{{SITE_NAME}}` `{{HOME_URL}}` `{{HAS_LOGO}}` `{{LOGO_URL}}`	ロゴまわり。この4つはセットで1つの動きをします（下記「ロゴの書き方」参照）。
`{{#IS_HOME}}〜{{/IS_HOME}}`	トップページのときだけ出したいものを、この中に入れます。主な用途はメイン画像で、囲まないと下層ページにもメイン画像が出ます。 `{{#IS_HOME}}{{{MAINVISUAL}}}{{/IS_HOME}}`
`{{BODY_CLASS}}`	`<body class="{{BODY_CLASS}}">` と書きます。トップは `home`、下層は `page-<スラッグ>` が入ります（出るのはどちらか一方）。「トップだけ背景を変える」「会社概要のページだけ余白を広げる」といった指定ができます。
`{{PAGE_TITLE}}`	そのページの「ページ名」。`h1` に使う場合は、トップページも「ホーム」というページ名になるため、下のように出し分けます。 `<h1>{{#IS_HOME}}{{SITE_NAME}}{{/IS_HOME}}{{^IS_HOME}}{{PAGE_TITLE}}{{/IS_HOME}}</h1>`

このほかに、PC用とスマホ用でメニューを分ける {{{NAV_PC}}} / {{{NAV_MOBILE}}}、メイン画像に重ねる専用ロゴ {{LOGO_HERO_URL}}、フッターを自作する場合の {{COPYRIGHT}} {{YEAR}} {{CREDIT}}、フレーム固有の差し替え素材 {{ASSET_○○}} などがあります。詳しくはこちら（layout.html の差し込み口）をご覧ください。

ロゴの書き方

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

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

お客様がロゴ画像を用意していない場合でも崩れないための書き分けです。{{^HAS_LOGO}}〜{{/HAS_LOGO}} を消さないでください。

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

書き方	意味
`{{名前}}`	文字として出す（タイトル・URLなど）
`{{{名前}}}`	HTMLの塊が入る場所（中身・メニュー・フッターなど）
`{{#名前}}〜{{/名前}}`	あるときだけ出す
`{{^名前}}〜{{/名前}}`	ないときだけ出す

そのまま残すタグ

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

タグ	役割
`<div id="menubar">`	開閉メニュー。この中に `{{{NAV}}}` を入れます。
`<div id="menubar_hdr">`	ハンバーガーボタン。中の `<span>`×3 もそのまま必要です。
`<div id="menubar-overlay">`	メニューを開いたときの背景。クリックで閉じます。
`<div class="pagetop">`	ページの上部へ戻るボタン。

コメントタグ  の中に {{ }} を書かないでください。コメントで囲んでもCMSは解釈してしまうので、ページが真っ白になるなどの不具合が出る可能性があります。

mainimg.html（メイン画像）の解説

✅ 骨組みから、最低限整った形にしてみたい方へのヒント

↓ Before：この骨組みだけの状態（画像とテキストブロックがバラバラ）から

↓ After：このレイアウト（画像上にテキストブロックを重ねる）に調整します。

style.cssに最低限のレイアウト用スタイルを追加します。

/*メイン画像全体を囲むブロック*/
.mainimg {
	width: 100%;
	position: relative;
}

/*テキストブロック*/
.mainimg .text {
	position: absolute;z-index: 1;
	inset: 0;
	color: #fff;
	padding: 3rem;
}

以上です。
必要に応じてスタイルを追加して下さい。

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

差し込み口	役割・書き方
`{{#MV_IMAGES}}〜{{/MV_IMAGES}}` `{{url}}`	画像の枚数ぶん繰り返されます。`{{url}}` が画像のURLです。
`{{#HAS_SP}}〜{{/HAS_SP}}` `{{MV_SP}}`	スマホ用画像が設定されたときだけ出ます。`<picture>` と組み合わせて使います。 `<picture>{{#HAS_SP}}<source media="(max-width:800px)" srcset="{{MV_SP}}">{{/HAS_SP}}<img src="{{url}}" alt=""></picture>`
`{{#HAS_TEXT}}〜{{/HAS_TEXT}}`	管理画面で文字が入力されたときだけ出ます。空のときに枠だけ残らないよう、テキスト全体をこれで囲みます。この囲みは画像の繰り返しの外に置いてください。中に入れると、画像を複数枚使う設定にしたときに2枚目以降にもテキストが付いてしまいます。
`{{MV_TEXT_CLASS}}`	管理画面で選んだ「テキストの位置」と「文字サイズ」のクラスが入ります。`<div class="text {{MV_TEXT_CLASS}}">` 位置は `left-parts` / `center-parts` / `right-parts`、文字サイズは `mv-size-lg` / `md` / `sm` です。この6つのCSSはフレーム側で用意してください。
`{{{MV_CATCH}}}` `{{{MV_SUB}}}`	キャッチコピーとサブテキスト。改行を活かすため3重カッコで書きます。それぞれ `{{#HAS_CATCH}}` `{{#HAS_SUB}}` で囲みます。
`{{MV_BTN1_CLASS}}` `{{MV_BTN1_URL}}` `{{MV_BTN1_TEXT}}`	メイン画像上のボタン。`{{#HAS_BTN1}}` で囲みます。2つ目は `BTN2` で同じ形です。クラスは `btn` / `btn inverse`（塗りつぶし／枠線）が入るので、直書きせず `{{MV_BTN1_CLASS}}` を使ってください。

スライドショーや動画のメイン画像を作る場合は、こちら（mainimg.html の作り方）をご覧ください。

style.css / theme.css

レイアウトや装飾は自由に書き換えられます。ただしパーツの表示に必要な部分があるので、スターターの style.css に書いてあるコメントを読んでから編集してください。どこを触ってよいかを3つのブロックに分けて書いてあります。

theme.css は、色・余白・フォント・ロゴの大きさをまとめて管理するファイルです。ここに書いた値はフレームだけでなくCMSのパーツにも使われます。各変数の意味は theme.css のコメントに書いてあります。

色は「背景色 / その上に乗る文字色 / 枠線の色」が3点セットになっています。背景色を敷くときは、文字色も同じ面の相方をセットで指定してください。片方だけ指定すると、色を敷いたセクションで文字が消えます。詳しくはこちら（3点セット早見表）をご覧ください。

うまくいかない場合は

フォーラムまたは、サポート掲示板（※サポート掲示板は購入者様限定。マイページからアクセスできます。）からお問い合わせ下さい。