http://10plate.blog44.fc2.com/blog-entry-116.html

カテゴリーのツリー化

今やカテゴリーのツリー化は様々な方法が存在しますが、その中でも特に簡単でお薦めの方法を紹介します。

以前はカテゴリー等をツリー化する方法としてJUGEMカスタマイズ講座のtakkyunさんが紹介しているスクリプトを利用した方法が有名でした。
(ワンダと巨像と土と空のNICOさんがカテゴリーのツリー化の手順を解説されています)

しかしこの方法は全ての記事のカテゴリーを編集し直す必要があり、既に記事を沢山書いている方にとっては敷居が高いカスタマイズでした。

今現在で私が知る最も簡単にツリー化できる方法は、FCafeのdanielさんが紹介している共有プラグインTree-CATEGORYを使う方法です。

【Tree-CATEGORY】
まず共有プラグインからTree-CATEGORYをダウンロードします。
(検索機能を使うとすぐに見つけられます)

次にプラグインTree-CATEGORYのHTMLを編集します。
(管理画面→プラグインの設定→HTMLの編集)

<div class="tree" id="CA" style="line-height:1.3;"><ul>
～
/*--------------------- 各カテゴリの説明 -------------*/
t[1]="";
t[2]="";
t[3]="";
t[4]="";
t[5]="";
t[6]="";
t[7]="";
t[8]="";
t[9]="";
/*---------------------- グループ（大カテゴリ） --------*/
C[1]="GROUP-A,1,2,3";
C[2]="GROUP-B";
/*---------------------------------------------------*/
～

この場合、通常の公式プラグイン「カテゴリ」で表示される１行目,２行目,３行目のカテゴリをGROUP-Aという大見出しでツリー化されます。
同様に必要な数だけC[2],C[3]と増やしてください。このツリー化プラグインの優れている点は、ツリー化する必要の無いカテゴリはそのままに出来ることです。C[*]に記述しなかったカテゴリはツリー化されないまま表示されます。
ツリー化の行間はstyle="line-height:1.3;"の記述を書き加えることで制御できます。お好みの数値に設定してください。

【説明つきカテゴリーリスト】
ツリー化とはまた少し違うかも知れませんが、ブログで小説！の麻生(Adankadan)さんが紹介する共有プラグイン「説明つきカテゴリーリスト」もお薦めです。

<SCRIPT language="JavaScript"><!--
cattl = new Array();
ulstyl = "<ul style='padding:0;margin-top:5px;margin-bottom:10px;'>"
cattl[1] = "<b>【カスタマイズ】</b>" + ulstyl ;
cattl[2] = "";
cattl[3] = "" ;
cattl[4] = "</ul><b>【その他】</b>" + ulstyl ;
cattl[5] = "";
cattl[6] = "";
cattl[7] = "</ul>説明7" + ulstyl ;
cattl[8] = "</ul>説明8" + ulstyl ;
cattl[9] = "</ul>説明9" + ulstyl ;
～

プラグインのHTMLソース中に説明があるとおりです。
上記の例で行くと１行目のカテゴリの上に【カスタマイズ】,４行目のカテゴリの上に【その他】と表示されます。

[表示例]

【カスタマイズ】
・～
・～
・～
【その他】
・～
・～
・～

各間隔もお好きな数値を入れて設定すると良いでしょう。
margin-top: (説明見出しからカテゴリが始るまでの間隔)
margin-bottom: (各最後尾のカテゴリから次の説明見出しまでの間隔)

関連記事

[ 2006/12/26 01:18 ] カスタマイズ共通カスタマイズ | TB(1) | CM(62)