もう一度、迷子よけ [Nucleus用パンくずリスト]

「パンくずリスト」で検索してこのサイトにたどり着く方が多いようなので、少しだけでもお役に立てば。
以前の記事で、このサイトにパンくずリストを付けたとだけ書いていて、どうやって付けたのかを説明していなかったので、今回はその解説。Nucleusで作ったサイトに、スキンの加工だけでパンくずリストを付ける方法。

スキンの中のパンくずリストを付けたい場所に、次のコードを入れます。

<div id="breadcrumbs">
<%if(skintype,item)%>
<a href="<%blogsetting(url)%>"><%blogsetting(name)%></a>
<%if(category)%>&nbsp;&raquo;&nbsp;<a href="<%todaylink%>"><%category%></a><%endif%>
&nbsp;&raquo;&nbsp;<a href="<%archivelink%>">記事一覧</a>
&nbsp;&raquo;&nbsp;<%itemtitle%>
<%else%>
<%if(skintype,index)%>
<a href="<%blogsetting(url)%>"><%blogsetting(name)%></a>
&nbsp;&raquo;&nbsp;<%if(category)%><%category%> 一覧<%else%>記事一覧<%endif%>
<%else%>
<%if(skintype,archive)%>
<a href="<%blogsetting(url)%>"><%blogsetting(name)%></a>
<%if(category)%> » <a href="<%todaylink%>"><%category%></a><%endif%>
&nbsp;&raquo;&nbsp;<a href="<%archivelink%>">過去記事一覧</a>
&nbsp;&raquo;&nbsp;<%archivetype%>別の記事一覧 (<%archivedate(ja_JP)%>)
<%else%>
<a href="<%blogsetting(url)%>"><%blogsetting(name)%></a>
<%endif%>
<%endif%>
<%endif%>
</div>

そして、パンくずリストの行にスタイルをつけるためにスタイルシートの中に次の記述を加えます。この例では上下に罫線をつけて、バックグラウンドを薄いグレーにしてあります。

#breadcrumbs {
clear: both;
background: #F2F2F2;
padding: 2px;
border-bottom: 1px solid #000;
border-top: 1px solid #000;
font-size: x-small;
}

以上で、できあがり。
どういう仕掛けになっているかは、中身を見て考えてみてくださいませ。