はてなブログカスタマイズの記録②～パンくずリスト～

当ブログは新しいブログに移転しました。
5秒後に新しいブログに切り替わります。

https://www.simplecore.site/

今後とも引き続きよろしくお願いいたします。

simplecore.site

ブログを更新していてふと気づいたことがあります。そういえば、このテーマ（テーマによってはデフォルトで実装されているものもあるのでしょうか？）にはパンくずがありませんでした。

パンくずとは、現在自分が見ているページがどの階層にあるのか、どういった種類の情報にカテゴライズされているのかを表すものです。ユーザーが迷子にならないよう、用意されている案内図のようなものでしょうか。

で、僕がつかっているテーマにはそのパンくずが無かったので、設置することができるのか調べてみました。

まずパンくずリストの設置は簡単だった

設置自体はいたって簡単でした。

まず、管理画面 > デザイン > カスタマイズ > 記事と辿っていき、「記事ページにパンくずリストを表示する」のチェックボックスにチェックを入れるだけです。

で、僕のテーマの場合、このようになりました。

このようにものすごく微妙なパンくずが設置できました。

ただ、正直デカ過ぎます。こんなに主張しなくて良いです、僕的には。なので、ついでにCSSで見た目を自分好みにカスタマイズすることにしました。

CSSでパンくずリストをカスタマイズ

今回も、こちらの記事で説明したchromeの開発者ツールをつかってカスタマイズを効率良く進めていきます。

simplecore.hatenablog.com

まずはどう修正したいのか決める

まずはこの微妙なパンくずをどのように修正していくのか、頭の中でイメージしていきます。

とりあえず、僕が修正しようと思ったのは下記のような感じ。

1. フォントサイズが大きいので小さくする
2. 主張し過ぎなので、もうちょっとさりげない感じに

それではどのように修正していくのか、順番に見ていきます。

パンくず周りのidやclass、当てられているCSSを調べる

調べ方については番外編で説明した通りなので割愛しますが、HTMLの構造を見てみると、

<div id="top-box">
　<div class="breadcrumb">
　　<div class="breadcrumb-inner">
　　　～

となっていて、この辺りがパンくずのHTMLになっているようです。まあ、何といってもclass名が”breadcrumb”ですから。

フォントサイズを小さくしてみる

フォントサイズを指定するCSSは、

fonr-size:○○（数値が入ります）;

です。

で、調べてみると、

と、赤い枠で囲った部分で文字サイズを指定していることがわかりますので、この

#top-box .breadcrumb-inner {
　max-width: 1024px;
　width: 90%;
　height: 100%;
　margin: 0 auto;
　font-size: 14px;
　line-height: 60px;
}

というCSSを、

#top-box .breadcrumb-inner {
　max-width: 1024px;
　width: 90%;
　height: 100%;
　margin: 0 auto;
　font-size: 12px;
　line-height: 60px;
}

にツール上で変更してみます。

文字サイズが変わりました。

パンくずリストの背景色と罫線を消す

次に、目立ちすぎるパンくずリストをページに馴染ませます。そのために、白い背景色をページの背景色と同じ色にし、リストの下部に付いている罫線を消したいと思います。

まず、フォントサイズを変更するときと同じように、開発者ツールをつかうと

#top-box {
　height: 60px;
　border-bottom: 1px solid #ccc;
　background-color: #f8f8f8;
}

というCSSで、目的の背景色とリスト下部の罫線を装飾しているようですので、こちらを

#top-box {
　height: 60px;
　border-bottom: none;
　background: #f5f5f5;
}

とします。するとこうなります。

背景色と罫線が消えて、だいぶ良い感じになりました。もう少しです。

間延びしているパンくずとコンテンツの間を詰める

パンくず周りのCSSをいじったことで、リストの下のスペースが空き過ぎてしまっています。なので、コンテンツ部分を少し上に上げて、スペースを削りたいと思います。

先ほど修正したCSSの中に

#top-box {
　height: 60px;
　border-bottom: none;
　background: #f5f5f5;
}

というCSSがありましたが、これを

 #top-box {
　height: 30px;
　border-bottom: none;
　background: #f5f5f5;
}

とするのですが、このままだとパンくずが半分くらい隠れてしまいます。

ここで再度開発者ツールで調べると、

#top-box .breadcrumb-inner {
　max-width: 1024px;
　width: 90%;
　height: 100%;
　margin: 0 auto;
　font-size: 12px;
　line-height: 60px;
}

という一番初めに調べたCSSの中に、height:60pxと似た、line-height: 60px;ような記述があります。これがどうも怪しいです（もうこの辺は、正直経験則で目ぼしを付けています。身も蓋もない言い方ですいません・・・）。これを

#top-box .breadcrumb-inner {
　max-width: 1024px;
　width: 90%;
　height: 100%;
　margin: 0 auto;
　font-size: 12px;
　line-height: 40px;
}

とすると、

こんな風に最初にイメージした修正案になりました。

今回のカスタマイズのまとめ

今回の修正をまとめて、手を加えないでそのままにしておくCSSの記述を除くと、

#top-box{
border-bottom: none;
background: #f5f5f5;
height: 30px;
}
#top-box .breadcrumb-inner{
font-size: 12px;
line-height: 40px;
}

という風になりますので、これをいつものように、管理画面からデザインCSSに張り付けたら無事に反映されました。

こちらで今回のカスタマイズはひとまず終了です。

カスタマイズをしてみて

先にも書きましたが、自分が手を加えたい部分のCSSがどの辺りに書かれているのか、そしてそれをどのように修正すれば良いのか、と見当をつける作業にはやはりある程度の知識と経験は絶対必要です。

ただ、このはてなブログのHTMLやCSSを見ていると、しっかり意味のあるidやclass名になっているので（当然ですが）、割と目ぼしは付けやすい構造になっているかと思います。

まあ、WEBはバックアップさえとっておけば、いくらでもやり直しが出来るので、気楽に試してみるのが一番です。あまり、考えすぎると今度は手が動かなくなってしまうので。