Top > CMS・ブログ > Serene Bach > カスタマイズ > ツリー化 > 2006年3月
2006年3月 7日

罫線つきのカテゴリーリストにツリー化スクリプトを適用する

March 7,2006 1:10 AM
Tag:[, , , ]
Permalink

罫線つきのリストにツリー化スクリプトを適用するサイドメニューのツリー化スクリプト for Serene Bachを、他サイトで配布されているテンプレートで罫線つきのカテゴリーリストに適用する場合のカスタマイズです。スクリーンショットは罫線を表示している上にツリー化用画像を表示させた完成例です。
以下、blog*citron さんの「針ねずみのノート#003 ver2.02」の場合を例に説明致します。なお、基本的なカスタマイズについては元エントリーを参照ください。

まず、通常のサブカテゴリーリストにツリー化プラグインを設置する例です。カテゴリーリスト用の独自タグに青色のタグを追加します。

<!-- BEGIN category -->
<dl class="category">
<dt id="categoryname">CATEGORIES</dt>
<dd id="categorylist">
<div id="categories">{category_list}</div>
<script type="text/javascript">
<!--
generateSubcategoryTree();
//-->
</script>
</dd>
</dl>
<!-- END category -->

ポイントは、独自タグに設定するスクリプトの挿入位置を </dd> の前に配置することです。スクリプトを </dl> や <!-- END category --> の後方に配置すると、リストが正常に表示されません(IEでは表示が一部消えてしまう事象が確認されています)のでご注意ください。

また、カテゴリーのプルダウン化プラグインと併用する場合は下記のようになります。

<!-- BEGIN fold_category -->
<dl class="category">
<dt id="categoryname">CATEGORIES</dt>
<dd id="categorylist">
<div id="categories">{fold_category_list}</div>
<script type="text/javascript">
<!--
generateSubcategoryTree();
//-->
</script>
</dd>
</dl>
<!-- END fold_category -->

以上です。
CSS等の設定については元のエントリーを変更せずにできましたが、テンプレートによっては若干設定が異なるかもしれませんので予めご了承ください。

ツリーと罫線が同時に表示されない場合、 li 要素に罫線を表示する設定になっている可能性があります。ツリー化画像も li 要素に対して与えており、同じ要素に異なる画像を同時に表示することはできません。
このような場合、罫線画像を ul 要素に与えれば、異なる画像を同時に表示できると思います(冒頭のスクリーンショットはそのような設定になっています)。

2006.12.24 追記
画像が正常に表示されない場合の対処を追加しました。

Comments [15] | Trackbacks [0]
Now loading...
ギターに入った猫
掲載広告募集
Styles
Font Size
Default
For defective color vision
Gray Scale
RGB Color
Search this site

このブログをメールで購読する by:FeedBurner


AMN
Categories
Monthly Archives
2017年
2016年
2015年
2014年
2013年
2012年
2011年
2010年
2009年
2008年
2007年
2006年
2005年
2004年
2003年
BlogPeople
Syndicate this site
FeedBurner(RSS1.0/RSS2.0/Atom)
Counter
これまでのアクセス
Powered by
Movable Type 6.0.3