記事本文
アーカイブテンプレートにパンくずリストを配置する
これは weblog に限ったことではありませんが、現在表示されているページが、そのサイトのどの位置にあたるものなのかよく分からなくなるということがあります。 それを防ぐために、サイトのトップページから現在表示されているページへの経路のリンクを並べるという手法があります。 これは一般的にパンくずリストと呼ばれ、大抵はページ上部などの見易い位置に配置されます。 実は HTML / XHTML には link 要素というものが用意されていて、これを適切に記述すればこのようなパンくずリストは不要……というか蛇足となるのですが、現状では大部分のブラウザが対応しているわけではないというところです。
今回はそのパンくずリストについての論議はともかく、どういった形式のリストを作るか、それをどうテンプレートに組み込むかを解説しようと思います。 また、この部分のマークアップをどうするかも意見が分かれるところですが、今回はひとつのパラグラフとみなして p 要素でマークアップする例と、経路を順に辿る、すなわち序列リストであるとみなして ol 要素でマークアップする例を紹介します。
パンくずリストの形
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 に合わせたパンくずリストを作ってみてください。
Web Standards with MT ver.3.2 Strict には
Web Standards with MT ver.3.2 Strict で配布しているテンプレートには、それぞれのアーカイブテンプレートに、日付アーカイブのパンくずリスト - ol 要素版、カテゴリアーカイブのパンくずリスト - ol 要素版、エントリアーカイブのパンくずリスト (1) - ol 要素版を記述しています。
なお、 ver.1.00 では CSS による区切り文字表示の指定が不充分な点があるため、お手数ですが index_templates\styles-site.txt の 323-330 行 をパンくずリストの形で紹介した記述と置き換えるか、または ver.1.01 を改めてダウンロードしていただくようお願いします。
