こんにちは、連日cssを弄っては試し弄っては試ししているえむしです。
今日は公式パンくずリストの見た目をカスタマイズしてみます。
はてな公式のパンくずリストは8月に機能が追加されたばかりなので、あっさりし過ぎた見た目になっている方も多いと思います。
パンくずリストとは
パンくずリストとは、ユーザーが今WEBサイト内のどの位置にいるのかを視覚的に分かりやすくするため、上位の階層となるWEBページを階層順にリストアップしてリンクを設置したリストのことを指します。 通常はコンテンツの最上部に記載されます。
パンくずリストとは | SEO用語集：意味/解説/SEO効果など [SEO HACKS] より。
公式パンくずリストの設置の仕方
以前書いたエントリーです。よろしければ読んでみてください。
公式パンくずの見た目
テーマInnocentでの見た目になります。
シンプルですが寂しい感じがするので、こちらをカスタマイズしていこうと思います。
コピペする場所
まずはコピペ場所を開きます。
場所は「デザイン」→「カスタマイズ」→「デザインCSS」です。
ここをクリックして
以下に紹介するコードを一番下なんかにペーストして下さい。
カテゴリーを四角く囲う
完成図です
2016年9月27日現在、当サイトで採用しているスタイルです。
コード
/* パンくずリスト枠付き */ .breadcrumb-link { color: #5d5d5d; /* 文字色 */ font-size: .6em; /* 文字の大きさ */ background-color: #fff; /* 背景色 */ border: 1px solid #5d5d5d; /* 枠の色 */ border-radius: 2px; /* 枠の丸み */ text-decoration: none; padding-top: .9em; /* 枠の余白上 */ padding-bottom: .9em; /* 枠の余白下 */ padding-right: 1em; /* 枠の余白右 */ padding-left: 1em; /* 枠の余白左 */ display: inline-block; } .breadcrumb-child-link { color: #5d5d5d; /* 文字色 */ font-size: .6em; /* 文字の大きさ */ background-color: #fff; /* 背景色 */ border: 1px solid #5d5d5d; /* 枠の色 */ border-radius: 2px; /* 枠の丸み */ text-decoration: none; padding-top: .9em; /* 枠の余白上 */ padding-bottom: .9em; /* 枠の余白下 */ padding-right: 1em; /* 枠の余白左 */ padding-left: 1em; /* 枠の余白右 */ display: inline-block; }
上下に灰色の線が付いたタイプ
完成図です
こちらは短め。文字の大きさを少し小さくしていますので標準サイズが良い方は「.85em」のところを「1em」と置き換えてください。
コード
/* パンくずリスト横線 */ .breadcrumb { color: #5d5d5d; /* 文字色 */ background-color: #fff; /* 背景色 */ font-size: .85em; /* 文字の大きさ */ border-top: 1px solid #e6e6e6; /* 上の直線の太さ・種類・色 */ border-bottom: 1px solid #e6e6e6; /* 下の直線の太さ・種類・色 */ }
ホバーした時に白抜きにする
完成図です
/* パンくずリスト横線と白抜き文字 */ .breadcrumb { color: #5d5d5d; /* 文字色 */ background-color: #fff; /* 背景色 */ font-size: .85em; /* 文字の大きさ */ border-top: 1px solid #e6e6e6; /* 上の直線の太さ・種類・色 */ border-bottom: 1px solid #e6e6e6; /* 下の直線の太さ・種類・色 */ } .breadcrumb a:hover{ font-weight: bold; color: #fff; /* 文字色 */ text-shadow: 0 1px 0 #5d5d5d, /* 周囲に出てくる色を変更する場合はここから下までの色をまとめて変更して下さい*/ 1px 0 0 #5d5d5d, 0 -1px 0 #5d5d5d, -1px 0 0 #5d5d5d, -1px -1px 0 #5d5d5d, 1px -1px 0 #5d5d5d, -1px 1px 0 #5d5d5d, 1px 1px 0 #5d5d5d; }
上下に灰色の線を付けて、枠も付けたタイプ
完成図です
紹介したやつ全部乗せな感じです
コード
/* パンくずリスト横線と枠付き */ .breadcrumb { color: #5d5d5d; /* 文字色 */ background-color: #fff; /* 背景色 */ font-size: .85em; /* 文字の大きさ */ border-top: 1px solid #e6e6e6; /* 上の直線の太さ・種類・色 */ border-bottom: 1px solid #e6e6e6; /* 下の直線の太さ・種類・色 */ padding: 1em 1em; } .breadcrumb a:hover{ font-weight: bold; color: #fff; /* 文字色 */ text-shadow: 0 1px 0 #5d5d5d, /* 周囲に出てくる色を変更する場合はここから下までの色をまとめて変更して下さい*/ 1px 0 0 #5d5d5d, 0 -1px 0 #5d5d5d, -1px 0 0 #5d5d5d, -1px -1px 0 #5d5d5d, 1px -1px 0 #5d5d5d, -1px 1px 0 #5d5d5d, 1px 1px 0 #5d5d5d; } .breadcrumb-link { color: #5d5d5d; /* 文字色 */ font-size: .6em; /* 文字の大きさ */ background-color: #fff; /* 背景色 */ border: 1px solid #5d5d5d; /* 枠の色 */ border-radius: 2px; /* 枠の丸み */ text-decoration: none; padding-top: .9em; /* 枠の余白上 */ padding-bottom: .9em; /* 枠の余白下 */ padding-right: 1em; /* 枠の余白右 */ padding-left: 1em; /* 枠の余白左 */ display: inline-block; } .breadcrumb-child-link { color: #5d5d5d; /* 文字色 */ font-size: .6em; /* 文字の大きさ */ background-color: #fff; /* 背景色 */ border: 1px solid #5d5d5d; /* 枠の色 */ border-radius: 2px; /* 枠の丸み */ text-decoration: none; padding-top: .9em; /* 枠の余白上 */ padding-bottom: .9em; /* 枠の余白下 */ padding-right: 1em; /* 枠の余白左 */ padding-left: 1em; /* 枠の余白右 */ display: inline-block; }
本当は文字の色を白く抜くんじゃなくて、囲った四角の中の色を反転させたかったんですけど、どうしても「トップ」の部分が上手くいかず、こう言う形に…。
うちは、カーソルが上に来た時の挙動を変えるのを諦めて標準のままにしました。
色の見本はこちらを参考にするのがオススメです。
www.colordic.org webdesignrecipes.com
ではでは、また次の記事で
CSSに詳しいブロガーさんがよく紹介されているオススメ解説本。
