第13章 デザイン設定
デザイン設定では、サイト全体の見た目——カラー（配色）・フォント（書体）・CSS（スタイル） をまとめて管理します。
⚠️ この章には「安全な操作」と「上級者向けの操作」が混在します。 - 色やフォントの切り替えは、プリセットを選ぶだけなので安全です（一番おすすめ）。 - CSSの直接編集は、サイト全体のレイアウトに影響するため上級者向けです。
まずは「カラー・フォント」から始め、CSSの編集が必要なときは制作担当者にご相談ください。
左側メニュー 「管理」→「デザイン設定」 を開きます。 画面は 「ベーシックスタイル」「カラー・フォント」「パーツCSS」 の3つのタブに分かれています（開いた直後は「カラー・フォント」が表示されます）。
ワンポイント 「デザイン設定」「スタイルテンプレート」は、権限のあるアカウントにのみ表示される機能です。メニューに項目が出ない場合は、権限の設定について管理者にご確認ください。
スタイルはどのように反映されるのか？（全体像）
先に全体の仕組みを図で押さえておくと、このあとの各項目が分かりやすくなります。
ポイント
- これから説明する「カラー・フォントセット」「ベーシックスタイル」「パーツCSS」（このページの①②③）は、あくまで材料です。
- その材料を組み合わせて、スタイルテンプレート（後述）という「ひな形」を作ります。サイトには、既定のスタイルテンプレートが1つ設定されています。
- ページは、何も指定しなければサイトの既定スタイルテンプレートがそのまま使われます。ページ設定で個別に別のスタイルテンプレートを選ぶと、そのページだけ見た目を変えられます（詳しくは 4章 ページを編集する の「適用スタイル表示バー」）。
- 投稿（お知らせ・ブログなど） は、記事1本ごとには選べません。「投稿タイプ」（記事の種類）ごと にスタイルテンプレートを指定します。同じ投稿タイプの記事はすべて同じ見た目になります（詳しくは 12章 投稿タイプを管理する の「スタイルテンプレート」）。
見た目が決まる順番（優先順位）
同じ「カラー・フォント」や「ベーシックスタイル」でも複数の場所で指定できるため、実際に使われるのは次の順番で決まります（上に行くほど優先されます）。
- ページ（または投稿タイプ）で個別に指定したスタイルテンプレート
- サイトの既定スタイルテンプレート
- システムの既定値
個別に指定していない項目は、この順番で1つ下にさかのぼって決まります。
システムの素材と、自前の素材
デザイン設定で扱う素材（カラーセットや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〜jの10段階）。見出しタグとは次のように対応します：--fsize-b＝h1、--fsize-c＝h2、--fsize-d＝h3、--fsize-e＝h4、--fsize-f＝h5、--fsize-g＝h6（--fsize-aは見出し以外の「特大」文字用、--fsize-h〜jは本文中の小さめの文字用）。実際の文字サイズ（px）は、このカラー・フォントセットの中で自由に調整できます |
色は 色見本・スライダー・Hex（カラーコード） のいずれかで指定できます。設定できたら 「保存」 を押します。
ワンポイント フォントサイズや色の変数（
--fsize-*・--col-*）が、実際にHTMLのどこにどう使われているかをもっと詳しく知りたい方は 👉 17. デザイナー・制作者向け：スタイルのしくみ詳細 をご覧ください。
② ベーシックスタイル ／ ③ パーツCSS（上級者向け・注意）
⚠️ この2タブは、CSSを直接編集する上級者向けの機能です。 保存すると、その内容がサイト全体に即座に反映されます。 HTML/CSSの知識がないまま編集すると、 サイト全体のレイアウトが崩れることがあります。編集は制作担当者にご依頼ください。
| タブ | 対象 | こんなときに使う |
|---|---|---|
| ベーシックスタイル | サイトの土台となるCSS（レイアウトの骨格全体） | サイト全体の基本構造にかかわる大きな変更をしたいとき |
| パーツCSS | パーツ単位の追加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・検索エンジン対応のしくみ