《JIN》カラー設定の使い方　for初心者

設定が全く同じでも、カラー設定1つでサイトの印象をがらりと変えることができます。

サイトの雰囲気にあった設定を自由に試してみましょう。

色の設定について

まず、web上での色の扱いについて。色を表示させるためには、文字・背景など、それぞれに色の指定を行う必要があります。

その色を指定するために、JINでは色見本から直接選べるカラーパネルと、＃から始まる6桁の色番号（16進数で表したHTMLカラーコード）による設定ができるようになっています。

カラーパネルは、簡単に色を選べて便利ですが、自分の思う微妙なニュアンスの色を選択するのはけっこう難しいです。

そこで私は、カラー見本を見ながら、その色番号を基にして設定を行っています。

参考にさせてもらっているのはこちらのサイト。

HTMLカラーコードで表せる色の仕組みがわかると、より細かい自分好みの設定が行えるようになると思います。

それでは、各設定を見ていきましょう。

テーマカラー

アクティブボタンや記事の見出しデザインなど、サイトの要所となるデザイン部分の変更ができます。イメージカラーや、基調にしたい色を設定します。

アクセントカラー

カテゴリー表示など、ポイントに使われる色で、差し色として設定したい色を設定します。

基本色との同系色でグラデーションにしたり、反対色でくっきりさせたり。この設定でサイトのおしゃれ度がぐんと変わりそうです。

背景色

壁紙の色を設定できる項目です。

サイトデザイン設定の「背景画像」を設定していると、画像が優先され、こちらの設定は反映されません。

ヘッダーの背景色とタイトルの文字色

ヘッダー部分の背景色を設定します。当サイトではこの部分になります。

タイトルの文字色

1つ上のヘッダー部分の画像からタイトル文字を変更してみました。

少しの変更ですが、印象がけっこう変わりますよね。

メニューの文字色

ここではヘッダーまたは、メニューバーの中にある文字色を変更することができます。

メニューの背景色

ヘッダーとメニューバーが分かれているタイプのヘッダーデザインを選択している場合、メニューバーの色はこちらで変更できます。

SNSボタンの色

ヘッダー設定で表示の設定ができるSNSアイコンの色を変更することができます。

フッターの文字色／フッターの背景色

フッターの文字色／フッター背景色を設定できます。

背景色はヘッダーと同じ色や、同系色にすると統一感がありすっきりとした印象になると思います。

リンクの色／リンクをマウスに合わせた時の色

リンクが貼ってあることがわかりやすいように、文字色を変更することができます（例では背景が黄色になっていますがこちらは別設定）。

そのリンク上にマウスのポイントがきたときに、色を変える設定をすることもできます。

ユーザーにとって、これはリンクだとわかりやすく、クリック誘導もしやすくなるため、細かいけれど大切な設定です。

サイト内の文字色

まさにこの文章のところのように、サイトの基本部分の文字色を設定する項目です。

スマホ専用メニューの文字色／スマホ専用メニューの背景色

メニュー設定「スマホメニュー」の「スマホのスライドメニュー」を設定している場合、ここで文字色、背景色を設定できます。

インフォメーションバーの背景色

ヘッダー設定の「インフォバーに設定する文字」を設定すると、ヘッダーの上に目立つようにインフォメーションを掲載できるバーが表示されます。その部分の色を設定することができます。

当サイトの『カラー設定』

サイトの雰囲気を変えたくなったら、まずカラー設定を大きく変えてみるのもよいかもしれません。