WPテーマ「JIN」でパンくずリストの文字色を変更する方法

この記事ではJIN付属のパンくずリストの文字色変更カスタマイズを紹介しています。
記事内では例として黒色に変更していますが、何色にでも変更できます。

パンくずリストの文字色変更カスタマイズ

JINには標準でパンくずリスト表示機能が付いています。
パンくずリストはユーザビリティ向上と共にSEO的にも大事な役割を果たしていて、特別な理由がなければ表示させるべきです。

そのパンくずリストですが、JINのUIでは直感的に文字色の変更することは出来ません。
そこで、本記事ではコピペだけで簡単に文字色変更できるコードを紹介します。
※細かい色指定については各自変更の必要があります。今回は例として黒に設定します。

手順

先に手順を紹介します。
まず以下のコードをコピペします。

/*---パンくずリスト---*/
/*PC表示の設定*/
  @media (min-width: 768px) {
    #breadcrumb ul li a,
    #breadcrumb ul li {
      font-weight: 300;/*文字の太さ*/
      color: rgba(0,0,0,255) !important;/*文字色*/
		} }
/*スマホ表示の設定*/
  @media (max-width: 767px) {
    #breadcrumb ul li a,
    #breadcrumb ul li {
      font-weight: 400;/*文字の太さ*/
      color: rgba(0,0,0,255) !important;/*文字色*/
		} }
/*---パンくずリスト---*/

次に外観→カスタマイズ→追加CSS
の順番に進んで、コードを貼り付けます。