サイト全体の色を５ステップで一括変更！ 新Dressここが便利

今回はBiNDupのCSS編集機能「Dress」について解説。サイトのさまざまなデザイン要素を一括して変更できるDressですが、手始めにWebサイトのキーカラーの変更手順を説明します。

今回の目標

BiNDの「Dress」は、面倒なコードの記述をすることなくCSSを編集できるUIを持つ画期的な機能です。

CSSとは、サイト全体、または特定の部分の表示スタイルを定義するWeb標準の仕組みで、Webサイトのデザインを左右する重要な役割を担います。そして、このCSSを制御する機能がDressというわけです。

しかしながら、これまでのDressはちょっと使いづらかった部分もありました。例えば、どこをどう操作したら目的の箇所が変更できるのか、CSSを多少なりとも理解していないととっつきにくかったのです。

そこで、新しいDressの登場です。コードを書くことなくCSSを編集するコンセプトはそのままに、操作性を高めたUIに刷新されました。

そこで今回は、そのDressの新しい使い勝手を体験しつつ、サイトのデザインを変更する手順を試していきましょう。

Dressを使い始めるにあたって

前述の通りDressはCSSを編集する機能なので、例えばページ背景の色やフォントの種類、罫線の太さなど、変更できることは多岐に渡ります。一つ一つ説明すると膨大な記事になってしまうので、今回はサイト全体のカラーを一括変更する手順を紹介したいと思います。

BiNDupのテンプレートにはカラーバリエーションが用意されていますが、3パターンほどなので、自分が作りたい色がないこともあるでしょう。会社のコーポレートカラーや自分のお店のイメージに合った色にしたいといったときに利用したいのが、Dressによるカラーの一括変更です。

単にメインカラーを差し替えるだけでなく、指定したメインカラーを基に、いろいろな組み合わせのカラーパレットを自動的に提案してくれる点がDressの大きな特徴です。

ちなみに、今回はサイト全体の設定を変更しますが、Dressではページ単位やブロック単位での変更も可能です。メインカラーとサブカラーを設定しておくことで、後からブロック単位で編集する際にも、設定したカラーパレットを利用することができます。

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

Dressカラーを変更する

ここからは、具体的な手順を説明します。はじめに新Dressに対応したサイトテンプレートを使ってサイトを作成しておきます。

Dressの編集画面を表示する

「サイトエディタ」で「デザイン編集」をクリックして、Dressの編集画面を表示します。

デフォルトのカラーパレットをクリックする

Dress画面が開いて、その右側に「基本設定」タブが表示されます。そこの「Dressカラー」という項目に初期状態ではテンプレートで使用しているカラーパレットが表示されるので、そのカラーパレットをクリックします。

メインカラーを変更する

次に「Dressカラー」画面で、サイトを印象を決めるメインカラーを設定します。カラー選択画面を操作してイメージの色を見つける方法のほかに、特定のカラーコードを入力することもできます。

カラーパレットを選択する

次にカラーパレットを選択です。「サブカラー」項目に、上で設定したメインカラーを基に、同系色や補色などを組み合わせたさまざまなカラーパレットが自動的に作られます。イメージに合うものを選ぶといいでしょう。「自由に設定」をクリックすれば、組み合わせるカラーを自分で設定することも可能です。

メインカラーやカラーパレットを選択すると色の変更が、左側のプレビュー画面に反映されます。変更を確認したら、「完了」をクリックします。

変更を確認

見づらかったり、イメージと違う配色があった場合は、「基本設定」タブの「ページデザイン」で、テキストや背景など、各デザイン要素の色を変更することもできます。

変更が済んだら、最後に「保存」をクリックして設定を確定します。サイトデータによっては色の反映に時間がかかることがありますが、しばらく待つとサイト全体のカラーが変更されるはずです。

ロゴ画像などの色を変更

なお、サイトのロゴやボタンなど画像で配置された要素は、テンプレートの元の色がそのまま残ります。SiGNで作成した画像であれば、ブロックエディタからSiGNで開いて、色を変更しましょう。
このとき、メインおよびサブカラーのカラーコードを控えておけば、SiGNで画像の色を設定するときに簡単です。

以上で手順は完了です！

プレビューでチェックしたページ以外も開いて、問題がないか、確認しましょう。

テーマカラーはサイトの最重要デザイン要素です。サイトのデザインを簡単に変更できて、かつ印象をガラリを変えられるDressカラーの変更。Dress使いこなしの第一歩としてぜひマスターしてください！

BiNDupでDressを試してみる