この記事では前回決定した7色のカラーコードをブログの上下と横（ヘッダー、メニューバー、フッダー、サイドバー、ボーダーライン）に設定する方法を全行程やさしく図解。
ワードプレスのダッシュボードには、設定できる項目がたくさん出てきますが、
ブログ開設初期段階でいじるのは５項目のみでOK。
５か所にカラーコード番号を入れるだけでブログの印象がぐんと変わり、自分だけのブログ！って感じが出ます。
もしまだ配色を決めていない方や、なんとなく色味は決めているけどカラーコードまではわからないという方は
こちらの記事を見てカラーコード番号を明確にしましょう。（やり方は超簡単です♪）
【色彩心理学×無料ツールで超簡単】ブログを効果的に彩る配色探し・ジャンル別おすすめ色も解説
カラーコード番号がない状態で闇雲に配色設定を始めてしまうと、しっくりこない配色になってしまったり、
今後追加設定や修正をしたくなった時に前に使った色がわからず、微妙に色合いがずれていき、全体のまとまりが悪くなってしまうかもしれません。
以下の説明に出てくるサンプル画像の設定内容が当ブログの設定のままを映していますので参考にしてください。
Contents
1か所目：ヘッダーの配色設定方法
❶ダッシュボードの左メニュー「外観」をクリック。
❷「カスタマイズ」をクリック。
❸「基本エリア設定」をクリック。
❹「ヘッダーエリア」をクリック。
※上にも「headerエリア」がありますが、カタカナの「ヘッダーエリア」の方を使います。
※ヘッダーをシンプル一色使いにしたい場合はすべて同じ色を指定しましょう。
ここがへッダー配色設定画面です。
❺サイト上部にラインの「色を選択」をクリック。
カラーパレットと入力欄が出現します。
❻入力欄に＃から始まるカラーコードを入力。
❼背景色も同じ要領で「色を選択」クリック後、カラーコードを入力。
❽背景色（グラデーション上部）も同じ要領で「色を選択」クリック後、カラーコードを入力。
❾グラデーションを横にしたい場合にはここにチェックを入れます。（サンプル画像ではわずかな色彩差なのでわかりづらいですが、上の図が縦グラデ、下の図が横グラデです）
❿左メニューの最上部にある「公開」をクリック。
これでヘッダーエリアの配色が変更できました。
⓫「＜」をクリックして前の画面に戻ります。
2か所目：サイドバーの配色設定方法
基本エリア設定画面に戻ったら
⓬「サイドバー」をクリック
⓭サイドの文字色の「色を選択」をクリックし、出現する入力欄にカラーコードを入力する。
⓮「公開」をクリック。
⓯「＜」をクリックして前の画面に戻ります。
3か所目：フッダーの配色設定方法
基本エリア設定画面に戻ったら
⓰「フッダーエリア」をクリック。
⓱背景色の2か所「色を選択」をクリックし、2か所コードを入力。
よっぽどこだわりたくなるまでは、とりあえずヘッダーと同じ設定にしておくとまとまりが出るので無難です。
⓲「公開」をクリック。
⓳「＜」をクリックして前の画面に戻ります。
4か所目：ボーダーラインの配色設定方法
基本エリア設定画面に戻ったら
⓴「記事一覧の区切りボーダー」をクリック。
㉑ボーダーカラーの「色を選択」をクリックし、カラーコードを入力する
㉒「公開」をクリック。
図のように記事の区切りに指定色のボーダーラインが入ります。
㉓「＜」をクリックして前の画面に戻ります。
ここまでで基本エリア設定での配色は終わり、次はメニューバーの配色に進みましょう。
5か所目：メニューバーの配色設定方法
㉔「＜」をクリックしてさらに一つ前の画面に戻ります。
㉖「各メニュー設定」をクリック。
㉗「PCヘッダーメニュー」をクリック。
㉘カテゴリー第1階層の「色を選択」をクリックし、カラーコードを入力。
㉙上下のボーダーカラー、左右のボーダーカラー、右のボーダーカラーをそれぞれ「色を選択」をクリックし、カラーコードを入力。
※迷ったらとりあえず白にするか、㉘と同じ色（境界線無し）にしておけばまとまります。
㉚薄いカラーで文字が見えずらい場合には、文字を白以外に変えることもできます。
㉛メニューを中央揃えにしたり、幅を調節したりできます。
面倒であれば飛ばしてもOK。一応当ブログの設定を参考までに出してあります。
㉜第2階層以下の「色を選択」をクリック後、カラーコードを入力。
当ブログでは、第1階層のグラデーションの下の色と第2階層の色を同色にして、ゆるやかにつながっているような表現にしてあります。
㉝「公開」をクリック。
5か所の配色設定が完了しました。
ヘッダー、サイドバー、フッダー、メニュー、ボーダーラインを変えるだけで
だいぶオリジナル感満載のブログデザインになります。
ぜひお試しください！
ヘッダー、フッダー、サイドバーのカラー設定方法を図解で説明しましたが、いかがでしたか？
まだデフォルト配色のままという方、カラーコードというのがよくわからない方は、こちらの記事で自分だけの配色でカラーコード入手方法を解説していますので参考にしてください！
【色彩心理学×無料ツールで超簡単】ブログを効果的に彩る配色探し・ジャンル別おすすめ色も解説