
前回、Diverのフォントを変えるところから始まったこのブログのカスタマイズですが、
今回は、見出しのカラーを変更していきます。
「いやいや、カラー変更なんて簡単じゃん」
(そりゃ、変更するだけならね)
見出しの色は、配色次第でブログのイメージがガラっと変わってしまうほど、大切な要素。
当ブログの見出しを変更するまでの流れをサクっと紹介していきます。
Diverデフォルトの見出しはどうなってる?
前回、Diverのフォントを変えるカスタマイズを行った時点での、デフォルト状態の見出しがこちら。
シンプル。カスタマイズせずにはいられません!
しかも、カスタマイザーで簡単に変更できちゃうんだから、使わない手はないですよね。
フォントはこちらでカスタマイズしてます↓
Diverカスタマイザーを使って見出しの色をサクっと変更
WordPressの便利な機能、カスタマイザー。
使うテーマによって内容は変わるものの、基本カラーの変更などは簡単にできてしまいます。
サイドのメニューバー(ダッシュボード)から「外観」⇒「カスタマイズ」へ進み、
Diverのカスタマイザーを開きます。
見出しデザインと色は「デザイン設定②」から変更できます。
h2(見出し2)からh5(見出し5)までここで変更可能。
基本色(背景やライン)と文字色、スタイル(デザイン)を変更できちゃうのですが、今回は色の変更を。
「色を選択」をクリックすると、
元々入っているデフォルトの数字をお好みのカラーコードにコピペしてもいいですし、
色の中にある〇と右側の□のスライダーを上下することで、細かい色の微調整もできてしまいます。
そんなの面倒!さっさと決めて記事を書いていかなきゃ時間がもったいない!という人は
下に表示されてる8色の中からお好みの色を選択してもいいですし。
文字色も同様に変更していきます。
見出しカラーのカスタマイズはとっても簡単。
だけど、自分の好きな色を100%反映させたはいいが、ちょっと見辛い…?
そんなことにならないように、基本色と背景色の配色は読みやすさも考慮して決めてあげなきゃですね。
配色が決められない時におすすめのサイトとツールはこちら↓
ティファニーブルーのような見出しカラーに決定!
ピンク系もブルー系もパープル系も捨てがたいけれど、
大好きなティファニーブルーのようなイメージカラーに決定することにしました!
(結婚式場サイトでもないのにごめんなさい)
デバイスによって見え方が違ってきてしまうので、サイトで表示するのにこれ!という答えはないけれど、
デフォルトのh2スタイル(ボックス)なら、文字色は当然白!ってことで、
白が見栄えする、ちょっと濃いめの#81d8d0をチョイスしています。
文字色を白~薄めのカラーにした時は、背景色との相性も大事ですね。
h3タグ(見出し3)も同色で統一
あの色もいいし、この色も好き。
色んな色を使いたいけれど、そうするとサイトのイメージはごっちゃごちゃ。
見出しの配色は多くても3色以内に留めたいところです。
なので、現在シンプルなアンダーライン(デフォルト)となってるh3タグ(見出し3)に関しては、基本色も文字色も#81d8d0で統一。
私の場合、h4とh5はほぼ使う事がないのでとりあえずはデフォルトのままにしています。
h2とh3タグのデザインはいずれカスタマイズするつもりなので、それまではデフォルトスタイルのまま。
カスタマイズしてる時間があったら、さっさと記事を書いたほうがいいのも確かですし。
「Diver」なら最初からおしゃれな見出しデザインが数種類用意されてるし、カスタマイズなんてしなくても十分使えちゃうんですけど、ね。