選択色は、選択しているボックスやグループ内で使用している色を一覧で確認できる機能です。 ページ単位や要素単位で色の確認や一括変更ができ、配色の確認や調整を効率化できます。
サイト全体の色を一括管理する機能ではありませんが、選択した範囲内やページ内の使用色を把握し、まとめて変更できます。
ユースケース
以下のようなシーンで制作や運用の効率化に役立ちます。
公開前に色の使用状況をチェックする
カラースタイルに登録済みのされていない色が使用されている箇所を一覧で確認できます。公開前に意図しない色が含まれていないかを確認し、その場で修正できます。
ページ全体の配色をエディタ上で検討する
色の一括変更機能を活用し、異なる配色パターンを簡単に作成してページ全体の見え方を比較・検討できます。
注意：次の用途で使用している色は、選択色の一覧に表示されません。
レスポンシブ設定で変更した色（該当ブレイクポイントに切り替えると一覧に表示されます）。
シャドウに設定している色。
CMSカラープロパティで指定している色。
フォームのプレースホルダー色。
条件付きスタイルで変更した色（条件付きスタイルをオンにした状態でのみ一覧に表示されます）。
選択色を表示する
選択色は、右パネルの[ボックス]タブの最下部に表示されます。
使用中の色を確認したいボックス要素を選択します。
右パネルで[ボックス]タブを選択します。パネルが閉じている場合は、右パネルを開いてください。
パネルをスクロールして、最下部の[選択色]を表示します。
色の使用数横の下矢印をクリックすると、使用している色の詳細が表示されます。
色は、以下のように一覧表示されます。
個別の色にカーソルを乗せると、その色を使用している箇所がエディタ上でハイライト表示されます。
カラースタイルに登録していないグラデーションカラーは、すべて「LINEAR」と表示されます。
選択した要素内の色を一括変更する
選択している要素内で使用している色は、選択色から一括で変更できます。 選択色を使った変更は、選択した要素やページにのみ反映され、プロジェクト全体には影響しません。
Tips：プロジェクト全体で色を一括変更したい
プロジェクト全体で色を一括変更したい場合は、「カラースタイル」機能を利用します。 要素に適用しているカラースタイルを編集すると、そのスタイルを使用しているすべての要素に変更内容が反映されます。
詳細は、カラースタイルを設定するを参照してください。
選択色からカラースタイルに追加する
選択色を表示します。
選択色の一覧から、カラースタイルに登録したい色をクリックします。
カラーパレットの[カスタム]タブ選択し、開きます。
カラーコードをコピー＆ペーストしておきます。
[スタイル]タブを選択し、開きます。
[カラースタイルを登録]ボタンをクリックします。登録しているスタイルが多くボタンが表示されていない場合には、スクロールして最下部を表示してください。
即座に、選択色がカラースタイルのデフォルト色に置き換わり、[New Color]というカラースタイルとして登録されます。
手順4でコピーしたカラーコードを貼り付けます。
必要に応じて、カラースタイルのラベル名称を変更します。
