ぽけっとしすてむ (id:psne)さんの記事で知ったのですが、はてなブログの公式機能で記事個別ページにパンくずリストを表示させることができるようになったそうです。
2日ほどはてなブログ触ってなかったので気づきませんでした。遅いですね。すみません。
はてなブログ公式機能のパンくずリスト
設定＞デザイン＞カスタマイズ＞記事で「記事ページにパンくずリストを表示する」にチェックを入れると個別記事ページに表示されます。
このテーマ「Minimal Green」でのCSS修正
パンくずリストをオンにした場合、テーマMinimal Greenでは、このように表示されてしまいました（訂正済み）。
パンくずリストが表示される下に余計なmarginが入ってしまいました。
Minimal GreenのCSSではもともとカテゴリーアーカイブページ用にこのように指定してあります。
※CSS修正しました。#top-boxのborderなし、.breadcrumbのpadding上下10pxに変更しました。
/* パンくず（カテゴリーページで表示されます） */
#top-box {
font-size: 90%;
}
.breadcrumb {
width: 1000px;
margin: 0 auto;
padding: 10px 0;
text-align: left;
}カテゴリーアーカイブページでは問題なく上下中央に表示されるのでおかしいなあと個別ページをchromeのデベロッパーツールで検証してみると、どうもはてなブログのデフォルト？のCSSでmarginが指定されているよう。
ですので、このテーマでは以下の記述をCSSに追加し、テーマストアにアップロードしました。（CSS修正済み）
.page-entry .breadcrumb {
margin-bottom: 0;
}これで問題なく表示されていると思います。
CSS修正済みなので、インストールされた方は特に何もしなくて大丈夫です。
他のテーマでも、上記のコードをデザインCSSに追加すれば調整できると思います。
このテーマでは#top-boxにborderを指定してるが故、デザインが想定外になりましたが、多くのテーマでは.breadcrumbに指定しているようですし、（サンプルテーマboilerplate.cssがそう）
多分、パンくずリスト周りをあまりいじっていないテーマが多いと思うので、修正が必要な場面はあまり無いかと思われます。
パンくずリスト上下のボーダー（枠線）を消したい場合
パンくずリストの上下ボーダーが要らない場合は以下のコードをデザインCSSに追加してみてください。（このテーマでは消しています）
#top-box {
border: none;
}そもそもパンくずリストって
パンくずリストとはそのwebページがwebサイト全体内でどの階層、位置にいるか、階層構造の上位ページへのリンクを順に並べてリスト化したものと、私は認識しています。
ユーザビリティ的には「今閲覧しているページがサイト全体のどの位置にいるのか迷わない」ようにするメリットがあります。
またSEO的には、
検索エンジンにサイトの階層構造を伝える事ができる
検索エンジンに階層構造に準じたリンク構造を伝える事ができる
というメリットがあります。
ただはてなブログの場合カテゴリー表示で閲覧者には事足りるので、私は本家ブログでもこのブログでも、公式機能は使わず、ぽけっとしすてむ (id:psne)さんの提供されているパンくずリスト機能を利用しています。
リストを表示せずブログデザインを崩さずに階層構造を検索エンジンに伝えることができます。
今のところ、一番すっきりしている方法じゃないかなあと思っております。
簡単ですので、ぜひ設置してみてください。
関連記事：
