FC2 Blogでパンくずリストを設置する WebとPCのメモ帳

少し前にこのBlogにも「パンくずリスト」(Topic Path)を設置しました。具体的にどういうものかというと、「現在見ているページの階層をリンク付きツリーで表示する」ものです。より詳しく知りたい方は、下記を参照してください。

　Webサイトの中のそのページの位置を、階層構造の上位ページへのリンクのリストで簡潔に記述したもの。すべてのページの同じ場所にパンくずリストを掲載することにより、サイトの訪問者が現在位置を直感的に理解する役に立つ。

パンくずリストとは 【topic path】 - 意味・解説 (IT用語辞典 e-Words)

要するにユーザビリティを向上させるもので、場所をほとんど取らずにナビゲーションを増やすというなかなか便利なものです。主なメリットとしては、「サイドバーを見なくてもカテゴリがわかる」「トップページへの明確なリンクが作れる」といったところでしょうか。また、前書いたユーザビリティの話で、「トップページへのリンクをどうするか」という問題の解決にもなるかもしれません。

FC2 Blogでのパンくずリストの作り方

下記のソースを使用しているテンプレートに埋め込んでください。埋め込む場所は任意でいいですが、ページ(エントリ)の上部に設置するのが一般的です。

パンくずリスト(Topic Path)ソース

<!--permanent_area-->
<div class="topic_path">
<!--topentry-->
<a href="<%url>" title="トップページへ">Top Page</a> &gt; <a href="<%topentry_category_link>"><%topentry_category></a> &gt; <%sub_title>
<!--/topentry-->
</div>
<!--/permanent_area-->
<!--category_area-->
<div class="topic_path">
<a href="<%url>" title="トップページへ">Top Page</a> &gt; <%sub_title>
</div>
<!--/category_area-->
<!--tag_area-->
<div class="topic_path">
<a href="<%url>" title="トップページへ">Top Page</a> &gt; <%tag_word>
</div>
<!--/tag_area-->
<!--date_area-->
<div class="topic_path">
<a href="<%url>" title="トップページへ">Top Page</a> &gt; <%now_year>年<%now_month>月
</div>
<!--/date_area-->

詳細・注意点

FC2 Blogは深い階層は存在しない(作れない)ため、ツリー構造自体はシンプルです。このパンくずリストは、トップページを含めて3階層までしかありません。具体的な挙動は下記のとおりです。

• 個別記事での表示は「トップページ」>「カテゴリ」>「記事名」
• カテゴリページでの表示は「トップページ」>「カテゴリ」
• タグページでの表示は「トップページ」>「タグ」
• 月別ページ・カレンダーページでの表示は「トップページ」>「年・月」
• それ以外のページでは表示されません

パンくずリストはすべてクラス名「topic_path」で囲ってありますので、使用するテンプレートに応じて任意のスタイルをCSSで設定してください。(もちろんそのままでも使用には問題なし。)このBlogの場合はマージンだけ設定してあります。