MTでパンくずリストを表示する方法を紹介しています。静的ページでのカテゴリページにもパンくずリストを表示させるコードも紹介しています。
MTでサイトナビゲーションとしてのパンくずリストを表示させるにもいろいろと方法があるようです。いくつかのパターンを取り上げてみました。紹介する方法は、静的ページ（PHP生成ページではありません）での表示方法となります。
私は、WEBデザイニングという雑誌を毎月購入しており、その中で紹介されているMTカスタマイズテクニックのコラムで取り上げあげられている手法を取り入れました。
パンくずリストとは
- パンくずリスト 【topic path】
- Webサイトの中のそのページの位置を、階層構造の上位ページへのリンクのリストで簡潔に記述したもの。すべてのページの同じ場所にパンくずリストを掲載することにより、サイトの訪問者が現在位置を直感的に理解する役に立つ。
- 大規模なWebサイトは、ページ群全体が大きなカテゴリに分かれ、その下に何階層かの小カテゴリ、個別のページ、という形で階層構造で管理されていることが多い。各ページに、そのページの属するカテゴリのトップページへのリンクを順番に並べたものがパンくずリストである。区切り記号には伝統的に「＞」(大なり記号)が使われ、「トップ ＞ コンピュータ ＞ パソコン ＞ 買い方」のように表現する。 童話「ヘンゼルとグレーテル」で、森の中で迷わないようにパンくずを少しずつ落としながら歩いたという故事が由来である。
（引用：IT用語辞典より/http://e-words.jp/w/E38391E383B3E3818FE3819AE383AAE382B9E38388.html）
MTでパンくずリスト表示<ul><li></li></ul>タグを使って
私の採用しているパンくずリストのタグは、<ul><li></li></ul>タグを使ってHTML構造的にも階層的に表示されるようにしています。CSSを無効にした場合、こちら方が解りやいかと思い階層表示しています。（※但し、サブカテゴリーが存在する場合は、メインカテゴリとサブカテゴリが同じ階層扱いに表示されます。方法はありますが、コードが長くなるため以下のコードにて表示するようにしています。）
また矢印（arrow)イメージ画像を使って階層を表現しています。
この手法は、blog -under construction-: Web_Designing アーカイブ2005年07月28日に表示されている方法です。そちらから受け渡しになりますが、情報としてコードを残しておきます。
個別エントリーページでのパンくずリストコード
上記の場合は、矢印（arrow)イメージ画像が必要になってきます。また、最後の階層表示されるエントリーにもリンクが生成されるようになっていますので、下記の部分のリンクを抜いておけばいいと思います。
<li> <a href="<$MTEntryPermalink$> " title="<$MTEntryTitle$> "> <$MTEntryTitle$> </a> </li>
↓↓↓↓↓↓↓上記コード部分を下記に変更↓↓↓↓↓↓↓
<li> <$MTEntryTitle$></li>
矢印（arrow)イメージ画像を使わずに「»（»）」もしくは、「＞（＞）」で表示したい場合は、以下のようなコードになります。
上記のコードに対するCSSの設定は以下の通りです。
アーカイブにもパンくずリストを表示する
アーカイブ一覧ページにもパンくずリストを表示させるためのコードです。こちらも<ul><li></li></ul>タグを使っての階層表示としています。
最後の階層表示されるエントリーにもリンクが生成されるようになっていますので、下記の部分のリンクを抜いておけばいいと思います。
<li> <a href="<$MTEntryPermalink$> " title="<$MTArchiveTitle$> "> <$MTEntryTitle$> </a> </li>
↓↓↓↓↓↓↓上記コード部分を下記に変更↓↓↓↓↓↓↓
<li> <$MTArchiveTitle$></li>
矢印（arrow)イメージ画像を使わずに「»（»）」もしくは、「＞（＞）」で表示したい場合は、以下のようなコードになります。
カテゴリーページにもパンくずリストを表示する
カテゴリーページにパンくずを表示するコードも情報として紹介しておきます。このタグはマニュアルを読んでみて自分なりに勝手に作ったものです。今のところ正常に表示されています。CSS無効の状態でも正しく階層表示されています。
phpでの表示方法がいくつかのサイトにて紹介されています。私のこのブログは、静的ページなので、上記のコードで表示可能となります。
矢印（arrow)イメージ画像を使わずに「»（»）」もしくは、「＞（＞）」で表示したい場合は、以下のようなコードになります。
本来ならエントリーページのパンくずリスト表示も以上のコードを使って表示すると正しく階層表示されるようになります。CSSは、すべて上部のCSSコードで共通して適用されます。
フラットでのパンくずリスト表示
<ul><li></li></ul>タグを使わずに、フラット表示のパンくずリストの方がコードが明快です。情報としてコードを残しておきます。
個別エントリーページでのパンくずリスト
アーカイブページのパンくずリスト表示
カテゴリページのパンくずリスト表示
上記のカテゴリパンくずリストは、私がマニュアルを読んで作ってみたものです。このタグにて実際に表示確認をしていませんが、問題なく表示されると思います。（※私は<ul><li></li></ul>タグを組み合わせて使っています。）
パンくずリストもデザイン的に考えてゆくとまた違った表示の方法があると思います。カテゴリー一覧リストのような本当の階層表示をしてみるといいかもしれないです。
参考にさせていただいたエントリー
大変参考になりました。ありがとうございます。
こんばんは。
トラックバックありがとうございました。
こんにちは、コメントありがとうございます。
今後ともよろしくおねがいいたします。