【SWELL】アイキャッチ・サムネイル画像のカテゴリーラベルの色をカテゴリーごとに変更する方法

【SWELL】サブループをショートコート化し、固定ページに表示させるサンプルコード

SWELLの投稿一覧ページはアイキャッチ(サムネイル画像)付きで最新ブログ記事が表示されます。ブログ記事のアイキャッチ上に表示されるカテゴリーラベルをカテゴリーごとに好きな色に変更する独自カスタマイズ方法をカスタマイズします。

SWELLkカテゴリーごとに色を買える

赤カテゴリーは赤色のラベル、黄色カテゴリーは黄色のラベル、緑カテゴリーは緑といった表示になるカスタマイズです。

この記事を書いた人
  • IT業界22年のベテラン エンジニア
  • WordPressで企業サイトの構築しています
  • 取り扱いWordPressテーマは300個オーバー
SWELLマニアの かんた です

カテゴリーラベルを変更する方法

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コードです。

セレクタがariaなのがポイントです。

カテゴリーIDを特定する方法

カテゴリーID

投稿カテゴリーと進み、カテゴリー一覧ページを表示させます。表の中の「ID」がカテゴリーIDです。サンプル図だと、一番上に表示されている緑のIDが8だと分かります。

もし表に「ID」の欄が表示されていない場合は、画面右上の表示オプションをクリックしカラムの「ID」にチェックを入れてください。

カテゴリーラベルの色を変更する場合

CSSに記載する色はred yellowなどのカラー名のほか、16進数や短縮形でも指定出来ます。

カラー名16進数短縮形
red#FF0000#F00
黄色yellow#FFFF00#FF0

CSSを追加する場所

独自カスタマイズに慣れている人は好きな場所にコードを追加して構いません。どこに追加して良いかわからない人は次の場所にコードを追加してください。

WordPressダッシュボード左の手のメニュー「外観」→「カスタマイズ」→「追加CSS」をクリック。表示される画面にコードを追加し保存をクリック。

CSSが反映されるページ

投稿一覧、アーカイブページ(カテゴリー、タグ、月間、年間)、トップページ、記事ページで反映されます。特定のページだけでラベルの色を変えたい場合は、条件分岐するかCSSコードのセレクタを細かく指定しましょう。

設定が反映されない場合の対応

ブラウザのキャッシュをクリアしてください。ブラウザのキャッシュがクリアできない事情がある人は、別ブラウザで試してみましょう。

カスタマイザーが反応しない・エラーが出る

WAF(Web Application Firewall)の可能性があります。レンタルサーバーのコントロールパネルにログインし、WAFを一時的に停止してみてください。

レンタルサーバーによってはWAFの設定切り替えの反映に時間がかかるものがあります。

備考

SWELLでカテゴリーごとに、アイキャッチ画像上のカテゴリーラベルの色を変更する方法を紹介しました。本カスタマイズはSWELLバージョン: 2.3.1.1で動作確認しています。異なるバージョンによっては動作しないことがありますのでご注意ください。

よかったらシェアしてね!
  • URLをコピーしました!