コロナに負けるな!ステイホームでブログを書きます!

【Cocoon】カテゴリー・タグの色を変える2種類のカスタマイズ法

こんにちは、ブログ歴15年、Wordpress歴8年のLeoです。

今回は無料最強テーマ「Cocoon」で、記事下に並ぶカテゴリーとタグのリストをカスタマイズする方法についてサクッと紹介します。

カテゴリー/タグ一覧の色を変える方法

まずは、色を変えましょう。

何もCSSで指定していないと、「Cocoon設定」によって指定された色などが反映されるためこういう感じになります。

*上のサンプルでは緑に塗りつぶされてしまっていますが、これがカテゴリーです。

Cocoon設定だけで上手くやれる場合はやっていただければいいですが、キーカラーなどの影響も受けてしまうので融通が利かない部分があるので、CSSでしじを出して整形します。

CSSコード

以下をスタイルシートにブチ込みます。

.cat-link {
color: #127997;
border:none;
background-color: transparent;
}

「color」で色を指定し、任意の色に変更しましょう。

上記はカテゴリーの表記を指定するものですので、「.cat-link」を「.tag-link」に入れ替えればタグ列の色を変えられます。

指示している内容
  • 「color」で文字列の色
  • 「background-color」で背景色
  • 「border」で外枠の色
  • 「font-size」で文字の大きさ

など追加で指定できます。

「background-color」についてボクはなしにしたかったので、「transparent」を入れています。同時に、「border」も消えてもらいたいので「none」の指示で消しました。

仕上がり

記事の下部分の流れはこんな感じになりました。ボクは色味のバランスをとってこんな感じにまとめました。

なお、カテゴリーの量が多いとこうして2列になります。

カテゴリー/タグ一覧の色を変える理由・メリット

 

カテゴリーごとに色を変える場合

もう一つ、カテゴリーごとに色を変えるやり方があるので、ボクは採用していませんが紹介します。

このやり方の場合、記事一覧に表示されるカテゴリー名にも反映されるため、カテゴリーわけでブログ内を整理したい人は必見です。

↑こちらはいろんなテーマを製作する「TCD」が販売している、「CORE」というWebマガジンスタイルのテーマですが、上部にタブでカテゴリーが並べられていて、色分けで区別されています。

こんなイメージで、カテゴリーごとに色を指定して、記事一覧上でもわかりやすく分けたいという場合このカスタマイズは役立ちます。

やり方

このカスタマイズはCSSではなく、Wordpress自体の機能で設定します。

「投稿」>「カテゴリー」を開くと、

新規カテゴリーを追加的な画面の横に既存のカテゴリーが表示されるページが出てきますね。

カテゴリー名のあたりにマウスを持っていくと、「編集」という項目が出てくるので入ります。

4つ目の「カテゴリ色」という項目で「背景色」と「文字色」を指定できるようになっています。

あとは、

よく見るこの画面です。○を動かしてもいいですし、任意のコードがあれば入力して色を指定します。

LEOLOGでは全体通して同じ色で指定しているためこの方法の結果を紹介できませんが、これで記事下に並ぶタグの色も指定可能になります。

まとめ・総括

以上、

割とサクッとできる小さなカスタマイズですが、オリジナリティあるサイトデザインに役立つものだと思うので是非やってみてください!

LEOLOGでやっているカスタマイズ一覧は以下からチェックしていただけますので合わせてどうぞ!

ブログ歴15年のLeoによる「Cocoon」"上級カスタマイズ"25項目をまとめて紹介!!
最強無料テーマの「Cocoon」ですが、皆さんどんな感じでカスタマイズしているのか気になると思ってテーマ使用2ヶ月のボク...

この記事が気に入ったら
いいね!しよう

Leo Miyanagaを
Like
LikeLoveHahaWowSadAngry
このブログを書いてる人
Leo

コロナで色々バグった起業家😷
写真家/ブロガー/YouTuberなど色々やってます。愛機はα7III & RX100VII。
シアトル生まれ、大阪育ち→シアトルにも10年以上住んでましたが今は大阪ベース。
このブログではLeoの気になるコトや毎日の色んなコトを記録しています!
詳しいプロフィールはこちら

Leoをフォローする
Web・Wordpress WORK
LEO LOG

Comment 気軽にどうぞ!!

トップへ戻る
タイトルとURLをコピーしました