はてなブログ：パンくずリストをカスタマイズ

そろそろこのサイトのデザインを変えようかと思い始めての tips チップス。

• パンくずリストのカスタマイズ
• はてなブログパンくずリストHTML構造
• パンくずリストの最後の項目を変更する
  • パンくずリストの最後の項目を削除する
  • パンくずリストの最後の項目を変更する
• パンくずリストを矢羽根にカスタマイズ

パンくずリストのカスタマイズ

こんなイメージです。

パンくずリストの最後の項目、つまり表示されているページのタイトルを他の言葉に、たとえば here（You are here）に変え、リストそのものを CSS でカスタマイズします。

はてなブログパンくずリストHTML構造

<div id="top-box">
    <div class="breadcrumb" data-test-id="breadcrumb">
        <div class="breadcrumb-inner">
            <a class="breadcrumb-link" href="https://test0.hateblo.jp/">
                <span>トップ</span>
            </a>
            <span class="breadcrumb-gt">&gt;</span>
            <span class="breadcrumb-child">
                <a class="breadcrumb-child-link" href="カテゴリーurl">
                    <span>カテゴリー</span>
                </a>
            </span>
            <span class="breadcrumb-gt">&gt;</span>
            <span class="breadcrumb-child">
                <span>記事タイトル</span>
            </span>
        </div>
    </div>
</div>

リストではありませんので結構面倒な構造です。

パンくずリストの最後の項目を変更する

パンくずリストの最後の項目は表示されているページのタイトルですからいらないですよね。

削除するか、他の言葉に変えましょう。

パンくずリストの最後の項目を削除する

.breadcrumb-child:last-child {
    display: none;
}


/* 不等号の > を消す場合
 他にもいろいろ指定方法はあると思う */
.breadcrumb-child + .breadcrumb-gt {
    display: none;
}

これで消えます。

パンくずリストの最後の項目を変更する

.breadcrumb-child:last-child::after{
    content: "here";
}
.breadcrumb-child:last-child span {
    display: none;
}

パンくずリストを矢羽根にカスタマイズ

.breadcrumb {
    font-size: 14px;
}
.breadcrumb-gt {
    display: none;
}
.breadcrumb-inner {
    display: -webkit-box;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    flex-direction: row;
}
.breadcrumb-link,
.breadcrumb-child-link {
    display: block;
    height: 20px;
    background-color: #a1b6cf;
    color: #fff;
    padding-right: 10px;
    padding-left: 15px;
    position: relative;
    margin-right: 2px;
}
.breadcrumb-link::after,
.breadcrumb-child-link::after {
    content: "";
    border-top: 10px solid transparent;
    border-bottom: 10px solid transparent;
    border-left: 10px solid #a1b6cf;
    position: absolute;
    right: -10px;
    top: 0;
    z-index: 1;
}
.breadcrumb-link:hover,
.breadcrumb-child-link:hover {
    background-color: #5e81ac;
    color: #ffffff;
}
.breadcrumb-link:hover::after,
.breadcrumb-child-link:hover::after {
    border-left: 10px solid #5e81ac;
}
.breadcrumb-child-link::before {
    content: "";
    border-top: 10px solid transparent;
    border-bottom: 10px solid transparent;
    border-left: 10px solid #fff;
    position: absolute;
    left: 0;
    top: 0;
}
.breadcrumb-child:last-child {
    height: 20px;
    padding-right: 5px;
    padding-left: 15px;
}
.breadcrumb-child:last-child::after {
    content: "here";
}
.breadcrumb-child:last-child span {
    display: none;
}

フォントサイズに合わせて padding や矢羽根の border の数値は変更指定ください。