スマートフォンやhtml5+CSS3など新技術に四苦八苦。jQuery、AjaxなどJavaScriptも難しいですね。そんなWebに悩む人のネタ帳です。

Movable Typeでパンくずをカテゴリ階層で実装する

このブログもだいぶ技術的な記事が多くなり、大きくカテゴリで分けるようなデザインにしたのですが、そうなると「パンくず」がほしくなってきました。もはやブログっぽくないですね。

まず、ブログ記事については以下のようなコードを記述し、リストをレイアウトしてあげれば「パンくず」を表現できます。

<ul>
<li><a href="<$MTBlogURL$>">HOME</a></li>
<MTEntryCategories>
<MTParentCategory>
<li class="arrow"><a href="<$MTCategoryArchiveLink$>"><$MTCategoryLabel$></a></li>
</MTParentCategory>
<li class="arrow"><a href="<$MTCategoryArchiveLink$>"><$MTCategoryLabel$></a></li>
</MTEntryCategories>
<li class="arrow"><$MTEntryTitle$></li>
</ul>

表示は「ホーム > カテゴリ > サブカテゴリ > 記事タイトル」となります。サブカテゴリが存在しない場合、つまりそれ自身が親カテゴリに属している場合はMTParentCategoryが無視されるので「ホーム > カテゴリ > 記事タイトル」となります。


そのカテゴリのリンク先にあたる、カテゴリ別ブログ記事リストについては以下のように書きます。

<ul>
<li><a href="<$MTBlogURL$>">HOME</a></li>
<MTParentCategory>
<li class="arrow"><a href="<$MTCategoryArchiveLink$>"><$MTCategoryLabel$></a></li>
</MTParentCategory>
<li class="arrow"><$mt:ArchiveTitle$></li>
</ul>

表示は「ホーム > カテゴリ > サブカテゴリ」または「ホーム > カテゴリ」となります。

これを利用する前提としては、記事が一つのカテゴリ、もしくは、サブカテゴリに属していることが条件になります。2つ以上に属していると恐らく崩れるでしょう。あと、サブサブカテゴリを設定しても崩れるかも。。。
実際に、上記コードを利用して、このブログサイトのパンくずを実現しています。

ちなみに「パンくず」とは、森の中、来た道を辿って戻れるように、パンをちぎって置いて進んだことから来ているそうです。ほんとうかな。。。

B!

Comment

Comment Form

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

Monthly Archives