第13章 デザイン設定
デザイン設定では、サイト全体の見た目——カラー（配色）・フォント（書体）・CSS（スタイル） をまとめて管理します。
⚠️ この章には「安全な操作」と「上級者向けの操作」が混在します。 - 色やフォントの切り替えは、プリセットを選ぶだけなので安全です（一番おすすめ）。 - CSSの直接編集は、サイト全体のレイアウトに影響するため上級者向けです。
まずは「カラー・フォント」から始め、CSSの編集が必要なときは制作担当者にご相談ください。
左側メニュー 「管理」→「デザイン設定」 を開きます。 画面は 「ベーシックスタイル」「カラー・フォント」「パーツCSS」 の3つのタブに分かれています（開いた直後は「カラー・フォント」が表示されます）。
ワンポイント 「デザイン設定」「スタイルテンプレート」は、権限のあるアカウントにのみ表示される機能です。メニューに項目が出ない場合は、権限の設定について管理者にご確認ください。
システムの素材と、自前の素材
デザイン設定で扱う素材（カラーセットやCSS）には、2種類あります。
| 種類 | 説明 | 操作 |
|---|---|---|
| システム バッジ付き | FineCMSサイドが用意した共通素材 | そのままは編集できません。「複製して編集」 で自分用のコピーを作って使います |
| 自前の素材 | 自分で作成・複製した素材 | 自由に編集・削除できます |
ワンポイント システム素材を土台に 「複製して編集」 すれば、元の素材は残したまま安全に調整できます。 まずは複製してから触る、と覚えておくと事故がありません。
① カラー・フォント（おすすめ・安全）
カラー・フォントタブでは、サイトの配色と書体をセットにした カラー・フォントセット を管理します。 色やフォントを選ぶだけなので、サイトの構造を壊す心配がありません。まずはここから調整するのがおすすめです。
セットを切り替える
一覧から使いたいセットの 「有効化」 を押すと、そのセットがサイト全体に適用されます。 （「有効中」バッジが付いているものが、現在使われているセットです）
システムのセットを調整したいときは、「複製して編集」 で自分用のコピーを作ってから編集します。
カラーの役割（--col-*）
色は「役割」ごとに決まっています。役割に沿って色を決めると、サイト全体で統一感が出ます。
| 変数 | 役割 |
|---|---|
--col-a |
Primary（主役・主要ボタン） |
--col-b |
Secondary（補助） |
--col-c |
Accent（強調・目を引かせたいところ） |
--col-d |
Sub Accent（補助アクセント） |
--col-e |
Success（成功・完了の表示） |
--col-f |
Info（情報・補足） |
--col-g |
Warning（注意・警告） |
--col-o |
On Primary（--col-a の背景に乗る文字色） |
--col-p |
On Secondary（--col-b の背景に乗る文字色） |
--col-w |
White（白） |
--col-x |
背景メイン |
--col-y |
背景サブ（交互の色違いなどに） |
--col-z |
Black（最も暗い・引き締め） |
（このほか、装飾用の強調色（イチオシ表示など）といった上級者向けの役割もあります）
決まった色以外は自由に使えます
上の表にない記号（i・j・k・l・m・n など）は、役割が決まっていない自由に使える枠です。
「もう1色ほしい」というときは、これらを使って好きな色を追加できます（追加は制作担当者にご依頼ください）。
色のバリエーション（薄い色・濃い色）がほしいとき
同じ色の「もう少し薄い色」「もう少し濃い色」がほしいときは、決まった付け方があります。
- 薄くしたいとき：
--col-aa→--col-ab→--col-acの順に、だんだん薄くなります - 濃くしたいとき：
--col-ax→--col-ay→--col-azの順に、だんだん濃くなります
（--col-a の部分は他の色記号（--col-b など）でも同じ考え方です。追加は制作担当者にご依頼ください）
フォントの設定
| 項目 | 内容 |
|---|---|
フォントファミリー（--font-*） |
書体の指定（--font-a＝本文／--font-b＝見出し／--font-c＝サブ） |
| Web フォント URL | Google Fonts などのURLを貼ると、サイトに自動で読み込まれます |
フォントサイズ（--fsize-*） |
文字サイズの段階（--fsize-a＝特大 〜 極小まで） |
色は 色見本・スライダー・Hex（カラーコード） のいずれかで指定できます。設定できたら 「保存」 を押します。
② ベーシックスタイル ／ ③ パーツCSS（上級者向け・注意）
⚠️ この2タブは、CSSを直接編集する上級者向けの機能です。 保存すると、その内容がサイト全体に即座に反映されます。 HTML/CSSの知識がないまま編集すると、 サイト全体のレイアウトが崩れることがあります。編集は制作担当者にご依頼ください。
| タブ | 対象 |
|---|---|
| ベーシックスタイル | サイトの土台となるCSS |
| パーツCSS | パーツ用の追加CSS |
どちらも、名前とCSSコードを入力して保存する形式です。
編集する場合は、次のルールを必ず守ってください（守らないとサイトが崩れます）。
- 色やサイズは、直接の数値（
#fffや20px）ではなく、カラー変数（--col-aなど）を使う。 - 配信されたCSSファイル（
default-style.cssなど）を、サーバー上で直接書きかえない（次回の保存時に上書きされます）。 - システムの素材は、「複製して編集」 で自分用にしてから触る。
スタイルテンプレート（素材の組み合わせ）
左メニューの 「管理」→「スタイルテンプレート」 では、デザイン設定で用意した素材を組み合わせて、ページの「ひな形」を作れます。
- デザイン設定 … カラーセットやCSSなどの素材そのものを作る場所
- スタイルテンプレート … その素材を組み合わせて、ページの見た目とひな形を決める場所
スタイルテンプレートの設定項目は次のとおりです。
| 項目 | 内容 |
|---|---|
| スタイルテンプレート名 | テンプレの名前（例：スタンダード） |
| カラー・フォントセット | 使用するカラーセットを選択 |
| ベーシックスタイル | 土台CSSの管理方法（CMS内管理／顧客サーバー管理） |
| パーツCSS | 使用するパーツCSSを選択 |
追加 <head> タグ |
アクセス解析タグなどを差し込む欄 |
| 初期ブロック構成 | ページ作成時に最初から入れておくブロック（ヘッダー・フッターなど） |
⚠️ 上級者向けの項目 「ベーシックスタイル」を顧客サーバー管理にしたり、土台スタイルを使わない（replace）設定にすると、 外部のCSSに見た目が完全に依存します。これらは制作担当者向けの設定です。 ふだんは、用意された素材を選んで組み合わせる範囲でお使いいただくのが安全です。
保存とサイトへの反映
デザイン設定・スタイルテンプレートの変更は、保存すると自動でサイトへ反映されます。 色やフォントの変更は、サイトを表示すると新しい配色で表示されます。
まとめ
- 「管理」→「デザイン設定」 を開く（3タブ：スタイル／カラー・フォント／パーツCSS）
- まずは カラー・フォント タブで配色・書体を調整（プリセットを選ぶだけなので安全）
- システム素材は 「複製して編集」 してから触る
- スタイル・パーツCSS の直接編集は上級者向け（制作担当者へ）
- スタイルテンプレートで素材を組み合わせ、ページのひな形を作る
- 保存すると自動でサイトへ反映される
← 目次にもどる ／ 次は 👉 14. AI・検索エンジン対応のしくみ