カラースタイルを設定する

カラースタイルは、ブランドカラーなどサイト上で繰り返し使用する色を登録・管理する機能です。

ラベル付けや階層分けで整理できるため、チーム制作や大規模サイトでも色を効率的に管理できます。

ユースケース

カラースタイルを活用すると、次のような場面で制作・運用を効率化できます。

チーム制作時の色の統一管理
あらかじめカラースタイルへ色を登録しておくことで、意図しない近似色の使用を防ぎ、サイト全体の一貫性を維持できます。
効率的な使用色チェック
選択色機能を使い、カラースタイルで定義していない色を特定できます。公開前に意図しない色を特定し、その場で一括変更が可能です。
サイト全体の色変更を効率化
カラースタイルを設定することで、適用箇所をまとめて変更できます。要素ごとに色を変更する作業が不要になり、修正時間を短縮できます。

カラースタイルへ色を登録する方法は、スタイルパネルから登録する方法と、色設定から登録する方法があります。

色を設定したいボックス要素を選択します。
右パネルで、[背景色]や[タイポグラフィ]の[色]など、色設定メニューからカラーパレットを表示します。パネルが閉じている場合は、右パネルを開いてください。
[スタイル]タブをクリックします。
[カラースタイルを登録]をクリックすると即座にカラースタイルが追加され、手順1で選択した要素にそのカラースタイルが適用されます。
登録する色の指定は、カラーパレット使用して登録します。
カラースタイルの名称（ラベル）を[New Color]から変更する際は、カラーパレット内のラベル入力欄をクリックして変更します。

登録したカラースタイルは、用途や使用箇所がわかる名称（ラベル名）を設定すると効率的に管理できます。

ラベル名を「/（半角スラッシュ）」で区切って階層を設定すると、フォルダのように分類できます。

カラースタイルには任意の名称を設定できます。用途が分かるラベル名を設定すると、チームメンバー間で色の意図を共有しやすくなります。

スタイルパネル、または色設定からラベル名を編集できます。

ラベル名を編集したいカラースタイルが適用されたボックス要素を選択します。
右パネル内の色設定メニューに表示されているカラースタイル名をクリックして、カラーパレットを表示します。パネルが閉じている場合は、右パネルを開いてください。
[スタイル]タブをクリックします。
カラースタイルのラベル名称横のアイコンをクリックします。初期設定のままカラースタイルを登録している場合には、[New Color]という名称で表示されます。
ラベル入力欄をクリックして、ラベル名を変更します。

ラベル名を「/（半角スラッシュ）」で区切ると、スラッシュ前の名称がフォルダのような役割となり、カラースタイルを階層で整理できます。

この場合、「Text」という親階層の中に「Heading」「Body」が格納されます。

カラースタイルは、ボックス要素やテキストの色設定から適用できます。

カラースタイルを適用したいボックス要素を選択します。
右パネルで、[背景色]や[タイポグラフィ]の[色]など、色設定メニューからカラーパレットを表示します。パネルが閉じている場合は、右パネルを開いてください。
[スタイル]タブをクリックします。
一覧から、適用したいカラースタイルを選択します。

注意：カラースタイルとカラープロパティ

カラースタイルをCMSカラープロパティとリストのカラープロパティへ適用することはできません。

カラースタイルに登録色を編集すると、適用中のすべての箇所に変更が反映されます。

登録色を編集したいカラースタイルが適用されたボックス要素を選択します。
右パネル内の色設定メニューに表示されているカラースタイル名をクリックして、カラーパレットを表示します。パネルが閉じている場合は、右パネルを開いてください。
[スタイル]タブをクリックします。
カラースタイルのラベル名称横のアイコンをクリックします。
カラーパレットを使用して、登録色を変更します。