SCSS
SCSS管理
サイトの色・余白・フォントサイズを、管理画面から直接 SCSS で調整できます。
保存すると自動でCSSへ変換されてすぐに反映。変更履歴（リビジョン）と差分も残るので、やり直しを恐れずに試せます。
概要
SCSS管理は、サイトの「見た目」を運用に取り込むための機能です。
SCSS（CSS というデザイン用の言語をより書きやすくしたもの）を管理画面から編集して、色や余白といったデザインを調整できます。
保存すると自動でCSSに変換（コンパイル）されてサイトに反映され、編集ごとに変更履歴（リビジョン）が残るので過去の版との違いも見比べられます。
共通・トップ・下層のほか、特定のページやディレクトリだけに適用する個別指定もできます。
デザインの調整を、制作会社に都度依頼せず運用側で完結できるのが利点です。
かんたんに言うと
Webサイトの「色」「文字の大きさ」「余白」といった見た目は、CSS という設計図で決まっています。
SCSS は、その CSS をより整理して書きやすくしたものです。
この機能を使うと、管理画面の中から SCSS を直接編集して、サイトのデザインを細かく調整できます。
編集した内容は、サーバー上で自動的に CSS に変換（コンパイル）されてサイトに反映されます。
変更するたびに履歴（リビジョン）が自動で残るので、「前の状態に戻したい」「どこを変えたか見比べたい」というときも安心です。
過去の版との違いを差分として表示する機能もあります。
なお SCSS管理はサーバー上にファイルを生成する操作のため、システム管理者だけが扱える設定になっています。
この機能のポイント
-
01
管理画面でデザイン調整
SCSS を管理画面から編集して、色や余白などサイトの見た目を運用側で調整できます。
-
02
保存で自動反映
保存すると自動で CSS に変換され、サイトに反映されます。手作業のアップロードは不要です。
-
03
履歴と差分が残る
編集のたびに履歴（リビジョン）が残り、過去の版との違いを見比べたり前の状態に戻したりできます。
-
04
読み込み箇所を指定
共通・トップ・下層のほか、特定のページやディレクトリだけにデザインを適用する個別指定もできます。
-
05
テーマ別に出し分け
複数のテーマがある場合、テーマごとに異なるSCSSを適用してデザインを出し分けられます。
使い方の流れ
-
SCSS を新規作成・編集する
管理画面の SCSS 管理で、デザインを記述する SCSS を新しく作るか、既存のものを開いて編集します。
-
適用範囲を決める
共通・トップのみ・下層のみ、または特定のページ／ディレクトリだけ、といった読み込み箇所を選べます。テーマ別の出し分けも可能です。
-
保存してコンパイル
保存すると自動で CSS に変換され、サイトに反映されます。変更内容はリビジョンとして履歴に残ります。
-
履歴で見比べ・前に戻す
編集ごとに残るリビジョンで過去の版と差分を見比べ、必要なら以前の状態に呼び戻せます。
できること
- 管理画面からの SCSS の新規作成・編集
- 保存時の自動コンパイル（CSS への変換とサイト反映）
- 編集履歴（リビジョン）の自動保存
- 過去の版との差分（diff）表示
- リビジョンを指定して過去の内容を呼び戻す
- 読み込み箇所の指定（共通／トップのみ／下層のみ）
- 特定のページ・ディレクトリだけに適用する個別指定
- テーマ別のSCSS適用（デザインの出し分け）
画面で見る機能の詳細
保存して即コンパイル反映
SCSSを編集して保存すると、自動でCSSに変換されサイトの見た目が変わる一連の流れです。
「保存→反映」のつながりは動きで見せると一番納得できます。
変更履歴と差分の表示
編集ごとに残るリビジョン一覧と、過去の版との違いを並べて見せる差分画面です。どこが変わったかは色分けされた静止画で十分伝わります。
読み込み箇所の指定
共通・トップのみ・下層のみ、特定ページだけ、といった適用範囲を選ぶ設定部分です。どこに効かせるかの選択肢は1枚の画面で示せます。
活用シーン
- ブランドカラーや余白の微調整を、制作会社に依頼せず運用側で素早く行いたいとき
- 共通・トップ・下層など、適用範囲を分けてデザインを調整したいとき
- 複数テーマでデザインを出し分けたいとき
- デザイン変更の履歴を残し、いざというとき前の状態に戻せるようにしておきたいとき