ブログカスタマイズ

WordPress JIN パンくずリスト文字と矢印の色変更方法

WordPress JIN パンくずリスト文字と矢印の色変更方法のアイキャッチ

このブログは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に戻します

 

パンくずリスト色変更まとめ

見出し下

 

変更後のパンくずリストは↓このようになりました。

パンくずリストの変更後の画像

 

追加したCSS

/* パンくずリストの文字色変更 */

#breadcrumb ul li a {

    color: #2476e2 !important;

}

/* パンくずリストの矢印の色*/

#breadcrumb ul li, .page-top-footer a.totop {

    color: #262626 !important;

}

ワードプレスのカスタマイズで追加CSSにいろいろなコードを追加していきますが、後から見て、これなんのコードだっけ?とならなくていいようにコメントを書くようにしています。

 

参考画像

 

今回の場合だと /* パンくずリストの文字色変更 */ などです。

(/*)と(*/) で囲んだ部分に好きに書けます。

今回はパンくずリストの色の変更方法を調べました。

最後まで読んでいただきありがとうございます^^