TopSerene Bach > カスタマイズ > ツリー化 > 罫線つきのカテゴリーリストにツリー化スクリプトを適用する
2006年3月 7日

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

Posted at March 7,2006 1:10 AM
Category:[ツリー化]
Tag:[, , , ]

罫線つきのリストにツリー化スクリプトを適用するサイドメニューのツリー化スクリプト 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 追記
画像が正常に表示されない場合の対処を追加しました。

Posted by yujiro   このページの先頭に戻る
関連記事
この記事を読んだ人はこんな記事も読んでいます
人気エントリー
Hatena Hot Entries
Hatena Entries
トラックバックURL


コメント

 どぉぉもデス♪ yujiroサン、また、教えて頂きたいんですけど。もぉ一つ、BLOG始めたんです。上のURLに載せてるんですが、ちょっと、見てもらっていいですか?TOP画面にキティちゃんが沢山あります。 その下にハートの黒のenter画像があるんですが、日記画面にリンクさせようと<a href=""><IMG SRC="http://image.space.rakuten.co.jp/lg01/85/0000110785/58/img69adee74e8k1zk.gif" width="113" height="84" alt="マネェの日記へジャンプ♪">←ハート画像のソース この2つを張って最後に</a>をちゃんと張ってるんですが、青く枠で囲まれるんですが、あの、青い枠が出ないようにしたいんですが、何を付けたらいいですか? スイマセン教えて下さいm(__)m

  マネェ★

[1] Posted by マネェ★ : March 7, 2006 10:47 AM

ソース見て頂こうと、載せましたら、画像がUPされてます(笑) コードはIMG SRC="http://image.space.rakuten.co.jp/lg01/85/0000110785/58/img69adee74e8k1zk.gif" width="113" height="84" alt="マネェの日記へジャンプ♪" ←この最後にを付けてるんですが、枠で囲まれて困ってます。

[2] Posted by マネェ★ : March 7, 2006 10:52 AM

あ、また、を付けたまま、打ち込んじゃったので、送信したら、消えちゃってます(笑) /a ←これを付けてます! それでも、枠が付いてしまってます。

[3] Posted by マネェ★ : March 7, 2006 10:56 AM

いつもお世話になっています。先日の下記の件またお手すきの時には、宜しくお願い致します。

2)Nice Titles導入(http://mayumayu.babymilk.jp/blog/)
このカスタマイズで、yahooの挿入箇所だけがどうもわかりません。
具体的にMTソースのどの辺に挿入すればいいのかわからなくて困っています。
お気軽Blogさんのようにポップアップウィンドウを設置できるようにカスタマイズしたいと考えております。
また、カテゴリー前に画像表示もしたいと思っております。
お手数おかけ致しますが解説の程エントリーして頂けないでしょうか。宜しくお願いします。

[4] Posted by panser : March 8, 2006 12:50 AM

こんにちは。
こちらのプラグインを利用させていただいてます。
まだ、ブログ公開までには至らず、試行錯誤を繰り返しております.....(汗)

ツリー化の▲▼←このマークを付けたい所にだけ付けてツリー化する、指定などは可能でしょうか?
よろしくお願いします。

[5] Posted by 恋 : March 9, 2006 5:03 PM

>マネェさん
こんばんは。
大変お待たせしました。
以前書いた記事がありましたので、リンク画像の枠線を消すが参考になれば幸いです。

以上です。
それではよろしくお願い致します。

>恋さん
こんばんは。
ご利用ありがとうございます。
ご質問の内容は「特定のカテゴリーだけ折りたたみにしたい」ということでよろしいでしょうか。
修正方法につきましては別途エントリーします。なお大変申し訳ございませんが他のコメント回答があるため、公開まで3?4日ほどかかるかもしれまん。

以上です。
それではよろしくお願い致します。

[6] Posted by yujiro : March 9, 2006 7:29 PM

yujiro様、ご回答ありがとうございます。
はい。そのとうりです。
「特定のカテゴリーだけ折りたたみにしたい」のです。
別途エントリーされるとのこと、とっても嬉しいです!
楽しみにお待ちしております。
ありがとうございました。

[7] Posted by 恋 : March 10, 2006 1:48 AM

初めまして。こちらのツリー化のスクリプトとnew! 表示のSB用スクリプトを使わせていただいています。

質問させていただきたいのですが
ツリー化と新着表示はうまく出来ているのですが
▲と記事数の間に
1155305027 といったような文字列が入ってしまっています。
これはいったいなんでしょうか。

どうやったら消えるのか色々いじってみたのですが
よく解らなくて。

もしお解かりになるようでしたら教えていただきたいです。
よろしくおねがいします。

[8] Posted by ryoko : August 20, 2006 3:39 AM

>ryokoさん
はじめまして。
カスタマイズご利用ありがとうございます。
ご質問の件ですが、CSSに下記の設定を追加願います。

span.new {
    display: none;
}

該当記事の7項がこれにあたると思います。
ちなみに、数字は投稿時間を計算するための元データです(この値を参照して New マークの表示・非表示を判定しますが通常はCSSで非表示にします)。
それではよろしくお願い致します。

[9] Posted by yujiro : August 21, 2006 10:52 AM

ありがとうございました。
さくっと解決してしまいました。ペコリ(o_ _)o))
素敵なプラグインありがとうございます
体調気をつけてくださいね

[10] Posted by ryoko : August 21, 2006 10:25 PM

>ryokoさん
こんにちは。
ご連絡ありがとうございました。
無事になおったようでよかったです。
暑い日が続きますので、ryokoさんもご自愛ください。
ではでは!

[11] Posted by yujiro : August 22, 2006 4:28 PM

初めまして。
こちらの罫線つきのカテゴリーリストにツリー化スクリプトを使用させていただいているのですが、ところどころサブカテゴリーがツリー化されるものの、うまくツリー化されません。罫線もほとんど表示されなくなってしまいました。
cssの設定でしょうか?
テンプレートはblog*citron様の桜をお借りしています。
お忙しいところすみませんが、よろしくお願いいたします。

[12] Posted by peco : December 21, 2006 1:48 AM

>pecoさん
こんばんは。
ご返事遅くなってすいません。
時間かかりましたが解決しました。

スタイルシートの下記の赤色部分を削除してください。

div.navigation dl dd ul li {

また

ul.tree li {

に設定している画像と

ul.tree li.end {

に設定している画像が逆ですので入れ替えてください。

私が参考にしたテンプレート(針ねずみ)と「桜」ではスタイルシートの設定が異なっているのが表示されない原因でした。

それではよろしくお願い致します。

[13] Posted by yujiro : December 24, 2006 2:21 AM

yujiro様、
貴重なお時間を割いていただきありがとうございました。
無事解決いたしました。
今後ともよろしくお願いいたします。

[14] Posted by peco : December 24, 2006 5:29 PM

>pecoさん
こんばんは。
ご連絡ありがとうございました。
無事に直ったようでよかったです。
ではでは!

[15] Posted by yujiro : December 25, 2006 1:26 AM
コメントする
greeting

*必須

*必須(非表示)


ご質問のコメントの回答については、内容あるいは多忙の場合、1週間以上かかる場合があります。また、すべてのご質問にはお答えできない可能性があります。予めご了承ください。

太字 イタリック アンダーライン ハイパーリンク 引用
[サインインしない場合はここにCAPTCHAを表示します]

コメント投稿後にScript Errorや500エラーが表示された場合は、すぐに再送信せず、ブラウザの「戻る」ボタンで一旦エントリーのページに戻り(プレビュー画面で投稿した場合は、投稿内容をマウスコピーしてからエントリーのページに戻り)、ブラウザをリロードして投稿コメントが反映されていることを確認してください。

コメント欄に(X)HTMLタグやMTタグを記述される場合、「<」は「&lt;」、「>」は「&gt;」と入力してください。例えば「<$MTBlogURL$>」は「&lt;$MTBlogURL$&gt;」となります(全て半角文字)

Now loading...
Introduction
Entries of this Category
Recent Entries
Recent Comments
Recent Trackbacks
QRcode

現在停止中です
携帯電話からこのQRcodeを撮影することで携帯用URLを取得することができます

URI for cellular phones
ギターに入った猫
Styles
Font Size
Default
For defective color vision
Gray Scale
RGB Color
Search this site
loading ...
Categories
Monthly Archives
BlogPeople
Syndicate this site
FeedBurner(RSS1.0/RSS2.0/Atom)
Counter
これまでのアクセス
クリエイティブ・コモンズ・ライセンス
Powered by
Movable Type 5.12