とうつきの備忘録

地味OLの備忘録。ゆるミニマリストな暮らしと、ものづくりと節約。

パンくずリストの色を修正しました

 このページには広告が含まれます

何故かカテゴリー名のリンクだけ青色だったので、他と合うように修正しました。

f:id:toutsuki:20200325235114j:plain

 

  

パンくずリストとは

「パンくずリスト」と言われて、何のことだかぱっとわかる人ってどれだけいるのでしょうか。私はブログ開設より1年ほどは「パンくずリスト?何それおいしいの?」状態でした。だってまさしく香ばしくておいしそうですし…。

そんなパンくずリストですが、今では私も設定しています。どれかというと、「トップ>カテゴリ名>記事名」となっているこの部分。

f:id:toutsuki:20200325235107j:plain

これをパンくずリストと言うのだそうです。他サイトから説明を引用すると

パンくずリストとは、Webサイトを訪れたユーザが今どこにいるかを視覚的にわかりやすくした誘導表示のことを言います。

基本的にWebページの階層順にリンクがリストアップされており、Webページの上部箇所に表示されているケースが多いです。

【Webサイトの基本】パンくずリストについて知ろう : ビジネスとIT活用に役立つ情報

だそうな。名前の由来としては、

パンくずリストという語源は、童話「ヘンゼルとグレーテル」の話の中に主人公の兄弟が森に入るときに、迷子にならないように自分たちが通ってきた道にパンくずを置いていったエピソードが由来となっています。

Webサイトでも同じように、ユーザ自身の現在位置と辿ってきたルートを示す役割を担っていることから「パンくずリスト」と呼ばれるようになりました。

【Webサイトの基本】パンくずリストについて知ろう : ビジネスとIT活用に役立つ情報

 という説が書かれていました。

はてなブログだと、ダッシュボード>デザイン>記事の「記事ページにパンくずリストを表示する」にチェックを入れるだけで設定できますヽ(・∀・)ノ

 

パンくずリストのリンクだけ青色

さて、設定は簡単なパンくずリストですが、私はこのデザインに悩まされていました。リンクが何故か青色になってしまうんです…!

f:id:toutsuki:20200325235114j:plain
なんだか締まらない。格好悪い。

 

2020年3月現在、当サイトは「Naked」というテーマを使用させて頂いており、カラーリングは基本そのままです。変更したのは

  • 背景色をはてなブログ標準装備の薄緑色?浅黄色?へ
  • トルグメニュー(ブログタイトル下のカテゴリー選択欄)を灰色へ

の2ヶ所くらいでしょうか。しかし何故かパンくずリストの色だけおかしくなってしまいます。

かなり気になっていて直したいとは思うものの、HTMLやらCCSには明るくないため大変そうだと放置…。でもようやっと、重い腰を上げて調べてみました。

 

色を変更! 

「パンくずリスト はてなブログ」で検索すると、説明して下さっているサイトがたくさんありました…!ありがたい!!

www.simonsnote.com

今回一番参考にさせて頂いたのが上記サイトです。ありがとうございました!

コピペOKなCCSコードを公開して下さっているので、「色を変える」の欄からコピーし、色は灰色(#808080)へ変更。

ついでに「トップ>カテゴリ名>記事名」の「記事名」を消すコードも紹介されていたので「最後の項目(今のページ名)を消す」もコピー。

そのコードを、はてなブログのデザイン>カスタマイズ>デザインCCSに貼り付けすると…

f:id:toutsuki:20200325235110j:plain

おお、色も灰色になり、記事名が消えてすっきりしました!

 

おわりに

そんなわけで、当ブログのパンくずリストの色を修正した話でした。

ネットには様々な情報を公開して下さっているサイト様があり、予想の何十分の一の手間で修正できました。まさに案ずるより産むが安し。

かなり気になっていたので、1月に作成した「2020年やりたいこと100リスト」にも、この修正は挙げていました。

 53.パンくずリストの色を直す

2020年やりたいこと100リスト - とうつきの備忘録

無事達成できました!わーい。

これからもっと見やすいブログにしていきたいと思っていますので、これからもどうぞよろしくお願いいたします。