スポンサーサイト

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。
公開: --年--月--日, カテゴリ: スポンサー広告

ブログ改装メモ(3) パンくずナビゲーションの実装とFC2ブログにおける問題点

パンくずナビゲーションは現在のページがWebサイトのどの階層に位置しているのかを一筋の道で簡潔に示してくれる。 個人的にはサイドバーにくっついている混沌としたナビゲーション風の何かより余程重宝している(ただし、各階層のインデックスページが適切に整備されていればの話)。 パンくずナビ自体はブログを始めて少し経った頃から実装していたが、今回改めて編集し直して少々問題も発見したので合わせてメモしておく。

パンくずナビゲーションの実装

簡単にパンくずナビについて説明すると、『藍色通信』内のトップページ以外で画面最上部に表示されているリンク一覧のこと。 人によって『パンくずナビゲーション』、『パンくずリスト』、『トピックパス』など呼び方は様々。 でも私は理由あって『パンくずリスト』とは呼ばないようにしている。

さて、基本的な考え方はブログ改装メモ(2) トップページの固定と同じで、 FC2テンプレート専用の個別エリア変数とそのエリア内で有効になる単変数を組み合わせればいい。その基本形は以下のようになる。


<!-- コメント編集や検索結果エリアなど、一部記述を省略している -->

<p class="braedcrumb" title="藍色通信内部における現在の位置を示しています。">
<!--permanent_area-->
<!--topentry-->
<a href="<%url>" title="HOMEへのリンク" rel="home">藍色通信</a><!--parent_category--> &raquo; <a href="<%topentry_parent_category_link>" title="『<%topentry_parent_category>』へのリンク"><%topentry_parent_category></a><!--/parent_category--> &raquo; <a href="<%topentry_category_link>" title="『<%topentry_category>』へのリンク"><%topentry_category></a> &raquo; <%sub_title> 
<!--/topentry-->
<!--/permanent_area-->
<!--titlelist_area-->
<a href="<%url>" title="HOMEへのリンク" rel="home">藍色通信</a> &raquo; 目録
<!--/titlelist_area-->
<!--category_area-->
<a href="<%url>" title="HOMEへのリンク" rel="home">藍色通信</a> &raquo; 『<%sub_title>』 の書庫
<!--/category_area-->
<!--date_area-->
<a href="<%url>" title="HOMEへのリンク" rel="home">藍色通信</a> &raquo; <%now_year><%now_month>月の書庫
<!--/date_area-->
</p>

あとは見た目の整形等についてスタイルシートで自由に指定するだけ。他のサイトのソースを見れば分かるが、p要素ではなくdiv要素だったり、ol要素やul要素だったり様々な種類がある。ちなみに個人的にはパンくずナビはp要素でいいと思っている。

FC2ブログでの問題点: 子カテゴリページで親カテゴリを表示できない

このブログ、『藍色通信』を例にするとこの記事のカテゴリは『ブログカスタマイズ』で親カテゴリが『Web』になる。つまりパンくず形式で表記すると下記の通りとなる。

藍色通信 » Web » ブログカスタマイズ

しかし、実際にカテゴリ『ブログカスタマイズ』のページでは下記のように表示される。

藍色通信 » ブログカスタマイズ

このように親カテゴリである『Web』を飛ばして表示されてしまう。これは現状のテンプレート変数の仕組上、まともに表示させることはできそうにない。ちなみにまともに表示しなくてもとにかく表示すればいいと言うなら一応可能。


<!-- 使い物にならないパンくずナビゲーション -->

<p class="breadcrumb">
<!--category_area-->
<!--topentry-->
<a href="<%url>" title="HOMEへのリンク" rel="home">藍色通信</a> <!--parent_category--> &raquo; <a href="<%topentry_parent_category_link>" title="『<%topentry_parent_category>』へのリンク"><%topentry_parent_category></a><!--/parent_category--> &raquo; 『<%sub_title>』 の書庫
<!--/topentry-->
<!--/category_area-->

この記述を適用すると親カテゴリは表示されるが、そのカテゴリに属する記事の数だけ表示が反復してしまう(スクリーンショット)。また、このとき反復する回数は最大で30までとなる。ちなみにカテゴリ『CTF News!』では更に凄いことになっている(スクリーンショット)。

親カテゴリを表示させるにはブロック変数 <!--parent_category--><!--/parent_category--> が必要で、更にこの変数は <!--topentry--><!--/topentry--> 内でのみ有効となる。そしてこの変数は記事を設定で指定した数だけ繰り返し表示させるという性質を持つためこのようにくり返されるものと考えられる。JavaScriptでサポートすれば表示できるのかもしれないけど、そういうのに頼るつもりは無く、かと言って他にいい解決策も思い付かないので今はここまでとする。

いっそのことカテゴリの親子関係を解消するとか。それが一番いいのかも知れない。

公開: 2010年11月30日, カテゴリ: ぶろぐいじり