ワードプレスの無料テーマで検索すると、必ずと言っていいほどオススメされる高性能＆カスタマイズ性の高い優良テーマの “Cocoon”。
その Cocoon なら、初心者さんでも簡単に、自分のサイトを自分好みのカラーで、オシャレにサイトカスタマイズ出来ちゃいます！
今回は、スキン配色☆初級編。
サイトデザインのベースとなるスキンを選んだら、それぞれのパーツに好みの色を選んでいきましょう。
だけど「好きな色を選んで」と言われても、無数にある “ 色 ” の中から選んでいくのは、なかなか難しいもの。
でも今回は、オシャレにサイトカスタマイズ スキン配色☆初級編。
選ぶ色は１色だけ。
それだけでも充分に、オリジナルのサイトに仕上がります。
それでは、初心者さんでも簡単！ 選ぶだけで自分好みのオリジナルサイトに仕上げる「スキン配色☆初級編 スキン＋１カラー」を紹介していきます。
サイトデザインのベースとなるスキンをまだ選んでいない場合は、こちらの記事を。
（スキン無しでもサイトのカラーカスタマイズは出来ます。）
１．選んだスキンの特性を知ろう
まずは、選んだスキンの特性を知ることが大事。
ここで言う特性とは、“ どのパーツの色が変えられるのか ” ということ。
スキンによって、色が変えられないパーツが異なります。
それを知るために、確認のための色を変更してみましょう。
①．「全体」のカラーを変更
今から行う色変更は、確認作業のための色変更なので、色は何色でも大丈夫です。
今回は、分かりやすいように下記のパーツを 黄色と赤 に変更します。
（１）サイトキーカラー → 黄色
（２）サイトキーテキストカラー → 赤
（３）文字色 → 赤
（４）背景色 → 黄色
番号順にクリックして、色を変更していきましょう。
「クリック④」以降も、下にスクロールして「背景色」まで変更してください。
②．「ヘッダー」のカラーを変更
「全体」の変更が終わったら「ヘッダー」の項目をクリックして、「全体」と同様の手順で下記のように変更しましょう。
（５）ヘッダー全体背景色 → 黄色
（６）ヘッダー全体文字色 → 赤
（７）グローバルナビ色 → 赤
（８）グローバルナビ文字色 → 黄色
変更し終わったら「変更をまとめて保存」をクリックします。
③．変更後のプレビューの確認
「スキン」または「全体」の項目をクリックして、変更後のプレビューを確認します。
今回のスキンは「Simple Blue」を使用しました。
選んだ通りに反映されていれば、黄色と赤の配色になるはずですが、ヘッダー全体背景色が青のままです。
ということは、このスキンの場合はヘッダー全体背景色は変えられないということです。
このようにスキンの設定が優先されるパーツがあるので、まずはそのパーツを確認しましょう。
２．スキンに１つカラーを加えよう
スキンの設定が優先されるパーツと、その色が分かったら、それに合うカラーを選んでいきます。
今回のスキンは「Simple Blue」で、水色をベースとしたスキンとなっています。
この水色に合いそうなカラーを１色選んで、パーツの色を変更していきます。
このスキンの場合は、ヘッダー全体背景色は変えられないので、それ以外の下記のパーツを変更します。
・サイトキーテキストカラー
・文字色
・背景色
・ヘッダー全体文字色
・グローバルナビ色
・グローバルナビ文字色
①．色の選び方・探し方
「１．選んだスキンの特性を知ろう」で行った、カラー変更と同じ手順で色を選ぶことが出来ます。
この方法でも色を探せないことはないのですが、この方法で自分の求めている色を見つけるのは至難の業です。
ここに無い色もたくさんありますしね。
そこでおすすめなのが、
という方法です。
Color Hunt – Color Palettes for Designers and Artists
こちらのサイトでは、すでに色が組み合わされた配色パターンが紹介されているので、１色を選ぶにしてもイメージがつかみやすいと思います。
②．変更例 ビフォアー＆アフター
参考までに「スキン＋１カラー」の変更例がこちらです。
スキンに１色プラスしただけでも、選ぶカラーと変更するパーツによって、こんなにサイトのイメージを変えることが出来ちゃいます。
スキン配色☆初級編 の今回は、お好きな色を１色選ぶだけ！
ポイントカラーとしてスキンの一部に１色プラスする感じなので、『色使いって難しい』とか『配色が苦手だな』と思っている方でも、わりと取り入れやすいと思います。
ぜひ、ポイントカラーがキラリと光るオリジナルサイトを作る際の参考にしてみてくださいね☆
