こんにちは!nicoです。
ワードプレスの神テーマである「SWELL」でも一部カスタマイズができない部分があるかと思います。
今回は投稿ページのタイトルの色を変える方法をご紹介します!
![](http://image.moshimo.com/af-img/3130/000000053838.jpg)
![タイトルの色を変える](https://chill-723729.com/wp-content/uploads/2022/09/名称未設定-7-1.png)
![](https://chill-723729.com/wp-content/uploads/2022/07/illust_83-min.png)
デフォルトだとタイトルと本文は同じ色になりますが、上図のようにタイトルの色だけ変えることができます!
CSSですが、コピペでできるので初心者の方でも簡単に変更できます☺
引っ越しによりストレスで病気になる
在宅で仕事をしたいため、アラフォー未経験からフリーランスのウェブデザイナーへ
![](http://image.moshimo.com/af-img/2512/000000061080.png)
![](http://image.moshimo.com/af-img/2512/000000061080.png)
タイトルのフォントカラーを変える方法
デフォルトだとタイトルのテキストカラーは「基本カラー」で決めたテキストカラーになっているかと思います。
![タイトルの画像](https://chill-723729.com/wp-content/uploads/2022/09/名称未設定-1.png)
![タイトルの画像](https://chill-723729.com/wp-content/uploads/2022/09/名称未設定-1.png)
私の場合、初期の#333333に設定されています。
![タイトルの色を変える](https://chill-723729.com/wp-content/uploads/2022/09/名称未設定-2.png)
![タイトルの色を変える](https://chill-723729.com/wp-content/uploads/2022/09/名称未設定-2.png)
カスタマイズの「テキストカラー」を好きな色に変えてみましたが、それだと本文の色も同じ色になってしまいますよね。
これだと非常に見えにくいです。
そこで、本文のテキストカラーはそのままでタイトルのテキストカラーだけを変えるCSSを使います。
.c-postTitle__ttl{
color:#D16E84;
}
#の部分は好きなカラーコードを入れてください。
![追加CSS画像](https://chill-723729.com/wp-content/uploads/2022/09/名称未設定-5.png)
![追加CSS画像](https://chill-723729.com/wp-content/uploads/2022/09/名称未設定-5.png)
![公開画像](https://chill-723729.com/wp-content/uploads/2022/09/名称未設定-6.png)
![公開画像](https://chill-723729.com/wp-content/uploads/2022/09/名称未設定-6.png)
![タイトルの色を変えた後](https://chill-723729.com/wp-content/uploads/2022/09/名称未設定-7-1.png)
![タイトルの色を変えた後](https://chill-723729.com/wp-content/uploads/2022/09/名称未設定-7-1.png)
これでタイトルは任意のカラー、本文は「基本カラー」のテキストカラーになりました!
ちなみに、「カスタマイズ」の「追加CSS」にCSSをペーストした場合はすべてのページに反映されますが、任意のページにだけ対応させたい場合は各ページの下のほうにある「カスタムCSS & JS」の「CSS用コード」にCSSを入れます。
![CSSコード画面](https://chill-723729.com/wp-content/uploads/2022/09/名称未設定-8-1024x424.png)
![CSSコード画面](https://chill-723729.com/wp-content/uploads/2022/09/名称未設定-8-1024x424.png)
上の画像の赤枠部分にさきほどコピーしたCSSを入れることで、そのページにだけCSSが反映されます。
リスト表示しているタイトルの色を変える
タイトルの色は変更できましたが、これだけではリストとして表示しているときのタイトルは基本カラーのままです。
![リスト表示変更前](https://chill-723729.com/wp-content/uploads/2022/09/名称未設定-9.png)
![リスト表示変更前](https://chill-723729.com/wp-content/uploads/2022/09/名称未設定-9.png)
![](https://chill-723729.com/wp-content/uploads/2022/07/illust_83-min.png)
![](https://chill-723729.com/wp-content/uploads/2022/07/illust_83-min.png)
![](https://chill-723729.com/wp-content/uploads/2022/07/illust_83-min.png)
リスト表示で見たときはタイトルの色が変わっていないね・・・
![リスト表示変更後](https://chill-723729.com/wp-content/uploads/2022/09/名称未設定-10.png)
![リスト表示変更後](https://chill-723729.com/wp-content/uploads/2022/09/名称未設定-10.png)
こんなふうにタイトルの色だけ変えます!
.p-postList .p-postList__title{
color:#D16E84;
}
#の部分は好きなカラーコードを入れてください。
![追加CSS画像](https://chill-723729.com/wp-content/uploads/2022/09/名称未設定-3-1.png)
![追加CSS画像](https://chill-723729.com/wp-content/uploads/2022/09/名称未設定-3-1.png)
![公開画像](https://chill-723729.com/wp-content/uploads/2022/09/名称未設定-4.png)
![公開画像](https://chill-723729.com/wp-content/uploads/2022/09/名称未設定-4.png)
これでタイトルの色だけが変わりました!
![](https://chill-723729.com/wp-content/uploads/2022/07/illust_83-min.png)
![](https://chill-723729.com/wp-content/uploads/2022/07/illust_83-min.png)
![](https://chill-723729.com/wp-content/uploads/2022/07/illust_83-min.png)
とっても簡単にできましたよね。
ぜひ活用してみてくださいね!
![](http://image.moshimo.com/af-img/3130/000000053838.jpg)
![](http://image.moshimo.com/af-img/3130/000000053838.jpg)
コメント