Templates for SLMaMe

（2009.04.15 ソースを修正しました）
今回は「パンくずリスト」をブログに追加してみます。

パンくずリスト（トピックパスとも言います）とは、トップページから現在表示しているページまでの階層を表すものです。よく見るのが、ページの上部に「サイト名 > カテゴリー名 > サブカテゴリー名 > ページタイトル」とテキストで表示され、それぞれにリンクが張られている形式です。

ソラマメブログで作成できるのはサブカテゴリーまでなので、それほど複雑で深い階層にはなりませんが、検索エンジンから過去の個別記事に訪問したユーザーが、どの階層にある記事を閲覧しているのかが視覚的に認識できるので、設定しておくと非常に便利です。

このパンくずリストは、ソラマメでも一部のブログで見かけますね。「オリジナルテンプレート」機能で追加することが出来るようです。ソラマメヘッダーを削除する代わりに、パンくずリストの先頭にソラマメのトップページへのリンクがあります。
今回私がご紹介するのは、ソラマメヘッダーを残した状態で、パンくずリストの先頭にブログのトップページを設定する方法です。

尚、ソラマメの仕様で自動的に取得出来るカテゴリー名は記事が直接属しているカテゴリー名のみとなっているようなので、「ブログ名 > カテゴリー名 > サブカテゴリー名 > 記事タイトル」と正しい階層を表示することは難しいようです。つまり、「ブログ名 > カテゴリー名（もし記事がサブカテゴリーに属していれば、サブカテゴリー名） > 記事タイトル」としか表示できませんので、ご了承ください。

手を加えるテンプレートは「個別記事」「アーカイブ」「スタイルシート」の３つです。

HTML テンプレートのカスタマイズ方法

テンプレート「個別記事」では、パンくずリストを表示させたい場所に以下のソースを追記します。私は<div class="blog">の下に追記しました。

<div class="topicpath"><a href="<%BlogUrl%>" accesskey="1" title="HOME">HOME</a><IfEntryCategory> &gt; <a class="aposted" href="<%EntryCategoryUrl%>" title="<%EntryCategory%>"><%EntryCategory%></a></IfEntryCategory> &gt; <%EntryTitle%></div>

トピックパスを表示する部分を div で囲っています。また、個別に装飾するためのクラス名「topicpath」を設定しています。
間に挿入させる「>」を <IfEntryCategory> の中に入れているのは、記事がカテゴリーに属していない場合に「>」が２つ並ぶのを防ぐためです。

テンプレート「アーカイブ」では以下ソースを追加します。
追記する場所は「個別記事」と同じ位置が良いでしょう。

<div class="topicpath"><a href="<%BlogUrl%>" accesskey="1" title="HOME">HOME</a> &gt; <%CategoryName%> のアーカイブ</div>

このままだと、トピックパスが少し記事タイトルに近すぎますね。フォントサイズも記事タイトル（デフォルトのまま変更していない場合）と同じサイズなので、スタイルシートで調節しておこうと思います。

スタイルシート

以下のソースをテンプレート「スタイルシート」に追加します。

.topicpath {

   margin: 0 0 1em 1em;

   font-size: 10px;

   color: #666;

}



.topicpath a, .topicpath a:link, .topicpath a:hover, .topicpath a:visited, .topicpath a:active {

   color: #666;

}

追加する場所はどこでも構いません。
私は「.blog」と「.title」の間に追加しました。

それぞれのテンプレートを間違いの無いようコピー＆ペースとして保存してください。

完成

これで、ブログにパンくずリストが追加されました。