新Dressで簡単！よく使う色を登録する方法

こんにちは！デザイナーのオモトです！

サイトを作る時にコーポレートカラーなど、同じ色を使い回したいなと思う時ってありますよね。
新Dressの「Dressカラー」に１度登録さえしてしまえば、サイト上のさまざまな場所で、設定した色を呼び出すことができます。
今回は、その設定方法についてお教えします！

Dressカラーを設定しておけば、#aaa〇〇〇のようなカラーコードを、いちいち手入力せずに済みますし、微妙に違う色をあちこちに使っているせいで統一感がなくなり、デザインがちぐはぐしてしまう、ということがなくなりますので、ぜひ使ってみてください。

練習用のダウンロードデータを用意しているので、まずは、試しに使ってみて下さいね！

Dressカラーって何個まで登録できる？おすすめの順番は？

Dressカラーは、メインカラー１つ、サブカラー５つの最大６つの色を登録できます。
私の場合、メインにコーポレートカラー、次によく使う色をサブカラーの１・２・３に設定、
サブカラーの４に背景色用の白や、サブカラーの５に文字色用の黒などを設定することが多いです。

これだと、カラーとモノクロに別れていて見た目もきれいですし、整理整頓されて管理しやすいパレットにすることができます。

Dressカラーに色を登録する

（１）Dressカラーの設定を開く

Dressの基本設定[１]のDressカラー[２]を選択すると、メインカラーとサブカラーの設定画面が表示されます。

（２）メインカラーを設定する

表示されたカラーパレット[１]をクリック、またはカラーコード[２]を入力することで、メインカラーを設定できます。
これでメインカラーの登録は完了！

（３）サブカラーを設定する

サブカラーは、すでに用意された、カラーパレットから選択することも出来ますが、
使用したい色がある場合、右横の「自由に設定」タブをクリックします。

各サブカラーのボタン[１]を有効化し、カラーパレット[２]をクリック、またはカラーコード[３]を入力することで、サブカラーを5色まで自由に設定できます。

これでサブカラーの設定も完了しました。

設定した色の呼び出し方

1.Dressで使う

文字色をDressカラーに変更する場合を例に解説します。画面左のプレビューから、何もDressが設定されていない場合、ページタイトル[１]すると、画面右側の「基本デザイン」タブに、「ページタイトル」が出てくるので、それをクリック[２]します。

文字色の「編集」をクリック[3]し、Dressカラー[4]を選択します。
これで完了です！「ページタイトル[１]」はすべて、一気に変更することができ便利です。

2.ページデザインで使う

サイトエディタのプロパティ設定内のページデザイン[１]より、背景色[２]Dressカラーで指定することが可能です。
Dress内で設定したDressカラー[３]が表示されます。
例えば、ビルボードの背景色をDressカラーに変更したい場合は、[２]のビルボード欄にチェックを入れ、右隣の背景色に色を指定します。

3.文字色やマーカーに使う

ブロックエディタの編集で、文字を範囲指定[１]して、文字色アイコン[２]から文字色やマーカーの色を指定することが可能です。
Dress内で設定したDressカラー[３]が表示されます。

4.リンクボタンに使う

リンクパーツ[１]設定のデザイン[２]より、各箇所[３]の色を指定することが可能です。
Dress内で設定したDressカラーが表示されます。

いかがでしたでしょうか？
Dressカラーを設定しておくと、Dress以外でもBiNDの様々な編集画面で同じ色を指定できるようになります。
とっても便利なので、この機会にぜひ使ってみてください！

練習用のサイトデータをダウンロード

Dressカラーを試しに使ってみたいという方のために教材を用意しました。
上記で説明した、「ページタイトルの色を変える」「背景色を変える」「リンクボタンの色を変える」を実際に試してみましょう。
やってみればとても簡単です。

練習用のサイトデータをご用意しましたので、以下よりログインしてダウンロードしてみてください。
※本サイトデータは「BiNDup」でのみ使用できます