スライダーコンテンツセクションではカテゴリーボタンがタイトルの下に表示されます。カテゴリーボタンの背景色は、メインカラーが指定されており、カテゴリーごとに背景色を指定する機能はEmanonテーマにはありません。

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

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

WordPress管理画面 > 外観 > カスタマイズ > テンプレート設定 > 記事リストレイアウトをクリックし、「カテゴリーclassの表示」を有効にします。

カテゴリーclassの表示

「カテゴリーclassの表示」を有効にすると、コンテンツスライダーのカテゴリー表示は、次のhtmlで構成されます。

<span class="slider-post-category sample-page"><a href="カテゴリーURL">カテゴリースラッグ</a></span>

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

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

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

カテゴリースラッグ

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

スラッグの入力例

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

前述のカテゴリーsample-pageは、コンテンツスライダーで次のhtmlになります。

<span class="slider-post-category sample-page"><a href="http://innocord.xsrv.jp/premium/category/sample-page/">サンプルページ</a></span>

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

カテゴリーの背景と文字の色を変更する場合、次のCSSになります。

.slider-post-category.sample-page a {    background-color:#db4a39;    color: #fff;}

マウスオーバー時のCSS指定は以下です。

.slider-post-category.sample-page a:hover {    background-color: #fff;    color: #000;}

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

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

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

スライダーコンテンツセクション設定の詳細は以下のURLから参照ください。スライダーコンテンツセクション設定