賢威7：個別記事タイトルの文字色を変更する方法

こんにちは、ぶどうサワーです。
サイトの閲覧ありがとうございます。

今回は、WordPressテーマ：賢威7の個別記事に表示される記事タイトルを別の色にする方法を紹介したいと思います。

この記事タイトルの色を変更するカスタマイズですが、CSSの指定方法を注意しないと、サイドバーのタイトルや固定ページのタイトルまで一緒に色が変わってしまうという落とし穴があります。

CSSに使い慣れていない人にとっては、間違った指定をしてうまく直せないことがあると思うので、ここではその注意点などを踏まえたスタイリング方法を紹介していきます。

カスタマイズ前

↓ 賢威7をインストールしたばかりの状態

↓ 記事タイトルの色を赤に変更（サイドバーのタイトルは黒のまま）

↓ 固定ページなど他のページの色は変更されず、そのまま同じ色

今回は見た目をカスタマイズしたいので、CSSファイルを編集していきます。

賢威7本体（親テーマ）の base.css ファイルや、子テーマのCSSファイルなど、お使いのCSSファイルに以下のコードを追加します。

.single .main-conts .section-wrap .section-title {
    color: #FF0000;
}

これで個別記事のタイトルのみ、文字の色を変更することが出来ました。

もしサイドバーウィジェットのタイトルも一緒に色が変わってしまった場合は、.main-conts がCSSコードの中に入っているか確認してみてください。

これが入っていないと、サイドバーウィジェットのタイトルも一緒に変わってしまうので、注意が必要です。

下のコードはCSSの指定（セレクタ）が間違っている例です。
（.main-contsが入っていないので、サイドバーウィジェットのタイトルも一緒に色が変わってしまいます）

.single .section-wrap .section-title {   ← セレクタがおかしい例
    color: #FF0000;
}

ここでは .single というbodyクラスを使いましたが、それ以外のものについては以下のページに詳しく載っているので、よかったら参考にして下さい。
（.single のように、スタイリングしたいページに当てはまるクラス名を付けて使用します）

先ほどはタイトルの文字を赤（#FF0000)にしましたが、カラーコード部分を変えることでお好みの色にすることができます。

例えば青色（#2700FF）にすると、、、

.single .main-conts .section-wrap .section-title {
    color: #FF0000;
}

タイトルの文字だけ青に変わりました。
他の色についても同じ要領でcolor:の後を変更すれば同じようにカスタマイズすることができます。

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