September 08, 2006

book_11.gif カテゴリの分類とツリー化【2】


サブカテゴリ化の方法をもう一つ、ご紹介。

こちらの方法だと、2chのスレッド一覧のような表示や、↓の画像のように、サイドコンテンツの開閉ではなくサブカテゴリ自体の開閉が出来るように偽装出来ます。

閉じた状態開いた状態
subcategory1.jpgsubcategory2.jpg


memo_10.gif 参照記事(有難うございます)
サブカテゴリ風に表示する [ ボボ日 ]
ミニカスタマイズ 20 [ 弱小エンジニアの小言 ]takoashiさん
課題:カテゴリプラグインをツリーor2ch風表示する(サブカテゴリーを作る)

※後者がスクリプトの提供元サイト様です

ボボ日さんの記事にあるように、このスクリプトは文字エンコードがeuc-jpで記述されているので、s-jisに変換しなければなりません。
オイラはcategory_tree.jsをDL(リンクの上で右クリック→対象をファイルに保存)して、エディタソフトでs-jis保存、seesaaのサーバーにUPしました。

次に、デザイン>コンテンツ>カテゴリ>コンテンツHTML編集画面を呼び出して編集します。
<div class="sidetitle"><% content.title %></div>
<div class="side">
<% content.header -%>
<% loop:list_category -%>
<a href="<% category.page_url %>"><% category.name | tag_break %></a>(<% category.article_count | __or__ | echo("0") %>)<br />
<% /loop -%>
<% content.footer -%>
</div>

このような初期値の記述を下記のように付加&書き換え。
<div class="sidetitle"><% content.title %></div>
<div class="side">
<% content.header -%>
<% loop:list_category -%>
<div class="sidebody">
<a href="<% category.page_url %>"><% category.name | tag_break %></a>(<% category.article_count | __or__ | echo("0") %>)
</div>
<% /loop -%>
<% content.footer -%>
</div>
<script language="JavaScript"
src="http://(category_tree.jsをUPしたアドレス)">
</script>
<script language="JavaScript"><!--
// 開閉するための関数
function opentree(cate_id) {
var catediv = document.getElementById(cate_id);
if( catediv != null && catediv.style.display == "none" ) {
catediv.style.display = "block";
} else {
catediv.style.display = "none";
}
}
category_convert_treeview(
"Category",
":",
"├ ",
"links-left",
0,
"<div class=¥"tcate¥"><a href=javascript:opentree(¥"CATEID¥") class=¥"atcate¥"><IMG src=¥"http://(リスト画像のアドレス)"¥" border=¥"0¥"></a> ",
"</div>",
"<div class=¥"tsubcate¥">",
"</div>",
"style=¥"display:none¥"" );
// --></script>


1. livedoorブログでは、カテゴリのcssクラス名が"sidebody"となっている為、このカスタマイズにも関係するので<div class="sidebody"></div>という記述を追加します。
2. 改行<br />は特に必要が無い為、削除。
3. jsファイルとその呼び出しを追加。
4. オイラが更に追加したのは、リスト用の画像ファイルへのリンクです。

開いたままの状態のサブカテゴリ表示や、2ch風表示方法、また呼び出し関数category_convert_treeview()の引数なと゜の解説はボボ日さんやtakoashiさんの記事を参照して下さい。
web拍手
posted by  文里 at 23:37 | カスタマイズ | Edit
Comments
コメントを書く
Name: [必須入力]

Mail:

URL:

Comment: [必須入力]

認証コード: [必須入力]


※画像の中の文字を半角で入力してください。
Trackbacks
TrackBack Sites
※トラックバック元の画像は HeartRails Capture を利用させて戴いております。