パンくずリストのデザイン変更

Contents

はじめに
1. 　パンクズリストとは？
2. 　参考元サイト
実際に行った手順
最後に

はじめに

はてなブログにおいて、パンくずリストを少しデザインを変更しようとふと思いました。

はてなブログのデフォルトのデザインでは少し物足りない感じが否めません。

今回は実際に調べて実践し、その結果を紹介して見たいと思います。

　パンクズリストとは？

サイト内において自身が見ているページの場所を表示したものです。

実際にはてなブログにおけるパンくずリストを下に示します。

上はこのサイトのページの一部です。

この例では「トップ」の下の「macOS」の下の「<macOS>Openfaceのインストール」というページが現在のページであるということを示しています。

このままのデザインはなんだか気づきにくく、クリックしても何も反応しないような文字に見えてしまいます。

なので、ここの周辺のデザインをもう少し凝ったものにしたいと思ったことが発端です。

　参考元サイト

はてなブログのパンくずリストのカスタマイズ方法 – Random Life Blog

今回は上の記事を参考にさせていただきました。

実はそのサイト様も別の人が書かれた記事をご参考にしていたそうで、本当の意味での発信者は違うようです。

ですが、実践あるのみという事でその記事を見ながらパンくずリストのデザインを変更してみました。

実際に行った手順

パンくずリストのデザインの変更にはCSSを使用していきます。

記述する場所は以下のような画像で示した手順になります。

まず、はてなブログの左側の項目から「デザイン」をクリックします。

すると以下のようなデザインの編集画面に移ります。

上部にパレットと六角レンチとスマホのアイコンが並んでいます。

今回は六角レンチの方を選択し、クリックします。

するとそのメニューの中でも一番下に「デザインCSS」という項目が出てきます。

ここにCSSコードを記述するので、これをクリックします。

すると、コードの一部が表示されます。

そのコードをクリックすると、以下の画像のように右側に編集画面が広がります。

この状態でコードを記述する事ができますので、ここにコードを記述します。

上で紹介させていただいた参考サイトで示されていたCSSコードは以下のようになります。

　CSSコード（引用）

span.breadcrumb-child::before {
content: "›";
font-size: 20px;
line-height: 15px;
color: #f8f8f8;
padding-right: 0.5rem;
padding-left: 0.5rem;
}
.breadcrumb-gt {
display: none;
}
.breadcrumb {
color: #fff;
font-weight: bold;
}
div#top-box {
padding: 12px 0;
background-color: #000;
padding-left: 10px;
}

以下の画像は実際にコードを記述した様子です。

記述し終わったら「変更を保存する」をクリックして変更を保存します。

　表示結果

上で紹介したCSSコードを反映させた結果、以下の画像のようなデザインになりました。

全体が黒色で、文字は白色というより目を惹きやすくなるようなデザインに変更する事ができました。

これでも素晴らしいのですが、オリジナル性がない事、サイトのカラーとの調和という2点を考慮し、少し自分なりにデザインを変更してみることにしました。

私がアレンジを加えたCSSコードと表示結果は以下のようになります。

　CSSコード（微アレンジ）

少し自分でアレンジを加えたコードです。

コメントアウトを記述しているところが4箇所ありますが、その行が私が変更を加えているところになります。

span.breadcrumb-child:before {
content: "›";
font-size: 20px;
line-height: 15px;
color: #000000; /*文字の色を変更*/
padding-right: 0.5rem;
padding-left: 0.5rem;
}
.breadcrumb-gt {
display: none;
}
.breadcrumb {
font-weight: bold;
}
div#top-box {
padding: 12px 0;
background-color: #ddeaed;　/*背景色を変更*/
padding-left: 10px;
border: none;　/*デフォルトでnoneなので意味なし*/
border-radius:10px;　/*角を丸く*/