Teaprog.com

とあるエンジニアの日々の記録。

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

 

f:id:tk0137:20210623001754j:plain

パンくずリストのイメージ画像

> 目次

> はじめに

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

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

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

 パンクズリストとは?

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

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

f:id:tk0137:20210622221907p:plain

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

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

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

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

 参考元サイト

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

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

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

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

> 実際に行った手順

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

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

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

f:id:tk0137:20210622222146j:plain

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

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

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

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

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

f:id:tk0137:20210622222157p:plain

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

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

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

上で紹介させていただいた参考サイトで示されていた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;
}

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

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

f:id:tk0137:20210622223232p:plain

 表示結果

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

f:id:tk0137:20210622222228j:plain

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

これでも素晴らしいのですが、オリジナル性がない事、サイトのカラーとの調和という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; /*角を丸く*/

 表示結果

アレンジしたCSSコードの表示結果になります。

引用元のコードの黒基調のデザインよりは、サイトのカラーと調和が取れているように見受けられます。

f:id:tk0137:20210622222238p:plain

> 最後に

 今回はパンくずリストとは何かを確認し、そのデザインを他の方のサイトを基に変更してみました。

記事を書くことは楽しく書けることもあれば、気分が乗らないこともあります。

にも拘わらず、地道にでも続けていられる理由は少し分かるような気がします。

書きたい記事の内容を調査するときはもちろん、記事を書いているときですら新たな発見がある事が分かっているからです。

文字の配列の仕方、空白一つ入れるか入れないかなど細かいことに気を配っているうちに、デザインに磨きがかかったり、それ自体が記事のネタになったりするのです。

今回も記事を書いている間に新たなネタを思いついたので、忘れないうちに下書きに残しておこうと思います。

以上、最後までありがとうございました。