こんにちは。kasumiです！
記事一覧の画像左上に表示されているカテゴリーの色を変えたいけど、どうやってするんだろう？
このような悩みを解決します。
この記事でできる完成イメージ↓
この記事では、WordPressのテーマ【Cocoon】を使ってカテゴリーラベルの色を変更する方法を紹介します。
ブログ初心者は極力触りたくないコードやプラグインがなくても変更することができます♪
初心者の方でもわかりやすく画像付きで解説するのでとっても簡単です。
カテゴリーラベルの色を変えることで、他のサイトと差別化でき自分だけのオリジナルなサイトに近づきます。
ぜひ、最後までみて下さいね！
Cocoonを使って見やすいサイトを目指してください。
Cocoon カテゴリーラベルの背景色カスタマイズ方法
カテゴリーラベルの色を変える方法を紹介します。
カテゴリーラベルのデフォルトの問題点
ブログを始めて記事が蓄積してくると、自分のサイトのデザインが少しずつ気になってきますよね。
その中の一つに記事一覧に並んでいる画像左上のカテゴリーラベルの色です。
デフォルトでは全てグレー色になっています！
困りはしないけど、他のサイトみたいに色を使いたい…
カテゴリーラベルでやりたいこと
やっぱり自分のサイトを持ったからには、
自分の好きな色を使いたい！
色がある方が可愛い！
サイトの雰囲気を作りたい！
色々な思いがあるかと思います。
完成イメージは写真のような感じです。
初心者でも簡単に出来るのでさっそく変更しちゃいましょう！
Cocoon カテゴリーラベルの背景色を変える方法
Cocoonの設定から変更していきます！
①WordPressのダッシュボードを開き、左にある「投稿」にマウスを合わせます。
②「カテゴリー」を選択します。
③一覧の中にある変更したいカテゴリーの「編集」を選択します。
④カテゴリーを編集の中のカテゴリー色の「背景色」を変更します。
⑤表から好きな色を選択します。
またはカラーコードを入れます。
カラーコードについては記事内の「カラーコードの例」で紹介しています。
⑥カテゴリーの色を変更したら、下にスクロールし「更新」をクリックする
簡単にカテゴリーの背景色を変更することができました。
Cocoon カテゴリーラベルの文字の色を変える方法
背景色だけではなく、同じ方法で文字色も変えることができますよ。
①WordPressのダッシュボードを開き、左にある「投稿」にマウスを合わせます。
②「カテゴリー」を選択します。
③変更したいカテゴリーの「編集」を選択します。
④カテゴリーを編集の中のカテゴリー色の「文字色」を選択します。
⑤好きな色を選択するか、カラーコードを入れます。
⑥カテゴリーの文字色を変更したら、「更新」をクリックします。
簡単にカテゴリーの文字色を変更することができました。
カラーコードの例
使いたい色を指定したい場合はカラーコードが役立ちます。
こちらのサイトを参考にしてみて下さい。
原色大辞典 https://www.colordic.org/
カラーコードの一例を貼っておきますね
モノトーンカラー
シンプルな色のモノトーンは、落ち着いた印象や大人っぽい印象を与えてくれます。
black #000000
gray #808080
silver #c0c0c0
くすみカラー
グレーを被せたような色のくすみカラーは、柔らかく落ち着いた印象を与えてくれます。
#C8AFAF
#E1B8B6
#E1B6CF
#CDB1C1
#B7B8D4
パステルカラー
白を混ぜた淡い色のパステルカラーは、明るく柔らかい印象を与えます。
#FFB2D0
#E6A8F0
#AFE1F3
#A0FFC3
#FFC3A0
ビビットカラー
はっきりとした色のビビットカラーは活気にあふれ明るい印象を与えます。
#cc528b
#c93a40
#d16b16
#65ace4
#56a764
まとめ
設定を変えるだけで簡単にカテゴリーラベルの色を変更することができました！
自分の好きなデザインが増えるだけで、とっても嬉しくなりサイトを作るモチベーションが上がりますね！
読者のためになるサイトを一緒に頑張って作っていきましょう♪
最後までお読みいただきありがとうございました！
コメント