Diverの見出し色をカスタマイズ。使う色は何色までがおすすめ?

前回、Diverのフォントを変えるところから始まったこのブログのカスタマイズですが、

今回は、見出しのカラーを変更していきます。

「いやいや、カラー変更なんて簡単じゃん」

 

(そりゃ、変更するだけならね)

見出しの色は、配色次第でブログのイメージがガラっと変わってしまうほど、大切な要素。

当ブログの見出しを変更するまでの流れをサクっと紹介していきます。

Diverデフォルトの見出しはどうなってる?

前回、Diverのフォントを変えるカスタマイズを行った時点での、デフォルト状態の見出しがこちら。

diverデフォルト見出し

シンプル。カスタマイズせずにはいられません!

しかも、カスタマイザーで簡単に変更できちゃうんだから、使わない手はないですよね。

フォントはこちらでカスタマイズしてます↓

Diverカスタマイザーを使って見出しの色をサクっと変更

WordPressの便利な機能、カスタマイザー。

使うテーマによって内容は変わるものの、基本カラーの変更などは簡単にできてしまいます。

サイドのメニューバー(ダッシュボード)から「外観」⇒「カスタマイズ」へ進み、

ワードプレスのカスタマイザー

Diverのカスタマイザーを開きます。

見出しデザインと色は「デザイン設定②」から変更できます。

diverのカスタマイザー

h2(見出し2)からh5(見出し5)までここで変更可能。

基本色(背景やライン)と文字色、スタイル(デザイン)を変更できちゃうのですが、今回は色の変更を。

「色を選択」をクリックすると、

見出しカスタマイザーの色変更

元々入っているデフォルトの数字をお好みのカラーコードにコピペしてもいいですし、

色の中にある〇と右側の□のスライダーを上下することで、細かい色の微調整もできてしまいます。

 

そんなの面倒!さっさと決めて記事を書いていかなきゃ時間がもったいない!という人は

下に表示されてる8色の中からお好みの色を選択してもいいですし。

 

文字色も同様に変更していきます。

見出しカラーのカスタマイズはとっても簡単。

だけど、自分の好きな色を100%反映させたはいいが、ちょっと見辛い…?

そんなことにならないように、基本色と背景色の配色は読みやすさも考慮して決めてあげなきゃですね。

配色が決められない時におすすめのサイトとツールはこちら↓

ティファニーブルーのような見出しカラーに決定!

ピンク系もブルー系もパープル系も捨てがたいけれど、

大好きなティファニーブルーのようなイメージカラーに決定することにしました!

(結婚式場サイトでもないのにごめんなさい)

デバイスによって見え方が違ってきてしまうので、サイトで表示するのにこれ!という答えはないけれど、

デフォルトのh2スタイル(ボックス)なら、文字色は当然白!ってことで、

白が見栄えする、ちょっと濃いめの#81d8d0をチョイスしています。

文字色を白~薄めのカラーにした時は、背景色との相性も大事ですね。

h3タグ(見出し3)も同色で統一

あの色もいいし、この色も好き。

色んな色を使いたいけれど、そうするとサイトのイメージはごっちゃごちゃ。

見出しの配色は多くても3色以内に留めたいところです。

なので、現在シンプルなアンダーライン(デフォルト)となってるh3タグ(見出し3)に関しては、基本色も文字色も#81d8d0で統一。

私の場合、h4とh5はほぼ使う事がないのでとりあえずはデフォルトのままにしています。

 

h2とh3タグのデザインはいずれカスタマイズするつもりなので、それまではデフォルトスタイルのまま。

カスタマイズしてる時間があったら、さっさと記事を書いたほうがいいのも確かですし。

「Diver」なら最初からおしゃれな見出しデザインが数種類用意されてるし、カスタマイズなんてしなくても十分使えちゃうんですけど、ね。

このブログはWordPressテーマ「Diver」を使用しています

ブログの収益化・効率化を狙うならテーマによるSEO対策や操作性は大事な要素の一つ。

WordPressテーマ「Diver」は初心者にも使いやすく、自分色のブログを作りやすいサイト構造が特長。

人と被るようなブログにしたくない!そんなあなたにおすすめのテーマです。

ブルー
当サイトからのDiver購入者限定特典もあるんだな

はち
可愛いブログを作りたいけど、カスタマイズしてる時間ない!そんな人は必見だね

ちゃとら
ブログ作りの時間短縮をお手伝いする秘伝のレシピなの
おすすめの記事