はじめ見出しデザインのCSSコードをコピペしたけど違う色にしたい
WordPressの見出し（hタグ）の色を変更したい
見出しの色、ブログのカラーデザインをセンスの良いものにしたい
本記事では、上記の疑問にお答えしてしていきます。
この記事を読めば、「WordPressの見出し（hタグ）の色を変更する方法」を理解することができます。
お洒落なサイトが誰でも作れる！
ブログを書くのが楽になるテーマ「SWELL」
- 誰でも簡単にオシャレなブログが作れます！
- WordPressの使いやすさがアップします！
- キャッシュ機能とページ高速遷移機能で初心者も簡単にWordPressの高速化が可能です！
- アフィリンクの一元管理機能が標準装備されてます！
＼一度使うと他のテーマには戻れません！／
※実際に私の当ブログは「SWELL」を使って運営しており、大満足のテーマです！
1. 【簡単】WordPressの見出し（hタグ）の色を変更する方法
WordPressの見出し（hタグ）の色を変更するには、以下の方法で簡単に行えます。
- 見出しデザインのCSSコードを取得する
- 変更したい「色」のHTMLカラーコードを調べる
- 追加CSS編集にてカラーコードを変更する
↓WordPressの見出し（hタグ）の色を変更する方法を動画でも解説しております。
1-1. 見出しデザインのCSSコードを取得する
まず、初めに見出しデザインのCSSコードを取得する必要があります。
恐らく、このページを見てくれている方は、好みの見出しデザインのCSSコードを取得・設定までが完了していると思いますが、
まだ見出しデザインのCSSコードを取得していない、設定していない方は以下の記事で解説していますので参考にしてください。
WordPressの見出しデザインをプラグインで3分簡単設定！【解説】
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の見出しの色をブログのカラーデザインにあったセンスの良い配色にする方法について解説していきます。
ブログのカラーデザインと見出しをセンスの良い配色にする方法もとても簡単で方法は以下の通りです。
- Color Huntを参考にブログの色合い・カラーコンセプトを決める
- カラーコンセプトにあった見出しの色に変更する
2-1. ツール「Color Hunt」を参考にブログのカラーコンセプトを決める
まずは、ツール「Color Hunt」を参考にブログのカラーコンセプトを決めましょう。
Color Huntを使えば、私のように配色センスがない人でも簡単にセンスの良い配色バランスを知ることができるので、
誰でも簡単にオシャレなブログの配色を実現することができます。
2-2. カラーコンセプトにあった見出しの色に変更する
- ツール「Color Hunt」を使い、ブログのカラーコンセプトを決める。
- カラーコンセプトにある色で見出しの色を変更する
上記の手順で行えば完了です。
「Color Hunt」は、配色の色部分にマウスを合わせると「HTMLカラーコード」を表示してくれるので、それをコピペするだけです。
ちなみに、このツヨシウェブも「Color Hunt」の配色パターンを参考に、ブログのカラーデザインを行っています。
私のブログの配色は以下の物を参考にしています。
トップページも、このグリーンの配色を基にメイン画像を作成、アイキャッチ画像はネイビーの配色をメインにしています。
そして、見出しの色もメインのカラー「グリーン」にしています。
こうすることによって、見出しだけでなく、ブログ全体のカラーデザインがまとまって、おしゃれなブログに仕上げることができます。
まとめ
今回は、【簡単】WordPressの見出し（hタグ）の色を変更する方法についてお話してきました。
- 見出しデザインのCSSコードを取得する
- 変更したい「色」のHTMLカラーコードを調べる
- 追加CSS編集にてカラーコードを変更する
見出しの色は初心者でも簡単に変更することできます。
また、見出しの色は単独で考えるのではなく、ブログのカラーコンセプトを決めてから、
コンセプトに合わせた配色を施すことで、ブログ全体がオシャレなデザインに仕上がると私は考えています。
なので、見出しの色を変えたいと考えている方は是非参考にしてみてください。
もしこの記事が役に立ったと思ったら、ブックマーク・SNSでシェアしてくれるととても嬉しいです。
最後までありがとうございました。
【PR】現役ブロガーの実践ノウハウをこっそり教えちゃいます。
当サイトでは、私が月7桁稼ぐまでに至ったノウハウ・現在実践しているノウハウを「ツヨシウェブSHOP」で有料コンテンツとして販売しております。実際にブログで月7桁稼いだ実績を持っており、また現在もブログ収益で生活をしていますので情報の信頼性は高いと感じています。
しかし、有料コンテンツで提供している情報は「楽して稼ぐ！」というものにはなっておらず、これから私と同じようにブログ・発信者として生活していきたい方に向けて書いておりますので「継続的に作業できる方のみ」ご購入いただければ幸いです。
また、コンテンツには自信を持って提供させて頂いておりますので、もし購入後ご不満がございましたら「返金対応」させて頂きます。
月7桁をを達成したサイト設計方法です！
初心者のための「サイト設計方法」月7桁を実現するブログの作り方を解説。
- 見込み客→キーワード選定→サイト導線が重要。
- 「成約から近い見込み客」の考え方について解説。
- 狙うべきキーワードについて解説。
- サイト導線の考え方について解説。
＼月7桁を達成したサイト設計方法が学べます！／
- 初心者のための「サイト設計方法」月7桁を実現するブログの作り方を解説。
- 見込み客→キーワード選定→サイト導線が重要。
- 「成約から近い見込み客」の考え方について解説。
- 狙うべきキーワードについて解説。
- サイト導線の考え方について解説。
＼月7桁を達成したサイト設計方法が学べます！／
- 初心者のための「サイト設計方法」月7桁を実現するブログの作り方を解説。
- 案件を選ぶ際の7つのポイントが学べます。
- 購入されやすい商品の特徴。
- 案件選びで重要な見るべきポイント。
- 案件を取り組む際に確認すべき事項。
＼アフィリ案件を選ぶ秘訣が学べます！／
