Random Life Blog

日々のあれこれ

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

スポンサーリンク

 

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

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

みなさん、こんばんは。

先日、このブログにパンくずリストを設置しました。

はてなブログなら簡単に設定できる機能となっています。

しかし、設置したはいいのですが、どうも目立たない。

ある程度目につきやすい感じにはならないものかと。

どうやらはてなブログでは、パンくずリストもカスタマイズできるようなので、やってみたいと思います。

今日ははてなブログパンくずリストをカスタマイズする方法をみていきたいと思います。

パンくずリストとは?

randamlife.hatenablog.com

パンくずリストとは?については、以前書いた上記の記事にあります。

簡単に言うと、ブログのどの位置にいるのかを知らせるリンクと言ったところでしょうか。

はてなブログでのパンくずリストの設置方法も書いていますので参考にしてみてください。

 

パンくずリストのカスタマイズ

参考にしたブログ

yassan007a.hatenablog.com

こちらのサイトを参考にさせていただきました。

 

貼り付けたコード

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コードを組み合わせてみました。

さらに文字サイズ(font-weight)は太字にし、背景を黒、フォントカラーを白にしてみました。

 

貼り付け方法

f:id:samada:20191018185500p:plain
設定画面の左メニューの【デザイン】

 

 

f:id:samada:20191018185521p:plain

画面が切り替わったら、スパナマークの【カスタマイズ】をクリック

 

 

f:id:samada:20191018185547p:plain

下にメニューがあらわれますので、一番下の【デザインCSS】をクリック

 

 

f:id:samada:20191018185607p:plain

デザインCSSの記入欄にCSSコードを貼り付けます。

貼り付けたら上の【変更を保存する】をクリックすれば終了です。

 

カスタマイズ前、カスタマイズ後

カスタマイズ前

f:id:samada:20191018185706p:plain

 

カスタマイズ後

f:id:samada:20191018185720p:plain

 

黒背景の帯にしたことでかなり目立つデザインになりました。

さらに上にあるグローバルメニュー(カテゴリーリンク)との区別もはっきりしてなかなか良いのではないかと思います。

 

終わりに

パンくずリストのカスタマイズをしてみました。

思いの外目立ちすぎな感もありますが、まぁ、黒いラインがアクセントになって良い感じだなと個人的には思います。

ただ、スマホ表示だとちょっと邪魔かなとも思いました。

スマホ表示だと幅が狭くてどうしても2行、3行で表示されてしまいます。

まぁ、そこは仕方ないと諦めるしかないですが・・・。

パンくずリスト、気になった方は是非参考にしてみてください。

 

randamlife.hatenablog.com