≫LINEにてブログ無料相談OKです。

【簡単】WordPressの見出し(hタグ)の色を変更する方法

はじめ

  • 見出しデザインのCSSコードをコピペしたけど違う色にしたい
  • WordPressの見出し(hタグ)の色を変更したい
  • 見出しの色、ブログのカラーデザインをセンスの良いものにしたい

本記事では、上記の疑問にお答えしてしていきます。

この記事を読めば、「WordPressの見出し(hタグ)の色を変更する方法」を理解することができます。

 

1. 【簡単】WordPressの見出し(hタグ)の色を変更する方法

 

WordPressの見出し(hタグ)の色を変更するには、以下の方法で簡単に行えます。

見出しの色を変更する方法
  1. 見出しデザインのCSSコードを取得する
  2. 変更したい「色」のHTMLカラーコードを調べる
  3. 追加CSS編集にてカラーコードを変更する

↓WordPressの見出し(hタグ)の色を変更する方法を動画でも解説しております。

 

1-1. 見出しデザインのCSSコードを取得する

まず、初めに見出しデザインのCSSコードを取得する必要があります。

恐らく、このページを見てくれている方は、好みの見出しデザインのCSSコードを取得・設定までが完了していると思いますが、

まだ見出しデザインのCSSコードを取得していない、設定していない方は以下の記事で解説していますので参考にしてください。

 

1-2. 変更したい見出しの「色」のHTMLカラーコードを調べる

次に、見出しデザインの変更したい「色」を決め、その「色」のHTMLカラーコードを調べる必要があります。

以下のサイトを使えば簡単にお好みの色、HTMLカラーコードを調べることができます。

色の名前とカラーコードが一目でわかるWEB色見本「原色大辞典」

上記のサイトで、お好みの見出しの色のHTMLカラーコードを調べるを調べましょう。

この記事では、実際にツヨシウェブの見出しをred #ff0000(赤)に変更していきます。

 

1-3. 追加CSS編集にて見出しのカラーコードを変更する

CSSにて見出しの色変更に関わるCSSコードは、以下の図の赤字部分です。

 

そして、上記のHTMLカラーコードを変更するために、「外観⇒CSS編集」を選択します。

 

「追加CSS」には、あなたが設定した見出しデザインのCSSコードが書き込まれていると思います。

 

その中のHTMLカラーコードを変更していきます。

ここでは、ツヨシウェブの見出しをred #ff0000(赤)に変更していきます。

 

見出しの色を変えたいHTMLカラーコードを全て変更すれば完了となります。

すると、以下のようにお好みの見出しの色に変更することができます。

 

2. WordPressの見出しの色をブログのカラーデザインに合わせた配色にする方法

次にWordPressの見出しの色をブログのカラーデザインにあったセンスの良い配色にする方法について解説していきます。

ブログのカラーデザインと見出しをセンスの良い配色にする方法もとても簡単で方法は以下の通りです。

見出しをセンスの良い色合いにする方法
  1. Color Huntを参考にブログの色合い・カラーコンセプトを決める
  2. カラーコンセプトにあった見出しの色に変更する

 

2-1. ツール「Color Hunt」を参考にブログのカラーコンセプトを決める

まずは、ツール「Color Hunt」を参考にブログのカラーコンセプトを決めましょう。

Color Huntを使えば、私のように配色センスがない人でも簡単にセンスの良い配色バランスを知ることができるので、

誰でも簡単にオシャレなブログの配色を実現することができます。

 

2-2. カラーコンセプトにあった見出しの色に変更する

  1. ツール「Color Hunt」を使い、ブログのカラーコンセプトを決める。
  2. カラーコンセプトにある色で見出しの色を変更する

上記の手順で行えば完了です。

「Color Hunt」は、配色の色部分にマウスを合わせると「HTMLカラーコード」を表示してくれるので、それをコピペするだけです。

ちなみに、このツヨシウェブも「Color Hunt」の配色パターンを参考に、ブログのカラーデザインを行っています。

私のブログの配色は以下の物を参考にしています。

トップページも、このグリーンの配色を基にメイン画像を作成、アイキャッチ画像はネイビーの配色をメインにしています。

そして、見出しの色もメインのカラー「グリーン」にしています。

 

こうすることによって、見出しだけでなく、ブログ全体のカラーデザインがまとまって、おしゃれなブログに仕上げることができます。

 

まとめ

今回は、【簡単】WordPressの見出し(hタグ)の色を変更する方法についてお話してきました。

見出しの色を変更する方法
  1. 見出しデザインのCSSコードを取得する
  2. 変更したい「色」のHTMLカラーコードを調べる
  3. 追加CSS編集にてカラーコードを変更する

見出しの色は初心者でも簡単に変更することできます。

また、見出しの色は単独で考えるのではなく、ブログのカラーコンセプトを決めてから、

コンセプトに合わせた配色を施すことで、ブログ全体がオシャレなデザインに仕上がると私は考えています。

なので、見出しの色を変えたいと考えている方は是非参考にしてみてください。

もしこの記事が役に立ったと思ったら、ブックマーク・SNSでシェアしてくれるととても嬉しいです。

最後までありがとうございました。

WordPressブログの「見出し(hタグ)」の完全マニュアル【まとめ】