ハシビィくんSWELLのカテゴリーラベルをカテゴリー別に色を変えたいっすけど、機能に無くて困ってるっす。
カピーさんCSSで簡単に調整することができるからサクッと紹介していくぞ！
SWELLの投稿一覧やアイキャッチ画像には、記事のカテゴリーを示すラベルが表示されます。
初期状態ではカテゴリーが異なっていても同じ色で表示されるため、複数のジャンルを扱うブログでは、記事の分類が分かりにくいと感じることがあります。
この記事では、SWELLのカテゴリーラベルをカテゴリーごとに色分けする方法を解説します。
カテゴリーIDの確認方法、追加CSSの設定手順、色選びの注意点、CSSが反映されない場合の対処法まで紹介します。
カテゴリーラベルを色分けするメリット
カテゴリーラベルの色を変えても、サイト全体のデザインが大きく変わるわけではありません。
しかし、カテゴリーごとに色を決めておくと、次のようなメリットがあります。
記事のジャンルを見分けやすくなる
カテゴリーごとに色を変えると、投稿一覧を見たときに記事のジャンルを直感的に把握しやすくなります。
例えば、以下のように色を決める方法です。
- Tipsは青
- 重要は赤
- お知らせはグレー
記事タイトルをすべて読まなくても、ラベルの色から大まかなカテゴリーを判断できます。
特に複数のテーマやサービスを扱っているブログでは、目的の記事を探すときの補助になります。
サイト全体の統一感を出しやすい
カテゴリーごとに適当な色を設定するのではなく、サイトのメインカラーやアイキャッチ画像に合う色を選ぶことで、ページ全体の統一感を出せます。
企業サイトであればブランドカラーを基準にしたり、個人ブログであればカテゴリーごとに同系色を使ったりすると、色が増えてもまとまりやすくなります。
カピーさんカテゴリーごとにアイキャッチのテンプレートを決めているサイトは更に一体感が生まれるぞ。
カテゴリーごとの印象を作れる
色には、それぞれ異なる印象があります。
青なら信頼感、緑なら安心感、オレンジなら親しみやすさなど、カテゴリーごとに色を使い分けることで、記事の雰囲気を補足できます。
ただし、カテゴリーラベルの色だけでサイトのオリジナリティが決まるわけではありません。見出し、ボタン、アイキャッチ画像、余白なども含めて整えることで、より統一されたデザインになります。
SWELLの標準設定で変更できる範囲
SWELLには、サイト全体の基本カラーや記事一覧に関する設定があります。公式マニュアルでも、カテゴリー・タグページごとのカスタマイズ方法が案内されています。
一方で、カテゴリーごとに別々の色を自動で設定する場合は、追加CSSを使う方法が一般的です。
参考サイトでは、カテゴリーIDを指定して、カテゴリーラベルの背景色を変更する方法が紹介されています。
標準設定では全カテゴリー共通の色になる
SWELLでは、管理画面からカテゴリーラベルの色は2つの方法で変更が可能です。
「外観」→「カスタマイズ」→「サイト全体設定」→「基本カラー」へ進み、「メインカラー」を設定します。
この方法はメインカラーなので、ページネーションなどの色も変化します。
もしくは、
「外観」→「カスタマイズ」→「記事一覧リスト」→「カテゴリーの表示設定」へ進み、「サムネイル画像上に表示される時の追加設定」内の「カテゴリーの背景色」や「カテゴリーの文字色」を設定します。
こちらの方法は、設定項目通りカテゴリー関連の色のみを変更する方法です。
ただし、この方法で変更できるのは、基本的にすべてのカテゴリーに共通する色です。
カテゴリーごとに異なる色を設定したい場合は、標準設定だけでは対応できないため、追加CSSを使用します。
例えば、「Tips」は青、「重要」は赤というように色分けしたい場合は、カテゴリーIDを指定したCSSを追加する必要があります。
全カテゴリーを同じ色で統一したい場合は標準設定で十分ですが、カテゴリーごとに見た目を変えたい場合は、次の手順で追加CSSを設定します。
カテゴリーIDを確認する方法
まず、色を変更したいカテゴリーのIDを確認します。
上記の場合は「1」「34」が対象になります。
CSSではカテゴリー名ではなく、カテゴリーごとに割り当てられたIDを指定します。
追加CSSでカテゴリーラベルの色を変更する方法
追加CSSを開く
WordPress管理画面から、次の順番で進みます。
「外観」→「カスタマイズ」→「追加CSS」
すでにCSSを設定している場合は、既存のコードを誤って削除しないよう注意してください。
作業前に、現在のCSSを別の場所へコピーしておくと、問題が起きたときに元へ戻しやすくなります。
カテゴリーIDと色を指定する
以下は、カテゴリーIDが3と5の場合のサンプルです。
.c-postThumb__cat[data-cat-id="3"] {
background-color: #d96b5f;
color: #fff;
}
.c-postThumb__cat[data-cat-id="5"] {
background-color: #5b8fa8;
color: #fff;
}data-cat-id="3"の数字を、実際のカテゴリーIDに置き換えてください。
background-colorは背景色、colorは文字色を指定するプロパティです。
colorは白系でよければ不要になります。
複数のカテゴリーを色分けする場合は、カテゴリーの数だけコードを追加します。
.c-postThumb__cat[data-cat-id="8"] {
background-color: #6a9f78;
color: #fff;
}色は、カラー名よりも16進数のカラーコードで指定すると管理しやすくなります。
保存して表示を確認する
CSSを追加したら、「保存」をクリックして保存します。
その後、以下のページで色が反映されているか確認してください。
- トップページ
- 投稿一覧
- カテゴリーアーカイブ
- 個別記事ページ
- スマートフォン表示
サイトの構成によって、すべてのページで同じように表示されるとは限りません。
色を選ぶときの注意点
文字が読みやすい配色にする
背景色を濃くする場合は白い文字、背景色を淡くする場合は黒や濃いグレーの文字を設定します。特に黄色や淡い緑を使う場合、白い文字では読みにくくなることがあります。
見た目だけでなく、文字の読みやすさを優先して色を選びましょう。
色を増やしすぎない
カテゴリーが10個あるからといって、10色すべてを使う必要はありません。
関連するカテゴリーには同系色を使い、特に区別したいカテゴリーだけ色を変える方法もあります。色の役割を決めておくと、記事を追加した後もデザインを管理しやすくなります。
色だけに情報を頼らない
色の見え方には個人差があります。
カテゴリー名そのものが分かる状態を維持し、ラベルの色はカテゴリー名を補助する役割として使いましょう。
CSSの追加場所を分散させない
追加CSS、子テーマのstyle.css、プラグインなどにコードを分散させると、後から管理しにくくなります。
どこに何を書いたのか分かるように、コメントを付けて整理しておくことをおすすめします。
カピーさん個人的には、子テーマで一括管理がおすすめ！
CSSが反映されない場合の確認ポイント
色が変わらない場合は、次の項目を確認してください。
- カテゴリーIDが正しいか
- CSSの記号やスペルに間違いがないか
- セレクタが現在のSWELLのHTMLと一致しているか
- ブラウザのキャッシュが残っていないか
- キャッシュ系プラグインのキャッシュが残っていないか
- 他のCSSに上書きされていないか
- PCとスマートフォンの両方で確認したか
それでも反映されない場合は、ブラウザの検証機能を使い、カテゴリーラベルに付いているクラス名や属性を確認します。
SWELLはアップデートによって管理画面やHTML構造が変わる可能性があります。公式マニュアルでも、アップデート後は解説記事と実際の画面が異なる場合があると案内されています。
カテゴリー別の色分けが向いているサイト
カテゴリーラベルの色分けは、次のようなサイトに向いています。
- 複数ジャンルの記事を掲載しているブログ
- カテゴリーごとに読者や目的が異なるサイト
- 投稿一覧で記事を探しやすくしたいサイト
- カテゴリーごとに異なる雰囲気を出したいサイト
一方で、カテゴリー数が少ないサイトや、落ち着いた配色を重視するサイトでは、すべて同じ色にした方がまとまりやすい場合もあります。
色を変えること自体を目的にせず、記事を見つけやすくする必要があるかどうかで判断しましょう。
実体験
実際に使って分かったこと
実際の制作案件では、賃貸物件を扱うポータルサイト兼オウンドメディアで、カテゴリーラベルの色を変更したことがあります。
そのサイトでは、オウンドメディア内の記事を「マンション」「アパート」「一軒家」の3カテゴリーに分けていました。
カテゴリーラベルは初期状態のままだと同じ色で表示されます。そのため、記事一覧を見たときに、どの種類の物件について書かれた記事なのかを判断するには、カテゴリー名や記事タイトルを確認する必要がありました。
そこで、カテゴリーごとにラベルの色を設定し、サムネイル画像の色味とも統一感を持たせました。
「マンション」「アパート」「一軒家」でそれぞれ色の方向性を分けることで、記事一覧を見たときにカテゴリーを視覚的に判別しやすくしています。
このとき意識したのは、ラベルだけを目立たせることではありません。サムネイルのデザインとカテゴリーラベルの色を合わせることで、記事一覧全体の見た目を整えながら、ユーザーが目的の記事を探しやすくすることです。
カテゴリーラベルの色変更は小さなカスタマイズですが、カテゴリー数が少なく、サムネイルのデザインも統一されているサイトでは、視認性やサイト全体のまとまりを高める方法として活用できます。
まとめ：SWELLのカテゴリーラベルを色分けしてサイトの印象を整える方法
SWELLのカテゴリーラベルは、追加CSSを使うことでカテゴリーごとに色分けできます。
カテゴリー別に色を設定すると、投稿一覧で記事のジャンルを見分けやすくなり、サイト全体の配色にも統一感を出しやすくなります。
ただし、色を増やしすぎると見づらくなるため、カテゴリー数や文字色とのバランスを考えて設定することが大切です。
- SWELLのカテゴリーラベルは、カテゴリーIDを指定して色を変更できます。
- 色分けはオリジナリティだけでなく、記事の識別性を高める目的で活用できます。
- CSSが反映されない場合は、カテゴリーID、キャッシュ、HTML構造を確認します。
カテゴリーラベルだけでなく、見出しやボタン、アイキャッチ画像などもまとめて調整したい場合は、OWNへお問い合わせください。
OWNでは、SWELLなどのWordPressテーマを使った既存サイトのカスタマイズや、CSSによる部分的な表示修正に対応しています。
コメント（承認制）