「SWELLのカテゴリー表示を背景色で色分けして分かりやすくしたい！」
「記事のカテゴリー表示を目立たせたい！」
と思うことはありませんか？
そこでこの記事では、SWELLのカテゴリー表示を背景色で色分けする方法をご紹介します。
前提条件
お使いのバージョンやプラグインの相性、すでに適用している他のカスタマイズ等によっては動作しない可能性があります。
【WordPress】6.5.2
【テーマ：SWELL】2.10.0
色だけ変えるなら設定変更だけ！
SWELLでは、デフォルトで全カテゴリーで背景色が同一となっています。
色はサイトのメインカラーが適用されます。
この背景色を変更するだけなら、SWELLでは設定が用意されていて簡単に変えることができます。
管理画面から「外観」－「カスタマイズ」－「記事一覧リスト」－「カテゴリーの表示設定」と進んだ先にある”カテゴリーの背景色”を変更することで、背景色を簡単に変更。
ただ、この方法ではカテゴリーの背景色は全て同じ色となってしまいます。
カテゴリーごとに背景色を設定する方法
ここからが本編ですが、カテゴリーごとに背景色を設定する方法はとても簡単です。
カテゴリーIDを調べる
カテゴリーIDごとに色を設定することになります。
事前にIDをメモしておきましょう。
SWELLの場合、管理画面から「投稿」－「カテゴリー」と進めば簡単に確認できます。
カテゴリーIDごとに背景色を設定する
ここで紹介する方法は、記事一覧でのカテゴリー背景色の変更のみに対応しています。
各投稿ページ上部のカテゴリー背景色も変更する場合は後述しています。
管理画面から「外観」－「カスタマイズ」－「追加CSS」を開き、以下の文を追加して保存します。
.c-postThumb__cat[data-cat-id="1"] {
background-color: #9400d3;
color:white;
}
.c-postThumb__cat[data-cat-id="2"] {
background-color: red;
}background-colorは背景色ですが、色によっては文字が見にくくなることがあります。
その場合は「color:white;」のように記載すれば、文字色も変更することが可能で見やすくできます。
data-cat-id=”1″や”2″はカテゴリーID（1 or 2）を表します。
色を変更したいカテゴリーIDに各自変更してください。
background-colorやcolorには、原色に近い色で良ければblueやredなど名称を、細かい色合いを調整したい場合は色コード（#と6桁の数値）を設定しましょう。
ここで設定しないIDは今まで同様、以下２点のどちらかの設定値になります。
・サイトのメインカラー
・「外観」－「カスタマイズ」－「記事一覧リスト」－「カテゴリーの表示設定」と進んだ先にある”カテゴリーの背景色”
これだけで変更できているはずです！確認してみましょう！
投稿ページ上部のカテゴリー背景色を変える
先述の方法は記事一覧（アーカイブ）で表示されるカテゴリーの背景色を変更する方法でした。
投稿ページの上部に表示されるカテゴリーの背景色は変わりません。
投稿ページ上部のカテゴリー背景色まで変更する場合は、先述のCSSから｛.c-postThumb__cat｝を削除します。
管理画面から「外観」－「カスタマイズ」－「追加CSS」を開き、以下の文を追加して保存します。
[data-cat-id="1"] {
background-color: #9400d3;
color:white;
}
[data-cat-id="2"] {
background-color: red;
}background-colorは背景色ですが、色によっては文字が見にくくなることがあります。
その場合は「color:white;」のように記載すれば、文字色も変更することが可能で見やすくできます。
data-cat-id=”1″や”2″はカテゴリーID（1 or 2）を表します。
色を変更したいカテゴリーIDに各自変更してください。
ここが欠点…
当記事でご紹介したやり方には、一つ欠点があります。
それは、SWELL専用の投稿リストブロックをテキスト型にした際、以下のように表示が崩れることです。
テキスト型の投稿リストを使う場合、SWELL専用ではなくWordPress標準機能の投稿リストを使用すると回避できますが、以下のようにデザイン性は落ちてしまいます。
テキスト型のSWELL専用投稿リストブロックを使いたい場合は当記事の内容はNG！
まとめに替えて
カテゴリーごとに色分けすることで、特定のカテゴリーを探したい人に対して分かりやすく記事を提示できるようになります。
色を工夫してカテゴリーを目立たせることができれば、サイト内回遊を高くできる可能性がある大事な要素です。
一工夫重ねて、他のサイトと差をつけてみましょう！
コメント