はてなブログのパンくずリストをカスタマイズしてみた。

f:id:Kawan0116:20210504145404p:plain

はてなブログでは、パンくずリストを設置することが出来ます。

まずは、パンくずリストを表示させるようにしました。

そして、CSSをこんな感じで書きました。

#top-box {
background: #fff;
margin: 0 8px;
border-radius: 10px;
}

.breadcrumb {
 padding:4px 8px;
 font-size: 0.7rem;
}

.breadcrumb-link,
.breadcrumb-child-link {
text-decoration: none;
}

.breadcrumb-link:hover,
.breadcrumb-child-link:hover {
color: #ccc;
}

.page-entry .breadcrumb {
  margin-bottom: 0;
}

それにしても、たかがパンくずリストCSSを書くだけなのに長文になりましたねぇ(笑)。

ちなみに、僕の場合、あらかじめ選ぶことが出来るデザインテーマは使っておりません。

パンくずリストのカスタマイズに1時間以上かかりましたね・・・。

ほんと、たかがパンくずリストだけなのに。

ちょっとしたことをするだけで時間はかかりますし、ローカルで大丈夫でも本番環境に上げるとデザインが崩れる場合があります。

そのときは、F12キーを押してコード解析してちゃちゃっと治しますね。

まぁ、大規模の場合は、一旦、バックアップしておいたCSSに戻し、ローカルで作業してアップしなおしますね。

今のところはそんな感じです。

あ、上のCSSを書くとスマホでは問題ないのですが、PCで表示させた時、パンくずリストとコンテンツがくっつきます。

そこで、メディアクエリで対応しました。

@media (min-width: 768px)  {
#top-box {
margin-bottom: 1em;
}
}

画面サイズが768px以上の場合、CSSを効かせるという感じですね。

これでパンくずリストが完成しました。

一苦労しましたが、満足しました。

いや、もう少し見せ方があるかもですので、考えたいと思います。