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

そろそろこのサイトのデザインを変えようかと思い始めての 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 の数値は変更指定ください。