記事本文
パンくずリストの形
weblog の URI ( MTBlogURL ) を起点とし、そのアーカイブに辿り着くまでのリンク経路を示す形で作ります。
なお、リストにおいてそのアーカイブ自身 ( すなわち現在表示しているページ ) にはリンクを張らないこととします。
また、それぞれのリンクの区切りは p 要素版では > を用い、 ol 要素版ではそれぞれ li 要素で区切られていると考えることができるため、特に区切り文字は用いません。
ol 要素版でも区切り文字を表示したい場合は、次のように CSS に記述すると良いでしょう。
/* リストを横並びにする */
ol#hierarchical-menu li{
display: inline;
}
/* 各リストの前に > を表示する */
ol#hierarchical-menu li:before{
content: "\000020\00003e\000020";
}
/* リストの先頭の前には > を表示しない */
ol#hierarchical-menu li:first-child:before{
content: "";
}
p 要素版でも CSS による区切り文字表示を行ってもよいのですが、 ol 要素版と違って CSS オフの状態で区切りが明確にならないため、直接 > を記述するという考え方です。
日付アーカイブのパンくずリスト - p 要素版
Movable Type 3.2 では、設定で自発的にアーカイブをサイト・パスとは別のパスで公開する設定にしない限りは、アーカイブはサイト・パス直下に配置されます。
デフォルトでは日付アーカイブは月別アーカイブとして作られ、
yyyy/mm/index.html
として作成されますが、 yyyy/index.html は存在しないため、月別アーカイブが実質のサイト・パス直下のアーカイブと考えて良いでしょう。
「ホーム > 月別アーカイブ」という形になります。
<p id="hierarchical-menu">
<a href="<$MTBlogURL$>" title="ホーム"><$MTBlogName encode_html="1" remove_html="1"$></a> >
<$MTArchiveTitle$>
</p>
日付アーカイブのパンくずリスト - ol 要素版
前項の日付アーカイブのパンくずリストと考え方は同じです。
<ol id="hierarchical-menu">
<li><a href="<$MTBlogURL$>" title="ホーム"><$MTBlogName encode_html="1" remove_html="1"$></a></li>
<li><$MTArchiveTitle$></li>
</ol>
カテゴリアーカイブのパンくずリスト - p 要素版
カテゴリアーカイブは日付アーカイブと違い、少々複雑になります。
サブカテゴリの階層によってリストの階層も変わりますし、テンプレートタグの組み合わせが難しくなっています。
「ホーム > カテゴリアーカイブ」という形になりますが、そのカテゴリがトップレベルカテゴリかはたまた何かのカテゴリのサブカテゴリであるかによって、一つだけ記述したり、再帰的に記述したりします。
<p id="hierarchical-menu">
<a href="<$MTBlogURL$>" title="ホーム"><$MTBlogName encode_html="1" remove_html="1"$></a><MTHasParentCategory> ></MTHasParentCategory>
<MTParentCategories glue=" > " exclude_current="1">
<MTIfNonZero tag="MTCategoryCount">
<a href="<$MTCategoryArchiveLink$>"<MTIfNonEmpty tag="MTCategoryDescription"> title="<$MTCategoryDescription$>"</MTIfNonEmpty>><MTCategoryLabel></a>
<MTElse>
<MTCategoryLabel>
</MTElse>
</MTIfNonZero>
</MTParentCategories>
> <$MTArchiveTitle$>
</p>
カテゴリ部分において
<MTIfNonZero tag="MTCategoryCount">
と指定することで、記事数が 0 のカテゴリ ( = アーカイブが作成されないカテゴリ ) はリンクではない文字列として表示します。
また、
<MTIfNonEmpty tag="MTCategoryDescription">
と指定することで、「カテゴリーの説明」欄が書かれていればリンクアンカーの title 属性にそれを記述するようにしています。
また、
<MTParentCategories glue=" > " exclude_current="1">
と指定すると区切りが発生しない場合 ( = トップレベルカテゴリ ) でも 1 つは glue 属性の区切り文字が現れてしまうため、
>
が一つ余分に記述されてしまいます。
それを回避するために、ぬりかべブログ::カテゴリアーカイブのパンくずリストを参考にして、
<MTHasParentCategory> ></MTHasParentCategory>
とし、親カテゴリがあれば ( = トップレベルカテゴリでなければ )
>
を記述するようにしています。
カテゴリアーカイブのパンくずリスト - ol 要素版
前項のカテゴリアーカイブのパンくずリストと考え方は同じです。
<ol id="hierarchical-menu">
<li><a href="<$MTBlogURL$>" title="ホーム"><$MTBlogName encode_html="1" remove_html="1"$></a></li>
<MTParentCategories glue="" exclude_current="1">
<MTIfNonZero tag="MTCategoryCount">
<li><a href="<$MTCategoryArchiveLink$>"<MTIfNonEmpty tag="MTCategoryDescription"> title="<$MTCategoryDescription$>"</MTIfNonEmpty>><MTCategoryLabel></a></li>
<MTElse>
<li><MTCategoryLabel></li>
</MTElse>
</MTIfNonZero>
</MTParentCategories>
<li><$MTArchiveTitle$></li>
</ol>
こちらは直接区切り文字を記述しないため、
<MTHasParentCategory> ></MTHasParentCategory>
の指定はありません。
エントリアーカイブのパンくずリスト (1) - p 要素版
エントリアーカイブの標準の出力フォーマットは
yyyy/mm/entry_basename.html
ですので、パンくずリストは「ホーム > 月別アーカイブ > エントリアーカイブ」という形になります。
<p id="hierarchical-menu">
<a href="<$MTBlogURL$>" title="ホーム"><$MTBlogName encode_html="1" remove_html="1"$></a> >
<a href="<$MTBlogArchiveURL$><$MTArchiveDate format="%Y/%m/"$>"><$MTArchiveDate format="%Y年%m月"$></a> >
<$MTEntryTitle$>
</p>
エントリアーカイブのパンくずリスト (1) - ol 要素版
前項のエントリアーカイブのパンくずリスト (1) と考え方は同じです。
<ol id="hierarchical-menu">
<li><a href="<$MTBlogURL$>" title="ホーム"><$MTBlogName encode_html="1" remove_html="1"$></a></li>
<li><a href="<$MTBlogArchiveURL$><$MTArchiveDate format="%Y/%m/"$>"><$MTArchiveDate format="%Y年%m月"$></a></li>
<li><$MTEntryTitle$></li>
</ol>
エントリアーカイブのパンくずリスト (2) - p 要素版
エントリアーカイブの出力フォーマットは、標準の
yyyy/mm/entry_basename.html
以外にも選択肢が多くあります。
ここではもう一つ、
category/sub_category/entry_basename.html
の形式を考えてみます。
パンくずリストは「ホーム > カテゴリアーカイブ > エントリアーカイブ」という形になります。
<p id="hierarchical-menu">
<a href="<$MTBlogURL$>" title="ホーム"><$MTBlogName encode_html="1" remove_html="1"$></a><MTHasParentCategory> ></MTHasParentCategory>
<MTParentCategories glue=" > ">
<MTIfNonZero tag="MTCategoryCount">
<a href="<$MTCategoryArchiveLink$>"<MTIfNonEmpty tag="MTCategoryDescription"> title="<$MTCategoryDescription$>"</MTIfNonEmpty>><MTCategoryLabel></a>
<MTElse>
<MTCategoryLabel>
</MTElse>
</MTIfNonZero>
</MTParentCategories>
> <$MTEntryTitle$>
</p>
カテゴリアーカイブのパンくずリスト - p 要素版の最後にエントリアーカイブを付ける感じですね。
リンクを行わない文字列はエントリアーカイブになるため、
exclude_current="1"
の指定は外しています。
エントリアーカイブのパンくずリスト (2) - ol 要素版
前項のエントリアーカイブのパンくずリスト (2) と考え方は同じです。
<ol id="hierarchical-menu">
<li><a href="<$MTBlogURL$>" title="ホーム"><$MTBlogName encode_html="1" remove_html="1"$></a></li>
<MTParentCategories glue="">
<MTIfNonZero tag="MTCategoryCount">
<li><a href="<$MTCategoryArchiveLink$>"<MTIfNonEmpty tag="MTCategoryDescription"> title="<$MTCategoryDescription$>"</MTIfNonEmpty>><MTCategoryLabel></a></li>
<MTElse>
<li><MTCategoryLabel></li>
</MTElse>
</MTIfNonZero>
</MTParentCategories>
<li><$MTEntryTitle$></li>
</ol>
こちらも同様にカテゴリアーカイブのパンくずリスト - ol 要素版の最後にエントリアーカイブを付ける感じですね。
リンクを行わない文字列はエントリアーカイブになるため、
exclude_current="1"
の指定は外しています。
他にも色々
アーカイブの出力フォーマットは、用意されたものから選ぶだけでなく、自分でカスタマイズすることも可能です。
今回出した数々のソースはあくまで一例ですので、これらを参考に、ご自身の weblog に合わせたパンくずリストを作ってみてください。
リプライ
7 件のリプライが送られています。
この記事に対するご意見やご質問、ご感想などありましたら個別記事ページの送信フォームからお送り下さい。
- 2006-02-01T13:51+09:00 - パンくずリストをつくる < うらかわのbloq
-
MovableType初心者なので、とりあえずパクってくるところから始まるわけだｗ...
- 2006-02-05T01:59+09:00 - パンくずリストをつくる < うらかわのbloq
-
MovableType初心者なので、とりあえずパクってくるところから始まるわけだｗ...
- 2006-05-31T18:45+09:00 - パンくずリストを構造化 < asamuzaK.jp
-
パンくずリストを構造化して出力する自己流テンプレート
- 2006-05-31T19:05+09:00 - パンくずリストを構造化 < asamuzaK.jp
-
パンくずリストを構造化して出力する自己流テンプレート
- 2006-06-01T10:40+09:00 - kazz
-
記事に加筆したときにうっかり2発目のトラバを送ってしまいました、すみません。
いつも大変参考にさせていただいています。
- 2006-06-07T00:13+09:00 - 真琴
-
2 個目のトラックバックは消去しました ( 対処だけ先にやって、レスが遅くなってすみません ) 。
単なる序列リストでパンくずリストを作るか、それとも kazz さんのように構造化してパンくずリストを作るか、どちらがより良いマークアップかまた後日考えてみたいと思います。もちろん、リストではなくパラグラフでマークアップするという選択肢もありますが。
- 2007-03-29T22:12+09:00 - パンくずリスト（MovableType 用） < WebRoom
-
『パンくずリスト』とは、今見ているページの階層を表示するナビゲーションです。 例えば【 Index...
同じ県内ということもあって、ちょくちょくお会いする草原さん ( 
