WordPressテーマEmanonシリーズのフロントページは、記事一覧のアイキャッチ画像左上にカテゴリー名を表示できます。カテゴリー名の背景色は、メインカラーが指定されており、カテゴリーごとに背景色を指定する機能はありません。

カテゴリー表示の配色変更

このページでは、カテゴリーごとに背景色を変更する方法を解説します。どのカテゴリーに属する記事なのか視覚的に表現したい場合に使えるカスタマイズです。

カテゴリー表示の配色変更

フロントページの記事一覧のカテゴリー表示は、次のhtmlで構成されています。

その記事に登録されているカテゴリー名とカテゴリー一覧ページのURLが反映される仕組みです。カテゴリースラッグとは、カテゴリー追加(編集)画面に表示される項目で、ページのURLに使われる文字列です。

カテゴリースラッグの設定方法

WordPress管理画面 > 投稿 > カテゴリーをクリックすると次の画面になります。

カテゴリースラッグ

スラッグは、URLに使用されるため、半角小文字、英数字とハイフンのみで表記します。例えば、サンプルページという名前のカテゴリーを作成する場合、スラッグは、sample-pageと入力します。

スラッグの入力例

カテゴリースラッグを使ったCSSの設定方法

前述のカテゴリーsample-pageは、フロントページで次のように表示されます。

カテゴリーの表示サンプル

カテゴリー表示のhtmlは、次の構成になります。

idに”sample-page”と表示されており、スラッグで指定した文字例が反映されていることが確認できます。

このidを使ってカテゴリーの背景と文字の色を変更する場合、次のようなCSSになります。

#id名は、idセレクタと呼ばれ、スタイルを適用する対象を意味します。上記の例だと、カテゴリーのスラッグsample-pageがid名です。これに#をつけた#sample-pageが、idセレクタです。

background-colorは、背景色を意味します。#db4a39の部分は、色の指定です。colorは、文字の色を意味し、#fff;の部分は、同様に色の指定です。このCSSを「追加 CSS」に反映することで、カテゴリー表示の色を変更できます。

カスタマイズ機能「追加 CSS」

WordPress管理画面 > 外観 > カスタマイズをクリックすると、「追加 CSS」メニューがあります。「追加 CSS」は、WordPressのheadタグ内にCSSを追加する機能です。テーマが更新されても影響を受けません。

追加CSS

上記の例は、下記CSSを追記した状態です。