小粋空間: プルダウンアーカイブ

Top ＞ Serene Bach ＞カスタマイズ＞プルダウン [全て開く]

2008年7月 3日

Serene Bach カテゴリーのプルダウン化プラグイン・バージョンアップ

July 3,2008 1:33 AM
Tag：[Category, SereneBach]
Permalink

以前公開していた、Serene Bach 用の「カテゴリーのプルダウン化プラグイン」を改善しました。

このプラグインを利用すれば、カテゴリー単位の折りたたみや、親カテゴリー記事数の、子カテゴリー記事数との合算表示などが可能です。

１．問題点

カテゴリー数を子カテゴリーと合算しない場合、記事がないカテゴリーに「0件」を出力する。

修正前

子カテゴリーと合算する場合は表示しません（下）。

親カテゴリーと合算

２．対処

子カテゴリーとの合算にかかわらず、カテゴリーに記事がない場合、0件を出力しません。

修正後

修正版は下記のリンクからダウンロードしてください。

FoldCategory.zip

３．関連記事

本プラグインの利用・設定方法については下記の記事を参考にしてください。

Comments [2] | Trackbacks [0]

2007年4月 2日

カテゴリーのプルダウン化プラグイン・バージョンアップ

April 2,2007 2:55 AM
Tag：[Category, Customize, Plugin, SereneBach]
Permalink

当サイトで配布中の Serene Bach 「カテゴリーのプルダウン化プラグイン」をバージョンアップしました。主な変更点は下記の通りです。

親カテゴリーにサブカテゴリーの記事数を合計して表示
記事数の表示・非表示の切り替えが可能
記事数を括るマークに好きな文字列を設定可能

「親カテゴリーにサブカテゴリーの記事数を合計して表示」は以前ご要望を頂いていたもので、現状の実装では親カテゴリーの記事数を表示してからサブカテゴリーの情報を取得しているため無理かと思いましたが、処理順序を変更することでなんとか表示できるようになりました。

下は親カテゴリー数にサブカテゴリー数を合計しない場合の例です。

サブカテゴリー数を合計しない場合の例

こちらが親カテゴリー数にサブカテゴリー数を合計した場合の表示例です。管理画面の設定により切替可能です。

サブカテゴリー数を合計しない場合の例

また上記のカスタマイズを行えるようにプルダウン化プラグインの管理メニューを追加しました。プラグインをインストールすると、管理メニュー下にプルダウン化プラグインのリンクが表示されます。

管理メニュー

「カテゴリーのプルダウン化」のリンクをクリックすると各種設定画面にジャンプしますので、そこで設定を行ってください。

記事数表示設定

「記事数を表示する」をチェックすると他の選択項目が表示されます。

記事数表示詳細設定

記事数括り文字はデフォルトで "[…]" が表示されます。カテゴリー名や折りたたみマークと間隔を空けたい場合は括り文字の左右に半角空白をいれて調整してください。
何も設定しないとデフォルト文字が表示されますので、括り文字を表示したくない場合は半角空白を設定してください。

引越し中のため記事内容を清書する暇がありませんが（さすがに限界です…）、とりあえず下記のリンクよりダウンロードしてお試しください。

設定方法につきましては「カテゴリーのプルダウン化プラグイン for Serene Bach」を参照願います。

また、旧バージョンよりアップロードするファイルがひとつ増えてます、アーカイブに含まれている foldcategory.html を resource/ja 配下に必ずアップロードしてください。
アップロードしていない状態でプラグイン管理画面を起動すると、下記のエラーが表示されます。

Need to set template at ./plugin/FoldCategory.pm line 350

2007.05.24
アップロードファイルおよびエラーメッセージについて記述を追加しました。

Comments [4] | Trackbacks [2]

2006年3月19日

プルダウン化プラグインで特定のカテゴリーだけをプルダウン化するカスタマイズ

March 19,2006 1:55 AM
Tag：[Customize, Plugin, SereneBach, SubCategory]
Permalink

プルダウン化プラグインで特定のカテゴリーをプルダウン化現在公開中の Serene Bach 用プルダウン化プラグインは、サブカテゴリーのある親カテゴリーに対してプルダウンマークを一律付与する仕様になっていますが、先日、「特定のカテゴリーにだけプルダウンマークをつけたいのですが」というご質問を頂きましたので、本エントリーでご紹介したいと思います。
完成するとスクリーンショットのように特定のカテゴリーのみプルダウン化することが可能です。

以下、カスタマイズ方法を記します。なおこのカスタマイズを行うために、プルダウン化プラグインがすでに使用されている状態にしておいてください。

１．プルダウン化の概要と修正作業の流れ

*この項は読み飛ばしても問題ありません。
プルダウン化プラグインはサブカテゴリーリストに対し、大きく分けて下記の二つの処理を行っています。

各親カテゴリーに、プルダウンマークを付与するためのHTMLタグを追加 … A
プルダウン化スクリプト（menufolder.js）を起動するための JavaScript を追加 … B

ブラウザにページが表示された時、2. の JavaScript が起動します。JavaScript は 1. のHTMLタグを探し、親カテゴリーに対してひとつずつプルダウンマークを付与します（実際に付与する処理をするのはその先のプログラム（menufolder.js）です）。

要するに、現在はこれらのお仕事を全てプラグインで行っている訳ですが、お仕事の一部をテンプレート上で（手動で）行えるように修正することで、プルダウンする・しないを手動で決められるようになります。
具体的には以下の変更を行います。

現状のサブカテゴリーリストのHTMLソースより、サブカテゴリーリストに表示された B を取得（２項）
プラグインから B を表示するための処理を削除（３項）
B からプルダウン化したいカテゴリーだけを選んでテンプレートに直接埋め込み（４項・５項）

２．HTMLコードからプルダウン化スクリプト起動部分の取得

サンプル（修正前）ここでは左のようなサブカテゴリーリストをサンプルとして説明します。
まず最初に、プルダウン化されたサブカテゴリーリストが表示されているページ（トップページ等）のHTMLソースを表示します。IEであれば[表示]-[ソース]で表示されます。文字コードがEUCの場合はIEで正常に表示されない可能性がありますので、Firefoxで[表示]-[ページのソース]でHTMLソースを表示してください。

表示されたHTMLソースの中に、サンプルで示すサブカテゴリーリスト（のHTML）があります。やや長いですが一応全て表示しておきます。

<div class="sidetitle">Categories</div>
<div class="side" id="categories"><ul><li><div class="subcategories" id="subcategories0name"><a href="http://localhost/blog/sb/sb.cgi?cid=9">日記</a> (1)</div>
<div id="subcategories0list"><ul><li><div class="subcategories" id="subcategories100name"><a href="http://localhost/blog/sb/sb.cgi?cid=10">食事</a> (2)</div>
<div id="subcategories100list"><ul><li><a href="http://localhost/blog/sb/sb.cgi?cid=14">メモ</a> (1)</li>
</ul></div></li>
</ul></div></li>
<li><div class="subcategories" id="subcategories1name"><a href="http://localhost/blog/sb/sb.cgi?cid=0">趣味</a> (2)</div>
<div id="subcategories1list"><ul><li><div class="subcategories" id="subcategories200name"><a href="http://localhost/blog/sb/sb.cgi?cid=6">車</a> (1)</div>
<div id="subcategories200list"><ul><li><a href="http://localhost/blog/sb/sb.cgi?cid=7">VW</a> (1)</li>
</ul></div></li>
<li><div class="subcategories" id="subcategories201name"><a href="http://localhost/blog/sb/sb.cgi?cid=2">パソコン</a> (1)</div>
<div id="subcategories201list"><ul><li><a href="http://localhost/blog/sb/sb.cgi?cid=5">Linux</a> (1)</li>
<li><div class="subcategories" id="subcategories20200name"><a href="http://localhost/blog/sb/sb.cgi?cid=3">Windows</a> (1)</div>
<div id="subcategories20200list"><ul><li><a href="http://localhost/blog/sb/sb.cgi?cid=4">XP</a> (1)</li>
</ul></div></li>
</ul></div></li>
</ul></div></li>
<li><div class="subcategories" id="subcategories2name"><a href="http://localhost/blog/sb/sb.cgi?cid=1">ブログ</a> (1)</div>
<div id="subcategories2list"><ul><li><div class="subcategories" id="subcategories300name"><a href="http://localhost/blog/sb/sb.cgi?cid=8">Serene Bach</a> (1)</div>
<div id="subcategories300list"><ul><li><div class="subcategories" id="subcategories30100name"><a href="http://localhost/blog/sb/sb.cgi?cid=12">カスタマイズ</a> (1)</div>
<div id="subcategories30100list"><ul><li><a href="http://localhost/blog/sb/sb.cgi?cid=13">プルダウン</a> (0)</li>
</ul></div></li>
<li><a href="http://localhost/blog/sb/sb.cgi?cid=11">テンプレート</a> (1)</li>
</ul></div></li>
</ul></div></li>
</ul>
<script type="text/javascript">
<!--
FoldNavigation('subcategories0','on',false);
FoldNavigation('subcategories100','on',false);
FoldNavigation('subcategories1','on',false);
FoldNavigation('subcategories200','on',false);
FoldNavigation('subcategories201','on',false);
FoldNavigation('subcategories20200','on',false);
FoldNavigation('subcategories2','on',false);
FoldNavigation('subcategories300','on',false);
FoldNavigation('subcategories30100','on',false);
//-->
</script>
</div>
 
<script type="text/javascript">
<!--
generateSubcategoryTree();
//-->
</script>

最後の方で青色で示した script 要素全体がカテゴリーのプルダウンを制御する部分です。これを後の作業で使用しますので表示したHTMLソースを任意のファイル名で保存するか、そのままディスプレイに表示させておいてください（後の作業を行うと青色部分が表示されなくなります）。

３．プラグインファイルの修正

plugins ディレクトリにあるプラグインファイル FoldCategory.pm をダウンロードし、任意のエディタで開きます。
開いたら 70 行目あたりにある行の赤色部分

　　　　　　　　：
if ($cat) {
    $sub_list = &_category_tree(
        'cat'    => $var{'sortedcat'},
        'branch' => $cat->id,
        'num'    => $var{'entryinfo'}{'category'},
    );
}
$js = "\n".'<script type="text/javascript">'."\n<!--\n".$js."//-->\n</script>\n";
$cms->num(0);
$cms->tag('fold_category_list' => ($all_list) ? '<ul>' . $all_list . '</ul>' . $js : '');
$cms->tag('fold_category_script' => '<script type="text/javascript" src="'.$var{'conf'}->value('conf_srv_base').'menufolder.js" charset="utf-8"></script>');
return 1;
　　　　　　　　：

を削除して

　　　　　　　　：
if ($cat) {
    $sub_list = &_category_tree(
        'cat'    => $var{'sortedcat'},
        'branch' => $cat->id,
        'num'    => $var{'entryinfo'}{'category'},
    );
}
$cms->num(0);
$cms->tag('fold_category_list' => ($all_list) ? '<ul>' . $all_list . '</ul>' : '');
$cms->tag('fold_category_script' => '<script type="text/javascript" src="'.$var{'conf'}->value('conf_srv_base').'menufolder.js" charset="utf-8"></script>');
return 1;
　　　　　　　　：

に変更してください。パッチが使える方は下記のパッチをご利用ください。

--- FoldCategory.pm.bak Wed Mar 18 23:33:54 2006
+++ FoldCategory.pm     Wed Mar 18 23:34:25 2006
@@ -67,9 +67,8 @@
             'num'    =< $var{'entryinfo'}{'category'},
         );
     }
-    $js = "\n".'>script type="text/javascript"<'."\n>!--\n".$js."//--<\n>/script<\n";
     $cms-<num(0);
-    $cms-<tag('fold_category_list' =< ($all_list) ? '>ul<' . $all_list . '>/ul<' . $js : '');
+    $cms-<tag('fold_category_list' =< ($all_list) ? '>ul<' . $all_list . '>/ul<' : '');
     $cms-<tag('fold_category_script' =< '>script type="text/javascript" src="'.$var{'conf'}-<value('conf_srv_base').'menufolder.js" charset="utf-8"<>/script<');
     return 1;
 }

修正が終わったら保存し、修正した FoldCategory.pm を元のディレクトリにアップロードしてください。

４．テンプレートの修正

管理画面よりテンプレートの編集画面を開きます。ベースHTMLテンプレート（個別エントリー用HTMLを用いている場合はそちらも）に、すでに設定されているプルダウン化用サブカテゴリーリストの独自タグ

<!-- BEGIN fold_category -->
<div class="sidetitle">Categories</div>
<div class="side" id="categories">{fold_category_list}</div>
<!-- END fold_category -->

があると思いますので、これに２項の script 要素（青色）を追加して、下記のように変更してください。

<!-- BEGIN fold_category -->
<div class="sidetitle">Categories</div>
<div class="side" id="categories">{fold_category_list}
<span class="blue"><script type="text/javascript">
<!--
FoldNavigation('subcategories0','on',false);
FoldNavigation('subcategories100','on',false);
FoldNavigation('subcategories1','on',false);
FoldNavigation('subcategories200','on',false);
FoldNavigation('subcategories201','on',false);
FoldNavigation('subcategories20200','on',false);
FoldNavigation('subcategories2','on',false);
FoldNavigation('subcategories300','on',false);
FoldNavigation('subcategories30100','on',false);
//-->
</script></span>
</div>
<!-- END fold_category -->

なおサブカテゴリーリストの独自タグが

<!-- BEGIN fold_category -->
<dl class="category">
<dt id="categoryname">CATEGORIES</dt>
<dd id="categorylist">
<div id="categories">{fold_category_list}</div>
</dd>
</dl>
<!-- END fold_category -->

と、dl/dt/dd 要素で括られている場合は、

<!-- BEGIN fold_category -->
<dl class="category">
<dt id="categoryname">CATEGORIES</dt>
<dd id="categorylist">
<div id="categories">{fold_category_list}
<span class="blue"><script type="text/javascript">
<!--
FoldNavigation('subcategories0','on',false);
FoldNavigation('subcategories100','on',false);
FoldNavigation('subcategories1','on',false);
FoldNavigation('subcategories200','on',false);
FoldNavigation('subcategories201','on',false);
FoldNavigation('subcategories20200','on',false);
FoldNavigation('subcategories2','on',false);
FoldNavigation('subcategories300','on',false);
FoldNavigation('subcategories30100','on',false);
//-->
</script></span>
</div>
</dd>
</dl>
<!-- END fold_category -->

としてください。このパターンに該当しない場合も {fold_category_list} の直後に script 要素を挿入すれば大丈夫です。

とりあえずここで一旦保存し、再構築してください。トップページ等を表示して、サブカテゴリーリストが修正前と全く同じとおりにプルダウン化されていれば、２項および３項の修正は正常にできています。
プルダウンマークが全て消えている場合、

３項の FoldCategory.pm の修正が誤っている
４項の script 要素が挿入がされていない（再構築忘れ等）

のいずれかが考えられます。

５．プルダウン化するサブカテゴリーを選択

すでにお気づきと思いますが、前項で追加した script 要素に記述された

FoldNavigation('subcategories0','on',false);
FoldNavigation('subcategories100','on',false);
FoldNavigation('subcategories1','on',false);
FoldNavigation('subcategories200','on',false);
FoldNavigation('subcategories201','on',false);
FoldNavigation('subcategories20200','on',false);
FoldNavigation('subcategories2','on',false);
FoldNavigation('subcategories300','on',false);
FoldNavigation('subcategories30100','on',false);

はプルダウン化する親カテゴリーに1対1で対応しています。２項のスクリーンショットとの対応づけは下記のようになっています。少し下にスクロールすると同じようなスクリーンショットがありますので、そちらと見比べてください。

FoldNavigation('subcategories0','on',false); ← 日記
FoldNavigation('subcategories100','on',false); ← 食事
FoldNavigation('subcategories1','on',false); ← 趣味
FoldNavigation('subcategories200','on',false); ← 車
FoldNavigation('subcategories201','on',false); ← パソコン
FoldNavigation('subcategories20200','on',false); ← Windows
FoldNavigation('subcategories2','on',false); ← ブログ
FoldNavigation('subcategories300','on',false); ← Serene Bach
FoldNavigation('subcategories30100','on',false); ← カスタマイズ

お分かりの通り、表示順に並んでいます。

ここからプルダウン化したくないカテゴリーの FoldNavigation… を削除していきます。
サンプルでは最上位の親カテゴリーだけをプルダウン化しますので、それ以外のサブカテゴリーに対応する行（赤色部分）を削除します。

FoldNavigation('subcategories0','on',false); ← 日記
FoldNavigation('subcategories100','on',false); ← 食事
FoldNavigation('subcategories1','on',false); ← 趣味
FoldNavigation('subcategories200','on',false); ← 車
FoldNavigation('subcategories201','on',false); ← パソコン
FoldNavigation('subcategories20200','on',false); ← Windows
FoldNavigation('subcategories2','on',false); ← ブログ
FoldNavigation('subcategories300','on',false); ← Serene Bach
FoldNavigation('subcategories30100','on',false); ← カスタマイズ

４項の2つめのリストを元に修正した、完成後の独自カテゴリーは下記のようになります。青色が最終的に追加した部分となります。

<!-- BEGIN fold_category -->
<div class="sidetitle">Categories</div>
<div class="side" id="categories">{fold_category_list}
<span class="blue"><script type="text/javascript">
<!--
FoldNavigation('subcategories0','on',false);
FoldNavigation('subcategories1','on',false);
FoldNavigation('subcategories2','on',false);
//-->
</script></span>
</div>
<!-- END fold_category -->

６．保存・再構築

サンプル（修正後）これでHTMLテンプレートを保存・再構築すれば、スクリーンショットのようにプルダウン化したいカテゴリーだけプルダウンマークが表示されます。

カスタマイズが完了した後、２項で保持していたHTMLソースは不要ですので削除してください。もう一度同じものを出力したい場合は３項?５項の修正を元に戻して再構築してください。

７．注意事項

カテゴリーの増減や移動を行った場合、上記の作業を再度行う必要があります。このカスタマイズはある程度カテゴリーが確定している状態で行うことをお勧めします。

８．初期のプルダウン状態を変更する

このカスタマイズとは直接関係ありませんが、プルダウン化プラグインを導入すると全てのカテゴリーが開いた状態になっています。これを閉じた状態にしておきたい場合、５項で追加した script 要素

FoldNavigation('subcategoriesX','on',false);

にある赤色部分の "on" を

FoldNavigation('subcategoriesX','off',false);

青色の "off" に変更して、保存・再構築してください。最初にページを表示した時、閉じた状態で表示することができます（一旦表示された後は Cookie でプルダウン化の状態が保持されます）。

Comments [11] | Trackbacks [1]

2006年2月12日

Serene Bach カテゴリーのプルダウン化プラグイン不具合修正

February 12,2006 11:50 PM
Tag：[Category, Customize, Plugin, SereneBach]
Permalink

Serene Bach カテゴリーのプルダウン化プラグイン修正以前公開したカテゴリーのプルダウン化プラグイン for Serene Bachで、「個別エントリーで表示されるカテゴリーリストの各カテゴリー件数が全て0になる」というご連絡を頂きましたので、プラグインを修正致しました。
具体的には、管理画面の「環境設定」→「環境設定」で保存形式を「個別エントリーをHTML保存」を選択している場合の個別エントリーで発生します。この問題は個別エントリーHTMLテンプレートの有無に依存しません。

原因は、既存のプラグインで個別エントリーHTMLを生成する際、各カテゴリー件数のみが取得できていなかったためです。修正内容は、個別エントリーの場合のみカテゴリー件数を再取得する処理を追加致しました。
確認不足であったこと、この場をお借りしてお詫び申し上げます。~~なお10日にリリースされたver 2.04Rでは動作未確認ですので予めご容赦ください。~~ver 2.04Rで動作確認済です。

修正したプラグインは下記のリンクからダウンロードできます（元エントリーからもダウンロードできます）。

FoldCategory.zip / FoldCategory.lzh

なお、カテゴリー件数を一律表示させたくない場合は、FoldCategory.pm の110行目付近にある、

$list .= ' (' . int($param{'num'}->{$cat->id}) . ')' if (!$param{'no_num'});

の先頭に # をつけて

# $list .= ' (' . int($param{'num'}->{$cat->id}) . ')' if (!$param{'no_num'});

とコメントアウトするか、行自体を削除してください。

以下余談です。
他のリスト関連ブロック（最新記事リスト・アーカイブリスト・カテゴリーリスト等）は、個別エントリーでは JavaScript で表示される仕組みになっております。
例えば、トップページのアーカイブリストのHTMLは

<div class="sidetitle">Archives</div>
<div class="side"><ul>
<li><a href="http://.../sb.cgi?month=200512">December 2005</a> (15)</li>
<li><a href="http://.../sb.cgi?month=200511">November 2005</a> (3)</li>
<li><a href="http://.../sb.cgi?month=200510">October 2005</a> (1)</li>
</ul></div>

となっていますが、個別エントリーでのアーカイブリストのHTMLは

<div class="sidetitle">Archives</div>
<div class="side"><script type="text/javascript" charset="UTF-8" src="http://.../log/arc.js"></script></div>

と JavaScript になっており、ここから読み込まれるスクリプトは log ディレクトリの下に

document.write('<ul>¥n');
document.write('<li><a href="http://.../sb.cgi?month=200512">December 2005</a> (15)</li>¥n');
document.write('<li><a href="http://.../sb.cgi?month=200511">November 2005</a> (3)</li>¥n');
document.write('<li><a href="http://.../sb.cgi?month=200510">October 2005</a> (1)</li>¥n');
document.write('</ul>¥n');

という内容のファイルが生成されています。つまり個別エントリーでは JavaScript を読み込むだけで済むため、再構築のパフォーマンス向上および再構築の簡略化を実現しているようです。

現在公開しているプラグインでは個別エントリーもトップページと同じHTMLが生成されるため、カテゴリーの変更が生じた場合、再構築によってしか個別エントリーに反映させることができません。件数表示も含め、カテゴリーの増減や構造を変更した場合も同様と思われます。

ということで、プラグインで JavaScript による表示が実現できないか現在調査中です。

Comments [3] | Trackbacks [0]

2005年12月10日

カテゴリーのプルダウン化プラグインを blog*citron さんのテンプレートで使う方法

December 10,2005 11:53 PM
Tag：[Category, Customize, Plugin, SereneBach]
Permalink

針ねずみのノート#003 ver2.00 昨日公開した Serene Bach 用カテゴリーのプルダウン化プラグインですが、sb および Serene Bach のテンプレートとしてデファクトスタンダードな blog*citron さんのテンプレートに適用する方法をご紹介しておきます。
左のスクリーンショットは「針ねずみのノート#003 ver2.00」にプラグインを適用した場合の完成例です。

ちなみに本家さまでもカテゴリーのプルダウン化が公開されたようです。

以下、カスタマイズ方法です。

まず、カテゴリーのプルダウン化プラグイン for Serene Bach の１?３項までの作業を行ってください。そして４項の作業について、下記の内容に変更して実施してください。

４．独自タグの設定２

blog*citron さんのベースHTMLテンプレートのサイドバーに設定されているカテゴリー表示用のブロック名および独自タグを、「変更前」のリストから「変更後」のリストに変更してください。

変更前

<!-- BEGIN category -->
<dl class="category">
<dt id="categoryname">CATEGORIES</dt>
<dd id="categorylist">{category_list}
{subcategory_list}</dd>
</dl>
<!-- END category -->

変更後

<!-- BEGIN fold_category -->
<dl class="category">
<dt id="categoryname">CATEGORIES</dt>
<dd id="categorylist">
<div id="categories">{fold_category_list}</div>
</dd>
</dl>
<!-- END fold_category -->

元のタグは全て残していますのでスタイルへの影響はないと思いますが、CSS の設定を変更されている場合は #categorylist 配下に #categories の追加が必要になるかもしれません。もし現在のスタイルが適用されなくなってしまった場合は、お手数ですがご連絡ください。

またスクリーンショットは、エントリー件数と折りたたみマークの間にスペースを設けて表示していますが、これは元記事の５項の作業を行ってください。

Comments [16] | Trackbacks [0]

2005年12月 9日

カテゴリーのプルダウン化プラグイン for Serene Bach

December 9,2005 11:58 PM
Tag：[Category, Customize, Plugin, SereneBach]
Permalink

カテゴリーのプルダウン化プラグイン Serene Bach 用のカテゴリーをプルダウン化するプラグインです。スクリーンショットのようにカテゴリー名の横に折りたたみマーク（▲または▼）のリンクを表示し、リンクをクリックすることでカテゴリーの折りたたみができます。当サイトのカテゴリーリストで同じものを使っておりますので、そちらで実際の動作を確認頂ければ幸いです。
画像はツリー化の状態で表示しておりますが、本プラグインで提供するのはプルダウン部分のみです。

本プラグインはバージョンアップしています。
詳細は「カテゴリーのプルダウン化プラグイン・バージョンアップ」をご覧ください。

プルダウンの仕様は下記の通りです。

親カテゴリーに折りたたみマークを表示します。
cookie を利用して折りたたみ状態を保持しますので、リロードやブラウザを新しく開いても以前の折りたたみ状態を表示することができます。
設定を変更することで折りたたみマークをカテゴリーの左側に表示させることもできます。
ツリー化スクリプトとの併用が可能です。

プルダウン動作は Windows2000/XP の IE/Firefox/Opera で確認しております。他の環境はもっておりませんので予めご了承ください。

前置きが長くなりましたが、以下カスタマイズ方法です。

１．プラグインのダウンロード・アップロード

下記の FoldCategory.zip または FoldCategory.lzh をクリックして、プラグインのアーカイブをダウンロードしてください。

FoldCategory.zip / FoldCategory.lzh

ダウンロードしたアーカイブを解凍し、中にある FoldCategory.pm を plugins ディレクトリ直下に、resource/ja/foldcategory.txt を、同じディレクトリの構成があると思いますので、foldcategory.txt のみを ja 配下にアップロードしてください。

アップロードの後、Serene Bach の管理画面を起動し、「環境設定」→「プラグイン」をクリックし、プラグイン一覧に FoldCategory.pm が表示されていることを確認し、一番右のチェックボックスをチェックして右下の「利用する」をクリックしてください。

２．スクリプトのダウンロード・アップロード

このプラグインを動作させるためには menufolder.js というスクリプトが別途必要になります。サイドメニューの折りたたみで menufolder.js をすでにお使いの場合は、本項目および３項の作業をスキップしてください。下記のリンク先より menufolder.js をダウンロードしてください。ダウンロードした menufolder.js を index.html のあるディレクトリにアップロードしてください。

download

３．独自タグの設定１

２項でダウンロードした menufolder.js を使うための宣言を、ベースHTMLテンプレートに設定します。個別エントリー用HTMLテンプレートを設定している場合はそちらも同じ設定を行ってください。
下記のように </head> の前辺りに青色のブロックおよび独自タグを設定します。

　　　　　　：
<!-- BEGIN fold_category -->
{fold_category_script}
<!-- END fold_category -->
</head>
　　　　　　：

４．独自タグの設定２

ベースHTMLテンプレのサイドバーに設定しているカテゴリー表示用のブロック名および、独自タグを下記のように変更してください。

　　　　　　：
<!-- BEGIN fold_category -->
<div class="sidetitle">Categories</div>
<div class="side" id="categories">{fold_category_list}</div>
<!-- END fold_category -->
　　　　　　：

ブロック名は fold_category 、独自タグ名は fold_category_list となります。リストは公開テンプレートを例に記していますが、div タグの有無や class 属性の名称は現在お使いのままで結構です。ただし赤色で示している、

id="categories"

は必須となりますのでご注意ください。

注意：blog*citron さん、ボムガールさん、宵闇書房さん、Millibar さんのテンプレートのように、カテゴリーリストが dl/dt/dd で括られていている場合、元の id 属性を変更せずに、下記のようにブロック名の変更と、独自タグを div 要素で括る形で設定してください。

　　　　　　：
<!-- BEGIN fold_category -->
<dl class="category">
<dt id="categoryname">CATEGORIES</dt>
<dd id="categorylist">
<div id="categories">{fold_category_list}</div>
</dd>
</dl>
<!-- END fold_category -->
　　　　　　：

５．折りたたみマークに関するカスタマイズ

基本的な設定は以上ですが、折りたたみマーク
なおデフォルトではスペースがないため、menufolder.js を任意のエディタで開き、下記の青色部分のように「1」に変更すれば、スクリーンショットのように件数とマークの間にスペースが挿入されます。

　　　　　　　：
// サブカテゴリーのタイトルとマークのスペース
var offsetForTitleAndMarkOfSubcategory = 1;
　　　　　　　：

また、カテゴリー名の左側に折りたたみマークを表示する場合は、同じファイルの下記の青色部分のように「true」を設定します。

　　　　　　　：
// サブカテゴリー用折りたたみマーク挿入位置
// カテゴリー前に折りたたみマークを配置：true
// カテゴリー後に折りたたみマークを配置：false
var preMarkForSubCategory = true;
　　　　　　　：

６．その他

なお本プラグインは sb パッケージに含まれる

sb/Content.pm::_category_tree

sb/Content.pm::_list_category

を利用したものです（sb研究所様へは連絡済）ので、プラグイン改造等による再配布はご遠慮ください。

2005.12.10 追記
ブログの文字コードがEUCの場合の考慮がもれていましたので、プラグインを修正しました。

2005.12.12 追記
他サイトの公開テンプレートへの適用例を追加しました。

Comments [64] | Trackbacks [18]

小粋空間 - a cheap joke and a play on words site

Serene Bach カテゴリーのプルダウン化プラグイン・バージョンアップ

１．問題点

２．対処

３．関連記事

カテゴリーのプルダウン化プラグイン・バージョンアップ

プルダウン化プラグインで特定のカテゴリーだけをプルダウン化するカスタマイズ

１．プルダウン化の概要と修正作業の流れ

２．HTMLコードからプルダウン化スクリプト起動部分の取得

３．プラグインファイルの修正

４．テンプレートの修正

５．プルダウン化するサブカテゴリーを選択

６．保存・再構築

７．注意事項

８．初期のプルダウン状態を変更する

Serene Bach カテゴリーのプルダウン化プラグイン不具合修正

カテゴリーのプルダウン化プラグインを blog*citron さんのテンプレートで使う方法

４．独自タグの設定２

カテゴリーのプルダウン化プラグイン for Serene Bach

１．プラグインのダウンロード・アップロード

２．スクリプトのダウンロード・アップロード

３．独自タグの設定１

４．独自タグの設定２

５．折りたたみマークに関するカスタマイズ

６．その他