先日、新しいDressが漸くリリースになりました。使い勝手がかなり向上してますので是非触ってみて下さい。新しいDressでは、サイトのカラー定義を設定できるようになりました。これが目玉機能の『Dressカラー』です。カラー定義が決まっていると一気にサイトの配色が変えられるため便利なのですが、残念ながら予めカラー定義されているのは、BiNDupから搭載された最新テンプレートだけになります。皆さんが現状運用されているサイトに於いては未設定のため、ご自身で行っていただく必要があります。云え、Dressカラーを用いる事で受けるメリットはとても大きいので、今回は既存サイトにDressカラーを設定する方法を解説したいと思います。最初は手間が掛かりますが、一度設定してしまえば後の運用が非常に効率的になりますので、是非お試しください。Dressカラーとは通常Webサイトのデザインを行う際に、予め使うカラーを定義します。メインカラーを赤にしようと云っても、使う箇所によってバラバラな赤を使ってしまっては、統率された美しいデザインになりません。どの赤を使うのかと云う事を厳密に定義します。Webデザインでは#d21d1fの様にカラーコードで決める事が殆どですね。Dressカラーは、「赤は#d21d1fを使う」と云う様にWebサイトのデザインで使用するカラーを定義する機能になります。これまでのDressでは、それぞれ赤を用いる箇所に#d21d1fをそれぞれ設定しておりましたが、Dressカラーに設定する事で「メインカラー」と云う設定値に置きかわります。「赤のカラーコード何だっけ?」となっていたのをDressカラーから「メインカラー」を選択するだけになりますので、迷いなく同じカラーを設定する事が出来ます。Dressカラーは「メインカラー」の他に「サブカラー」を5種類設定しておく事が出来ます。「6色しか登録出来ないの?」と思われるかもしれませんが、実際Webサイトをデザインする際にそんなに多色を使う事はありません。色数が多いほど全体のデザインバランスの調整がシビアになりますので、個人的にはメインカラーとサブカラー、あとは白と黒くらいのシンプルな色数で充分かと思っております。Webサイトをデザインしていてうまくまとまらないなぁと思われたら使用している色数を減らしてみて下さい。BiNDのテンプレートも意図してカラフルなデザインでない限り、基本カラーは6色以内に収まっていると思います。ここが重要なのですが、Dressカラーは単に登録して使い回せるだけではありません。後から色を一括で変更する事が出来るのが大きなポイントです。「メインカラー」に赤(#d21d1f)を設定していた場合、後から「メインカラー」を緑(#26ccae)に設定変更すると、「メインカラー」を設定していた箇所全てが一括で緑に置き換わります。デザインを管理し易くかつ変更に強いWebサイト運用が出来る訳ですね。そんな訳で既存で運用中のサイトでもDressカラーを設定する事でメリットが出てきます。具体的なDressカラーの設定方法を解説致します。先に設定の流れを説明すると、1.Dressカラーを定義する2.Dressカラーに置き換える(Dress内で設定)3.Dressカラーに置き換える(Dress外で設定)と云った感じになります。それではそれぞれ詳しく見て行きましょう。Plant』のDressにDressカラーを設定していく流れで解説します。1.Dressカラーを定義する前途の通りDressカラーは、メインカラーと5種類のサブカラーの計6種類を定義する事が出来ます。・サブカラー5:背景と云った感じでルールを決めてしまいます。後からカラーを調整変更する事は可能ですので、最初は曖昧なイメージでも構いません。カラールールを決めたら実際にDressで設定していきます。サイトエディタ「デザイン編集」>「基本設定」>「Dressカラー」を開くとメインカラーの設定フォームがあるので設定します。サブカラー>「自由に設定」をクリックするとそれぞれのサブカラーを設定出来ます。Dressテンプレートを使っている場合BiNDupのレスポンシブ対応テンプレートから作成したサイトは既にDressが設定されていますので、そこにDressカラーを設定していきます。サイトテンプレートの殆どは予めカラールールが定義されてますので、そこを抽出します。Navy)をメインカラーとして捉えて頂ければほぼ問題ありません。Plant』であればNavyなのでネイビーカラーをメインカラーとして設定します。Dressテンプレート使用時のサブカラー抽出に関しては後述します。この時点ではメインカラーが定まっていれば問題ありません。2.Dressカラーに置き換える(Dress内で設定)Dressカラーの定義が出来たら次は実際に各パーツに設定して行きます。Dressカラーを使用する場合は、カラーコード(#1D2F5Fなどの数値)を指定せずにカラーパレット下にあるDressカラーの一覧から指定して行きます。これまではそれぞれのスタイルにカラーコードが表示されていましたが、「メインカラー」や「サブカラー1」などのテキストに置き換わります。この設定をカラー指定してあるパーツ全てに行います。Dressテンプレートを使っている場合Dressテンプレートは基本的に全てのスタイルに対して設定が施してあるので修正箇所が膨大です。大変かと思いますがひとつひとつ置き換えていく必要があります。早く置き換えられる様パーツの抽出方法を解説します。テキストシャドウ」、「ボックスシャドウ」の5種類です。「詳細設定」を開くと絞り込みフォームの下に設定項目で絞り込めるボタンがあります。この中に「文字色」と「背景色」と「枠線」を絞り込む事が出来ます。この要素で絞り込まれた要素を置き換えます。Dressテンプレート使用時のサブカラー抽出方法ですが、上記絞り込みで出てきたカラーをそれぞれサブカラーに割り当ててからDressカラーに置き換えます。最初の時点では何のカラーが使われているか全て把握する事は難しいので、実際の設定値から抽出するのが早いと思います。3.Dressカラーに置き換える(Dress外で設定)続いてDress外で設定されている要素をDressカラーに置き換えます。これらもそれぞれDressカラーに置き換えてください。これでDressカラーへの置き換えは完了です。Dressカラーを変更してみるDressカラーへの置き換えが完了したら試しにメインカラーのカラーコードを変更してみましょう。適切に設定されていればネイビーの色が全て変更したカラーに変わると思います。※Dress上のプレビュー画面ではDress外で設定した項目のプレビューが出来ませんが、適用後に反映されるのでご心配なさらず今までは各設定値を変更しないと色の変更が出来ませんでしたが、Dressカラーのカラーコードを変えるだけで即時にカラーバリエーションが作れます。これは非常に嬉しいですね。置き換え作業は手間が掛かるのですが(私の作業感覚では1時間半〜2時間くらい)、一度設定さえしてしまえばDressカラーパレットから色を選ぶだけなので毎回カラーコードを思い出す必要もありません。新しくページを追加したり更新したりする際にもカラールールに従うのでデザインのクオリティを維持する事が出来ます。最初にDressカラーを設定だけしておいて、後からカラーを定義するなんてやり方もありそうですね。Plant』をサイトデータでプレゼントします。ヘッダーのロゴ部分も特別カスタマイズしてDressカラーが適用される様にしました。以下よりダウンロードして、設定の方法など参考にしてみて下さい。CAMPで最も読まれた記事は?コンセプト。