トップページ記事一覧のカテゴリーラベルの色を変える方法

「トップページの記事一覧のサムネイル画像上に表示されるカテゴリーラベルの色を、カテゴリー別に変えたい」とのご要望があったので、その方法を解説します。

実はこんなときのためにテーマ側であらかじめ仕込みは行ってあります。CSSだけで指定できるので、ぜひお試しください。

目次非表示

記事一覧のカテゴリーラベル色を変える方法

それでは早速、手順を解説していきます。

まずは、トップページ記事一覧のカテゴリーラベルの真上で右クリックします。

表示されるメニューの中から「検証」を選びます。ブラウザによっては「要素の検査」や「調査」という名前になっている場合もあります。

これでクリックした部分（もしくはその周辺）のHTMLが表示されます。その中に<a class="dfont cat-name catid◯◯">という表示があると思います。このcatid◯◯がそのカテゴリーのラベル用のクラス名です。このクラス名に対して、CSSで色を変える指定をします。

style.css

#main .catid◯◯ {
    background: 色コード;
}

上記のCSSを子テーマのstyle.cssなどに貼り付けます。◯◯には、さきほど調べたカテゴリーラベルのクラス名（半角数字）を入れます。色コードは、HTMLカラーコードなどで調べることができます。例えば、background: #f89174;というように入力すれば良いですね。

注意

カスタマイズ実施後は、ブラウザのキャッシュを削除しましょう（でないとお使いのブラウザに反映されません）。

カラーコードは「検証モード」の中で調べたり、テストすることもできます。詳しくはこちらの記事をどうぞ。

初心者向け！Chromeの検証機能（デベロッパーツール）の使い方

他のカテゴリーのラベル色を変える場合にも、同様の手順を行えばOKです。