このブログはWordPressテーマ「JIN（ジン）」のテンプレートを利用しています。
JINではカラー設定も細かく指定できるようになっています。
しかし、パンくずリストの色をどこで指定していいのか分からず、、。
調べてやってみたのでついでに記事にしました^^
パンくずリストのカラーを変更する
パンくずリストはパソコンの表示ではフッター部分にあります。（スマホなどモバイルでは記事の下）
変更する前のパンくずリストは↓こんな感じでした。
見えん^^;
自動でフッターの背景色がパンくずリストのテキストカラーになる仕様になっているようです。
文字の色を変えるには追加CSSにコードを追加します。
外観 → カスタマイズ → 追加CSS
文字と右矢印のカラー指定
#breadcrumb ul li a {
color: #2476e2 !important;
}
#breadcrumb ul li {
color: #262626 !important;
}
色は color: #〜 の部分を好きなカラーコードにして下さい。
トップにいく上矢印のカラー指定
.page-top-footer a.totop {
color: #262626 !important;
}
まとめて指定する
カンマと半角スペースを間に入れるとまとめて指定できます。(, )
#breadcrumb ul li, .page-top-footer a.totop {
color: #262626 !important;
}
#breadcrumb ul li, #breadcrumb ul li a, .page-top-footer a.totop {
color: #2476e2 !important;
}
背景色を変えるには？
#breadcrumb:after {
background-color: transparent !important;
}
色を指定する場合は「transparent」部分をカラーコードに変えてください。
ワードプレスの追加CSSでエラーが出る場合
追加CSSにコードを追加して公開ボタンを押すと
と出る場合はサーバーのWAFを一旦OFFにすると追加できます。
このブログではConoHa WINGを使っているのでConoHa WINGの場合で説明します。
ConoHa WING → サイト管理 → サイトセキュリティ → WAF → 利用設定
ONになっているのをOFFにします。
追加CSSで公開を押してCSSが反映されたのを確認したらOFFからONに戻します。
パンくずリスト色変更まとめ
変更後のパンくずリストは↓このようになりました。
/* パンくずリストの文字色変更 */
#breadcrumb ul li a {
color: #2476e2 !important;
}
/* パンくずリストの矢印の色*/
#breadcrumb ul li, .page-top-footer a.totop {
color: #262626 !important;
}
ワードプレスのカスタマイズで追加CSSにいろいろなコードを追加していきますが、後から見て、これなんのコードだっけ？とならなくていいようにコメントを書くようにしています。
今回の場合だと /* パンくずリストの文字色変更 */ などです。
（/*）と（*/） で囲んだ部分に好きに書けます。
以上、ワードプレス「JIN」のパンくずリストの色を変更する方法でした。
カスタマイズ楽しーーー^^
ずっとカスタマイズだけやってたい。（ダメです）
