ELEPHANT（エレファント）全28ヶ所のサイトカラー設定を徹底解説

WordPressテーマELEPHANT（エレファント）はサイト全体のテーマカラーを細かく設定できるので、ウェブサイトのターゲットに適した配色にする事が可能です。

WordPress管理画面のカスタマイズ＞サイトカラー（色）から変更でき、変更できる場所は全28ヶ所あります。

28ヶ所あるので、どこが変わるのか少しわかりにくいというデメリットもありますが、全てを把握して使いこなすことで細かく配色の設定変更ができるのでとても便利です。

ここでは、全２８ヶ所がどこの部分にあたるのかをご紹介させて頂きます。

ELEPHANT（エレファント）のサイトカラー（色）設定の場所を徹底解説

1.スマホメニューの背景色

2.メインの文字色

メイン文字色はウェブサイト全体の通常のテキストの文字色です。

真っ黒にするより、若干グレーを混ぜるほうがオシャレです。

3.リンク色

リンク色はサイト内のテキストリンクの色です。

ウェブ上では青系でアンダーラインがついているものがテキストのリンクだと認識されています。

また、ショートコードにより設置したボタンもこの色になります。

4.リンク色（マウスオン）

テキストリンクにマウスを乗せた時、スマホでタップした時に変わる色です。

5.ブログタイトル＆キャッチフレーズ

サイトヘッダー部分に表示されるブログタイトルとキャッチフレーズの色です。

ブログタイトル部分にロゴ（画像）を設置している場合、キャッチフレーズのみの色となります。

6.ヘッダー背景（メインカラー）

ヘッダー背景カラーはヘッダーナビよりも上の部分の色となります。

7.ナビゲーション背景色

ナビゲーション背景色はヘッダーナビゲーションの色です。

8.ヘッダーナビ上下ボーダー色

ヘッダーナビゲーションの上下にボーダー（線）があり、そこの部分の色です。

この部分が必要ない場合はヘッダーナビゲーションの色と同じにしておけば違和感がなくなります。

9.ヘッダーナビの文字色

ヘッダーナビゲーションの文字色です。

この部分の色は背景色と反対の色の白系か黒系する事で文字が目立ちます。

例えば濃い系の色だと白、薄い系の色だと黒にすると目立ちます。

10.ヘッダーナビの文字色(マウスオン）

ヘッダーナビゲーションにマウスを乗せた際に変わる色です。

この部分は通常のヘッダーナビゲーション文字色と反対の色にすることで、ユーザーがマウスを乗せていると気付きやすくなります。

11.ヘッダーナビのマウスオン背景色

ヘッダーナビゲーションの背景色も同じようにマウスを乗せた際に色が変わります。

こちらもマウスを乗せていない状態と反対の色にすることで、ユーザーがマウスを乗せていると気付くことができます。

12.ヘッダーナビドロップダウン背景色

ヘッダーナビドロップダウンとは、ヘッダーナビゲーションのドロップダウンメニューのことです。

一般的にドロップダウンメニューはサブカテゴリーなどに使われます。

例えば今日からボレは！！ではカテゴリーWordPressテーマのサブカテゴリーにELEPHANT（エレファント）、STORK（ストーク）、賢威というものを設定しています。

親カテゴリーにマウスを乗せるとサブカテゴリーがドロップダウンして表示されることからドロップダウンメニューと呼ばれています。

13.見出し色(H2,H3)

見出しの色です。

h2に関しては塗りつぶしになります。

この部分の色はサイトのメインカラーと同じにしておくといいでしょう。

14.見出し2(H2)文字色

h2の背景色は塗りつぶしになる事から、暗い系の見出し色を設定したのであれば文字色は白系、明るい系の見出し色なら黒系がおすすめです。

15.ポイントカラー背景色

ポイントカラーは、アーカイブなどで表示されるカテゴリー名の背景色や、箇条書きリストの点、サイドバーに表示されるカテゴリー名の横のアイコンなどの色です。

16.ポイントカラー文字色

ポイントカラーが背景で設定されている項目の文字色です。

こちらもナビゲーションメニューなどと同じように文字が目立つような色に設定しましょう。

17.サイドバー見出し背景色

サイドバーに表示される見出しの背景色は、記事中に表示される見出しと同じカラーを使うとサイトに統一感がでます。

18.サイドバー見出し文字色

こちらもナビゲーションメニューや見出しと同じようにしっかりと文字が読めるような色合いに設定しましょう。

19.CTA背景色(濃いめ推奨）

CTAは記事を読んだ後に表示されるCall To Actionという部分です。

記事を流し読みされてもCTAの背景色を濃いめに設定してあれば目に触れやすくなります。

今日からボレは！！では記事に馴染ませるように記事中のカラーと同じものに設定しています。

20.スペシャルボタン

調査中

21.スペシャルボタン（マウスオン）

調査中

22.フッター背景色

フッターはサイト下部の部分の色です。

コンテンツ部分とは反対の暗い系の色を使っているウェブサイトが多いです。

23.フッター文字色

フッターの文字色はしっかりと読めるものにしましょう。

視認性はウェブサイトにとって重要です。

24.フッターリンク文字色

フッターのリンクには下線が入っていませんが、フッターにある文字はリンクだと一般的に認識されています。

文字が読みやすいように設定をしておきましょう。

25.特殊ヘッダーのボタン色

調査中

26.ヘッダー上お知らせ背景色

ELEPHANT（エレファント）の名物機能でもあるヘッダー上のお知らせバーのカラーです。

サイト全体のカラーとは反対の色で目立つようにしておくことでクリック率が上昇します。

27.ヘッダー上お知らせ背景色（マウスオン）

ヘッダー上にリンクが置いてある事はユーザーは認識していない可能性が高いです。

この場合、マウスを乗せたら色が変わるという認識は持っているので、しっかりと色を変えて、リンクだという事を知らせてあげましょう。

28.右上お問合せボタン色

ELEPHANT（エレファント）Businessで実装されているヘッダーの右上に表示できるお問い合わせボタンの色です。

サイトカラーはターゲットを意識しよう

サイトカラーはボレが好きな色に設定するのではなく、サイトのイメージを伝える色やターゲットを意識した色にしましょう。

そして、サイトのカラーは多くの色を使いすぎてしまうと逆に見にくくなってしまいます。

それを防ぐためには統一されたカラーで、メインカラーとサブカラー、ポイントで使うカラーを厳選する必要がある事を覚えておきましょう。

サイトのメインカラーとして70%程はメインのカラーを設定します。

今日からボレは！！の場合だと濃い青がメインカラーです。

サブカラーは淡い青です。

そしてポイントのカラーはオレンジです。

このように配色をちゃんと決める事でサイトとして見やすくなるのでサイトカラーは慎重に決めるようにしましょう。

サイトのカラー設定のコツ

サイトのカラーを全て設定すると、デザイナーでもない限り大抵めちゃくちゃな配色になってしまいます。

しかし色のセンスがない人でも簡単に配色を決めることができます。

Adobeが提供するAdobe Kulerというサービスを利用してみましょう。

メインのカラーを決めるとそれに合った色を教えてくれます。

これらの配色を参考にサイトのカラー設定をしていくととても綺麗に見えます。

ターゲットがどのような色を好むのかをしっかりと考えて、色数を増やしすぎないように注意しましょう。