WordPressテーマHuemanのCSSをカスタマイズし見出しを変えるには?

WordPressテーマHuemanの文字色や見出しを見やすいものに変更する

HuemanのCSSを改善したい!

どうも、アンジーです!

この記事では無料のWordPressテーマ「Hueman」のCSSをカスタマイズし、サイト全体の文字色、見出し(h2要素、h3要素)を見やすくする方法を分かりやすく説明します。

直観的にh2{}、h3{}と指定するだけではhumanの追加CSSの編集はうまくいかず、HTML/CSSに疎い筆者は、最初、けっこう悩みました。無い知恵を絞って、Chromeの”要素を検証する”を使い、なんとか文字色、h2、h3をカスタマイズできました。

忘備録をかねて、各種設定方法を画像付きでご説明いたします。

HuemanのCSSをカスタマイズする方法

HuemanのCSSをカスタマイズするには、[ダッシュボード]から[外観]⇒[カスタマイズ]を選択し、下記の画像のように[詳細設定]⇒[追加CSS]を選択します(テーマの編集からはCSSファイルを編集できない点に注意!)。

WordPressテーマ「human」のCSSをカスタマイズする方法

Huemanの文字色を変更するには?

デフォルトの状態ではHuemanの文字色ってちょっと薄くて読みにくいですよね。できればもう少し黒に近づけたいところ。

カスタマイズから[追加CSS]を開いたら、p要素に対して下記のようにCSSを設定します。

.entryを指定する点がポイントです。

Huemanの見出し(h2、h3)を変更するには?

同じく、[追加CSS]画面で、h2要素、h3要素の各見出しをカスタマイズします。

h2要素のCSSの変更方法

Huemanのh2要素は初期状態だと簡素すぎますよね。そこでh2要素の文字色とデザイン(背景色やボーダーなど)を変更する方法を説明します。h2要素のデザインを変更するには、.entry h2と.entry h2 spanをいじります。

投稿ページの文字色の変更は.entry h2 spanで行い、固定ページの文字色の変更は.entry h2で行います。

文字色以外のCSS(背景色やボーダー)の設定は、.entry h2でOKです。

spanがあるのでちょっとややこしいですね。

参考までに当ブログのh2要素の追加CSSの技術を掲載します。

ソースコードが汚いのはどうかご勘弁を!

このCSSサンプルを実装すると、こんな感じになります。

h2要素のcssカスタマイズ例

h3要素のCSSの変更方法

h3要素も初期状態では簡素すぎる見出しのデザインですよね。margin、color、background-color、borderあたりを自分好みにカスタマイズしたくなる方も多いのではないでしょうか。

h3要素の追加CSSの記述はこんな感じです。h2要素のカスタマイズと同じく、.entry h3と.entry h3 spanの2箇所を設定します。

このコードの設定結果はこんな感じでWordPressの画面に反映されます。

huemanテーマのh3要素のカスタマイズ例

まとめ

簡単ではありますが、WordPressテーマ「Hueman」の追加CSSを編集し、文字色や見出しを改善する方法の解説でした。

わたくしアンジー同様、”WordPressブログ仲間”の皆様のご参考になれば幸いでございます。

 

スポンサードリンク



コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

CAPTCHA