以下の内容は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";
/*---------------------------------------------------*/


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


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

<!--
下記「説明*」の部分を書き換えてください。

要らない行は、
「 cattl[*] = ""; 」
こんな感じで文字無しに。「 + ulstyl」も削る必要があります。

カテゴリーの数が20越えると「cattl[*]…」の追加が必要です。

プラグイン提出元:『ブログで小説!』http://adankadan.blog47.fc2.com/
-->

<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ソース中に説明があるとおりです。
上記の例で行くと1行目のカテゴリの上に【カスタマイズ】,4行目のカテゴリの上に【その他】と表示されます。

[表示例]

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


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



以上の内容はhttp://10plate.blog44.fc2.com/blog-entry-116.htmlより取得しました。
このページはhttp://font.textar.tv/のウェブフォントを使用してます

不具合報告/要望等はこちらへお願いします。
モバイルやる夫Viewer Ver0.13