SWELLの投稿一覧ページはアイキャッチ（サムネイル画像）付きで最新ブログ記事が表示されます。ブログ記事のアイキャッチ上に表示されるカテゴリーラベルをカテゴリーごとに好きな色に変更する独自カスタマイズ方法をカスタマイズします。
赤カテゴリーは赤色のラベル、黄色カテゴリーは黄色のラベル、緑カテゴリーは緑といった表示になるカスタマイズです。
カテゴリーラベルを変更する方法
SWELLの基本機能だけでカテゴリーラベルをカテゴリーごとに色分けする事はできません。
CSSを追加するシンプルな方法でカテゴリーごとに任意の色を指定する方法についてです。PHPファイルやら子テーマの出番はありません。コードをコピペできるレベルのSWELL初心者でも真似できます。
かんた子テーマ化する必要はありません
CSSサンプルコード
サンプルコードを紹介します。
[data-cat-id=”1″]{
background:red !important;
}
[data-cat-id=”7″]{
background:yellow !important;
}
[data-cat-id=”8″]{
background:green !important;
}このサンプルはカテゴリー IDが1のカテゴリーラベルを赤(red)、ID7を黄色(yellow)、ID8を緑(green)に変更するCSSコードです。
カテゴリーIDを特定する方法
投稿→カテゴリーと進み、カテゴリー一覧ページを表示させます。表の中の「ID」がカテゴリーIDです。サンプル図だと、一番上に表示されている緑のIDが8だと分かります。
カテゴリーラベルの色を変更する場合
CSSに記載する色はred yellowなどのカラー名のほか、16進数や短縮形でも指定出来ます。
| 色 | カラー名 | 16進数 | 短縮形 |
|---|---|---|---|
| 赤 | red | #FF0000 | #F00 |
| 黄色 | yellow | #FFFF00 | #FF0 |
CSSを追加する場所
独自カスタマイズに慣れている人は好きな場所にコードを追加して構いません。どこに追加して良いかわからない人は次の場所にコードを追加してください。
WordPressダッシュボード左の手のメニュー「外観」→「カスタマイズ」→「追加CSS」をクリック。表示される画面にコードを追加し保存をクリック。
CSSが反映されるページ
投稿一覧、アーカイブページ（カテゴリー、タグ、月間、年間）、トップページ、記事ページで反映されます。特定のページだけでラベルの色を変えたい場合は、条件分岐するかCSSコードのセレクタを細かく指定しましょう。
設定が反映されない場合の対応
ブラウザのキャッシュをクリアしてください。ブラウザのキャッシュがクリアできない事情がある人は、別ブラウザで試してみましょう。
カスタマイザーが反応しない・エラーが出る
WAF（Web Application Firewall）の可能性があります。レンタルサーバーのコントロールパネルにログインし、WAFを一時的に停止してみてください。
備考
SWELLでカテゴリーごとに、アイキャッチ画像上のカテゴリーラベルの色を変更する方法を紹介しました。本カスタマイズはSWELLバージョン: 2.3.1.1で動作確認しています。異なるバージョンによっては動作しないことがありますのでご注意ください。
