パンくずリスト（topic path）

数日前から「パンくずリスト（topic path）」を設置しているのですが、
その方法を記しておきます。

パンくずリストとは「HOME > 趣味 > 自転車」といったように階層構造をリスト形式で
表示するやつですね。
グリム童話「ヘンゼルとグレーテル」の中で、
森の中で迷わないように少しずつパンを落としながら歩いたというのが呼び名の由来です。

といっても、うちの場合は固定のお客様がほとんどでしょうし、
カテゴリも大したことがないので迷子になられることはないと思いますが、
まぁ、後学のためにということで設置してみました。

今回は記事上部に「<< 前｜main｜次 >>」などと表示されるナビゲーションを
パンくずリストの表示に変更します。

■修正箇所■
［デザイン］-［コンテンツ］-［記事］-［コンテンツHTML編集］

naviに関する赤字部分をtopicpath用の青字部分に置き換えます。

<% content.header -%>
<!-- Content -->
<% if:page_name eq 'article' -%>
<div class="navi">
（行数が長いのでこの記事では省略）
<% /if -%>
<% if:page_name eq 'category' -%>
<% /if -%>
<div class="topicpath">
<a href="<% blog.page_url %>">HOME</a>
<% if:page_name eq 'article' %> > <% loop:list_article -%><a href="<% article_category.page_url %>"><% article_category.name %></a> > <% article.subject %><% /loop %><% /if %>
<% if:page_name eq 'archive' %> > <% archive.createstamp | date_format("%Y年%m月") %>の過去ログ<% /if %>
<% if:page_name eq 'category' %> > <% category.name %><% /if %>
</div>
<% loop:list_article -%>

■修正箇所■
［デザイン］-［スタイルシート］

.naviの記述をコメントアウトして、新たに.topicpathについて追記しました。

.topicpath {
font-size:90%;
text-align:left;
width:100%;
}

Comments

今朝、このパンくずリストに気付いてどうやるんだろうと思ってました。
MovableTypeとは若干仕様が違いますが、ちょっと変更すればできそうな気がします。
今度僕のページでもやってみようっと。

Posted by 鹿之助 at 2005年07月05日 14:23

MovableTypeは自由度が高いし、色々と作り込みが出来そうですね。

seesaaも今は軽くなったので調子が良いですが、
いつ使いにくくなるかわからないので、私も密かにMTを勉強しておきます。

Posted by xjmarin at 2005年07月05日 17:40

おお。これは良い機能ですね。勉強になります！
同じseesaaなので、後でコッソリ拝借してよろしいでしょうか？(^ ^;)

メンテナンス以降、軽くて良い感じですね。
またいずれ重くなるでしょうけど。

Posted by KNIDer at 2005年07月06日 20:58

どうぞどうぞ〜
私もネットを徘徊したり本屋で立ち読みしたりして手を入れてますから(^^;

「<< 前｜main｜次 >>」は継続性のあるネタだったらいいのですが、
うちは単発というか何の脈絡もなしに思いつきで記事を投稿しているので、
naviをやめてパンくずリストにしてみました。

メンテ直前、管理画面の操作は辛かったですが、
その後は深夜でも待たされることがないので助かってます。

Posted by xjmarin at 2005年07月06日 21:21