賢威7.0

サイドバーの見出しをカスタマイズする方法(文字の色を変更):賢威7

今回の記事では、WordPressテーマ:賢威7のサイドバーに表示される見出しを別の色に変更する方法をご紹介します。

(ここで紹介する方法では、コードの1つの追加で、検索のウィジェットやPVランキングのウィジェットなど、サイドバー全体の見出しの色を変更することができます)

カスタマイズ前

↓ 最初の状態では見出しは黒(#333)に設定されています

sidebar-title-font-color-before-1

カスタマイズ後

カスタマイズ 1

↓ サイドバーの見出しを赤に変更

sidebar-title-font-color-after-1
カスタマイズ 2

↓ 今度は見出しタグを青に変更

sidebar-title-font-color-after-2

[ad]

1. サイドバーの見出しを別の色に変更

カスタマイズの前後で違いが分かりやすい色にしたいので、あまり現実的な色では無いんですけど、ここでは鮮やかな赤(#F00)にしてみます。

下のコードをお使いのCSSファイルに追加すると、、、

.sub-conts .section-wrap .section-in .section-title, 
.sub-conts .section-wrap .article-header .section-title {
    color: #F00;
}

見出しの色が赤になりました。
(他のサイドバーのタイトルも同じように色が変わっています。)

sidebar-title-font-color-after-1

2. お好みの色にするには

サイドバーの見出しは color: で指定しているので、 color: の後に続くカラーコードを変更すれば、お好みの色にすることができます。

例えば、見出しの色を青(#0043FF)にすると、CSSコードは以下のようになります。

.sub-conts .section-wrap .section-in .section-title, 
.sub-conts .section-wrap .article-header .section-title {
    color: #0043FF;
}

保存・更新すると、サイドバーのタイトルタグは、上のコードで指定した青(#0043FF)になりました。

sidebar-title-font-color-after-2

このように、color: の後に続くカラーコードを変えることで、サイドバー全体の見出しをお好みの色にすることができます。

今回のカスタマイズは以上です。
最後まで閲覧ありがとうございました。