賢威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; }
上から一つづつ、何を定義しているかというと…
1.breadcrumbs-in
はパンくずリスト一番右の文字色と文字サイズ。
2.breadcrumbs-in a
はパンくずリストの中でも
リンク先が設定されているものの文字色と文字サイズ。
上の画像で言えば
Project FREEDOM TOPとビジネスの実践
の箇所ですね。
3.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の初期設定、
下がカスタマイズ後のパンくずリストです。
文字サイズを小さくして、文字色を変更しました。
まとめ
パンくずリストは記事タイトルに近く、
来訪者の目に入ってくる場所なので、
見やすいようにカスタマイズしておいてくださいね。
コメントを残す