ワードプレスの無料テーマで検索すると、必ずと言っていいほどオススメされる高性能＆カスタマイズ性の高い優良テーマの “Cocoon”。
その Cocoon なら、初心者さんでも簡単に、自分のサイトを自分好みのカラーで、オシャレにサイトカスタマイズ出来ちゃいます！
今回は、スキン配色☆中級編。
サイトデザインのベースとなるスキンを選んだら、それぞれのパーツに好みの色を選んでいきましょう。
スキン配色☆初級編では、もともとのスキンに１色追加しただけですが、中級編の今回は１カラーグラデーション＋無彩色でスキンに数色追加して仕上げていきます。
それでは、初心者さんでも簡単！自分好みのオリジナルサイトに仕上げる「スキン配色☆中級編 １カラーグラデーション＋無彩色」を紹介していきます。
サイトデザインのベースとなるスキンをまだ選んでいない場合は、こちらの記事を。
（スキン無しでもサイトのカラーカスタマイズは出来ます。）
１．スキンのメインカラーを１色を選ぼう
まずは、選んだスキンの特性を確認しておきましょう。
確認の手順は、「スキン配色☆初級編」のこちらの記事を ↓
今回のスキンは「Momoon（グリーン）」を使用しました。
緑をベースとしたスキンとなっていますが、今回使用の「Momoon」シリーズは、ほとんどのパーツのカラー変更が、スキンのもともとの設定の影響を受けることなく変更出来ます。
中級編の今回は、１カラーグラデーション＋無彩色 の配色で仕上げます。
無彩色とは、その名の通り “ 彩りの無い色 ” つまり白・グレー・黒のことです。
無彩色は、比較的どんな色とも相性が良いので、メインカラーの１色も選びやすいと思います。
スキンのメインカラーの探し方
色の探し方・選び方は、「スキン配色☆初級編」と同じですが、こちらのサイトを参考にするとイメージ通りの色が探しやすいと思います。
Color Hunt – Color Palettes for Designers and Artists
そのサイトで見つけた色を、サイト上に反映させる方法は、こちらの記事を ↓
メインカラーの１色を決めたら “ それをどこのパーツに取り入れるか？” が ポイントです。
サイトのイメージを大きく左右するパーツは、以下の３つです。
・背景
・ヘッダーカラー（フッターもヘッダーと同じ色のほうが統一感が出ます。）
３つ全てにメインカラーを取り入れる必要はありません。
メインカラーを取り入れたパーツ以外の下記の部分に、サブカラーや無彩色を取り入れて仕上げましょう。
・サイトキーテキストカラー
・文字色
・背景色
・ヘッダー全体文字色
・グローバルナビ色
・グローバルナビ文字色
２．スキンのサブカラーと無彩色を選ぼう
サブカラーは、メインカラーと同じ色のグラデーションカラーにすると統一感が出やすいです。
また、サブカラーなのでメインカラーよりも薄い色のほうが良いでしょう。
下記の手順で、メインカラーの同色系サブカラーを選びましょう。
メインカラーが強い色（濃い色や鮮やかな色）の場合には、サブカラーは無彩色だけにするとまとまりやすいです。
無彩色と言っても、白・グレー・黒の３色だけではありません。
グレーの中には、白に近い明るいグレーから 黒に近い暗めのグレーまで、たくさんのグレーがあります。
全体的に白よりの薄い色でまとめると、柔らかい優しい印象になりますし、逆に強い色でまとめるとカッコいい印象になる傾向があります。
３．変更例 ビフォアー＆アフター
参考までに「１カラーグラデーション＋無彩色」の変更例がこちらです。
【 変更パーツ 】
・サイトキーカラー（#90f4ee）
・サイトキーテキストカラー（白）
・文字色（黒）
・背景色（#d7f4f4）
・ヘッダー全体背景色（#90f4ee）
・ヘッダー全体文字色（白）
・グローバルナビ色（白）
・グローバルナビ文字色（#00f4e4）
【 変更パーツ 】
・サイトキーカラー（グレー）
・サイトキーテキストカラー（#ffff00）
・文字色（濃いグレー）
・背景色（#ffff00）
・ヘッダー全体背景色（グレー）
・ヘッダー全体文字色（#ffff00）
・グローバルナビ色（白）
・グローバルナビ文字色（グレー）
【 変更パーツ 】
・サイトキーカラー（#ec0101）
・サイトキーテキストカラー（黒）
・文字色（黒）
・背景色（黒）
・ヘッダー全体背景色（#ec0101）
・ヘッダー全体文字色（黒）
・グローバルナビ色（白）
・グローバルナビ文字色（黒）
今回のテーマ「スキン配色☆中級編 １カラーグラデーション＋無彩色」は、いかがでしたか？
無彩色は、意外にも印象の強いパワーのある色ですが、比較的どんな色とも相性が良いので、配色に迷った時などに取り入れてみると全体を上手くまとめてくれます。
無彩色は、シンプルな色ですが、実はとっても頼りになるカラーなのです。
今回の「スキン配色☆中級編 １カラーグラデーション＋無彩色」も、ぜひオリジナルサイトを作る際の参考にしてみてください☆
