サイトのカラー(配色)をカスタマイズする

 

カラー設定機能は、SIRIUS2で新しく導入された新機能となります。
本機能を利用することで、サイト全体の配色を柔軟に変更することができます。

 

使い方はシンプルで、基本となる

という3つの項目を、ご自身のお好きな色に変更するだけです。
これだけの操作で、サイト全体の配色を変更することが可能です。

 

もちろん、配色に自信がない方もご安心ください。
各テンプレートごとに12色のプリセットカラーを用意しており、お好きな色を選んで「適用」ボタンをクリックするだけで、プロが配色したデザインを適用することができます。
更にこだわり派のユーザーのため、全37箇所もの文字色、背景色を変更可能としました。
リンクや記事の文字色、背景色…など、スタイルシートをいじらなくてもカラーを調整することができます。

 

SIRIUS2のカラー設定を起動するには上部リボンバーにある「デザイン」→「カラー設定」ボタンをクリックします。

 

 

上記のボタンをクリックすると、下図のようにカラーの設定画面が表示されます。
こちらでお好きなカラーを選択していきます。

 

 

最初にも記載した通り、基本的には「ベースカラー、メインカラー、アクセントカラー」の3色さえ変更すれば、サイトデザインを大きく変更することができます。
試しに「ベースカラー」の項目をお好きな色に変更してみてください。

 

 

上図のように、サイトの印象が大きく変わった事がお分かり頂けるかと思います。
「どの部分の色が変わるか」はテンプレートによって異なりますので、
まずは上記の3色を調整して好みの配色にしてください。

 

 

配色が苦手だったり、色を調整するのが面倒な場合はプリセットカラーを使用するのが便利です。
SIRIUS2のテンプレートでは、各テンプレートにプロがデザインした12色のプリセットカラーを用意しています。
カラー設定画面の右上部にある「プリセットカラー」の項目からお好きなカラーを選択し、右側の「適用」ボタンをクリックしてみてください。

 

 

すると下図のように、各項目にカラーが選択された状態となり、プレビューも大きく変わります。
初めてカラー設定をする場合は、こちらで一度カラーを選択してから微調整するのも良いでしょう。

 

 

SIRIUS2のカラー設定機能ではメインの3色の変更の他に、各パーツのデザインを細かく編集できるよう調整しています。
右下にある各グループを選択し、カラーを選択することでご希望の配色に近づけることが可能です。
細部までこだわりたい方は、ぜひこちらもご利用ください。

 

 

全体

 

トップ

 

トップメニュー

 

ヘッダー

 

コンテンツ

 

メニュー

 

フッター