えむしとえむふじんがあらわれた

オタクな夫婦が書く日常とか思った事なんかのアレコレに思い出話とか。三人の子持ちです。

スポンサーリンク

【カスタマイズ】コピペするだけ!公式パンくずリストをいじってみる

\フォロー!/
\シェア!/

f:id:mshimfujin:20160925214303j:plain

こんにちは、連日cssを弄っては試し弄っては試ししているえむしです。

今日は公式パンくずリストの見た目をカスタマイズしてみます。

はてな公式のパンくずリストは8月に機能が追加されたばかりなので、あっさりし過ぎた見た目になっている方も多いと思います。

パンくずリストとは

パンくずリストとは、ユーザーが今WEBサイト内のどの位置にいるのかを視覚的に分かりやすくするため、上位の階層となるWEBページを階層順にリストアップしてリンクを設置したリストのことを指します。 通常はコンテンツの最上部に記載されます。

パンくずリストとは | SEO用語集:意味/解説/SEO効果など [SEO HACKS] より。

公式パンくずリストの設置の仕方

以前書いたエントリーです。よろしければ読んでみてください。

blog.mshimfujin.net

公式パンくずの見た目

f:id:mshimfujin:20160927114500p:plain

テーマInnocentでの見た目になります。

シンプルですが寂しい感じがするので、こちらをカスタマイズしていこうと思います。

コピペする場所

まずはコピペ場所を開きます。 場所は「デザイン」→「カスタマイズ」→「デザインCSS」です。 ここをクリックして

https://cdn-ak.f.st-hatena.com/images/fotolife/m/mshimfujin/20160925/20160925202616.png


以下に紹介するコードを一番下なんかにペーストして下さい。

カテゴリーを四角く囲う

完成図です

f:id:mshimfujin:20160927120727p:plain 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;
}

上下に灰色の線が付いたタイプ

完成図です

f:id:mshimfujin:20160927123249p:plain こちらは短め。文字の大きさを少し小さくしていますので標準サイズが良い方は「.85em」のところを「1em」と置き換えてください。

コード

/* パンくずリスト横線 */
.breadcrumb {
 color: #5d5d5d; /* 文字色 */
 background-color: #fff; /* 背景色 */
 font-size: .85em; /* 文字の大きさ */
 border-top: 1px solid #e6e6e6; /* 上の直線の太さ・種類・色 */
 border-bottom: 1px solid #e6e6e6; /* 下の直線の太さ・種類・色 */
}

ホバーした時に白抜きにする

完成図です

f:id:mshimfujin:20160927123310p:plain

/* パンくずリスト横線と白抜き文字 */
.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;
}

上下に灰色の線を付けて、枠も付けたタイプ

完成図です

f:id:mshimfujin:20160927163438p:plain 紹介したやつ全部乗せな感じです

コード

/* パンくずリスト横線と枠付き */
.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に詳しいブロガーさんがよく紹介されているオススメ解説本。

スポンサーリンク


2週間無料です!
まずはお試しあれ〜!

ベネッセコーポレーション 進研ゼミ・こどもちゃれんじ

その他