【賢威7】パンくずリストの文字サイズや色を変えるカスタマイズ

賢威7のパンくずリストは、デフォルトだと
かなり大きめに設定されています。

また、マウスオーバーした時の色もなんともイマイチです。

今回はこの、賢威のパンくずリストのカスタマイズをしてみましょう。

賢威のパンくずリスト

まず、こちらの点線で囲った部分が「パンくずリスト」です。

サイトの中で自分が今どこの階層にいるのか、
パンくずリストを見るとすぐ分かるようになっています。

賢威に限らず、最近のほとんどのテンプレートには
標準で付いている機能です。

ただ、賢威7のパンくずリストはかなり大きい！

このパンくずリストの文字サイズと、
マウスオーバーした時の色をカスタマイズしたいと思います。

賢威7-パンくずリストのカスタマイズ

基本ですが、カスタマイズの際は
必ず子テーマを使うようにしてくださいね。

パンくずリストの表示に関する記述は
賢威のスタイルシート base.cssのこの部分になります。

/*--------------------------------------------------------
パンくずリスト
--------------------------------------------------------*/

.breadcrumbs-in{　
 margin:0 0 1.5em;
 color: #555;
}

.no-gn .breadcrumbs-in{
 margin-top: 0;
}

.breadcrumbs-in a{
 color: #555;　
}

.breadcrumbs-in a:hover,
.breadcrumbs-in a:active,
.breadcrumbs-in a:focus{
 color: #5077A2;
}

上から一つづつ、何を定義しているかというと…

１.breadcrumbs-in

はパンくずリスト一番右の文字色と文字サイズ。

２.breadcrumbs-in a

はパンくずリストの中でも
リンク先が設定されているものの文字色と文字サイズ。

上の画像で言えば
Project FREEDOM TOPとビジネスの実践
の箇所ですね。

３.breadcrumbs-in a:hover,
.breadcrumbs-in a:active,
.breadcrumbs-in a:focus{

の3つはマウスオーバーした時のカラーです。

パンくずリストの文字色とサイズを変える

実際に文字色とサイズを変更する場合は
base.cssの子テーマに下記のコードを記述します。

/*パンくずリスト*/
.breadcrumbs-in{
color: #808080;
font-size:0.9em;
}

.breadcrumbs-in a{
color: #808080;
font-size:0.9em;
}

.breadcrumbs-in a:hover,
.breadcrumbs-in a:active,
.breadcrumbs-in a:focus{
color: #ff626f;
}

黄色の行がそれぞれの文字サイズと文字色なので、
自分のお好みに合わせて数値を変更してください。

フォントサイズの0.9emというのは
標準フォントサイズ（10px）に対する倍率で、
0.9mはだいたい9pxです。

文字色が分からない！という方はこちらを参照してください。

ということで、上が賢威7の初期設定、
下がカスタマイズ後のパンくずリストです。

文字サイズを小さくして、文字色を変更しました。

まとめ

パンくずリストは記事タイトルに近く、
来訪者の目に入ってくる場所なので、
見やすいようにカスタマイズしておいてくださいね。