【はてなブログ】パンくずリストのカスタマイズ

はてなブログで公式にパンくずリストが実装されました。今回はその公式パンくずリストのカスタマイズです。


パンくずリストとは、↑こんなかんじの「いま自分がそのウェブサイトの中のどこにいるのか」を可視化してくれるやつです。（語源はグリム童話ヘンゼルとグレーテルで道に迷わないようにパンくずを道においていったこと、らしいです。）


パンくずリストを表示する方法は公式で説明しているので参照してください。チェックをいれるだけです。
staff.hatenablog.com

色を変える

.breadcrumb{color:red/*好きな色*/;}
.breadcrumb a{color:green/*好きな色*/;}
.breadcrumb a:hover{color:orange/*好きな色*/;}

上のコードだとこうなります。好きな色にしてください。カーソルオンで色の変化が必要なければ.breadcrumb a:hover{color:orange/*好きな色*/;}を削除してください。

サイズを変える

.breadcrumb{font-size:200%;}/*100%で元のサイズ*/

カテゴリ名の前に文字やアイコンを挿入する

アイコンの挿入方法はこちらを参考にどうぞ。

.breadcrumb-child::before
{content:"\f04a";font-family:blogicon;color:好きな色;}

区切りの「>」をほかの文字に置き換える

.breadcrumb a::after
 {content:"-";color:好きな色;}
.breadcrumb-gt{display:none;}

最後の項目（今のページ名）を消す

こちらの記事をごらんください
www.simonsnote.com

階層化する

はてな公式パンくずリストはデフォルトでは「トップ > カテゴリ１ > 現在のページ名」という形で、複数カテゴリが反映されません。
たとえば「トップ > カテゴリ１ > カテゴリ１a > 現在のページ名」のように階層化したい場合、下の記事で方法を解説してくれてます。参考にどうぞ。
blog.wackwack.net