TopSerene Bach > カスタマイズ > ツリー化 > サイドメニューのツリー化スクリプト for Serene Bach
News
各種ブログテンプレート
2006年1月23日

エントリー本文

サイドメニューのツリー化スクリプト for Serene Bach

Posted at January 23,2006 11:51 PM
Category:[ツリー化]
Tag:[, , , ]

Movable Type 用に公開しているサイドメニューのツリー化スクリプト(改)をSerene Bach / sb で適用する方法です。
なお当サイトで公開しているツリー化スクリプトを適用すると、ツリーがきれいにつながって表示されないという情報を頂いておりますので、その点に関しましては8項を参照ください。

注:本カスタマイズと「JavaScript 不要なサイドメニューのツリー化 for Serene Bach」を同時に利用する場合は、「Serene Bach で異なるツリー化カスタマイズを同時に利用する」の設定を行ってください。

1.maketree.js ダウンロード

下記のリンクをクリックしてスクリプトのページへジャンプしてください。そこで maketree.js をクリックし、同じファイル名でご自身のPCに保存してください。

download

本スクリプトはUTF-8で記述していますので、ブログで使用している文字コードがUTF-8以外の場合(Shift_JIS/EUC-JP等)は保存後、文字コードを適宜変更して再保存するか、script 要素の charset 属性にスクリプトの文字コードを指定してください(scriptタグの設定方法につきましてては3項に記します)。

2.maketree.js 配置

ダウンロードした maketree.js を index.html と同じディレクトリにアップロードしてください。

3.リスト表示用タグ修正およびJavaScript起動用スクリプト設定

ベースHTMLテンプレート(個別エントリー用HTMLテンプレートを使っている方は両方)のサイドバーのメニューリストのMTタグを修正します。ここでは公開テンプレートを例に、各サイドメニューの設定例を示します。黒字部分が公開テンプレートで設定している独自タグで、青色部分が新たに追加する部分です。赤色は任意の名称を設定します(タグの id 属性とスクリプト部分の名称が一致するように設定してください)。
他のテンプレートでも適用可能ですが、ツリー化を行う場合、ul と li を用いたリスト形式になっていることが前提となります。

Latest Entries

<!-- BEGIN latest_entry -->
<div class="sidetitle">Latest Entries</div>
<div class="side" id="entrylist">{latest_entry_list}</div>
<!-- END latest_entry -->
 
<script type="text/javascript">
<!--
generateNormalTree("entrylist");
//-->
</script>

Recent Comments

<!-- BEGIN recent_comment -->
<div class="sidetitle">Recent Comments</div>
<div class="side" id="commentlist">{recent_comment_list}</div>
<!-- END recent_comment -->
 
<script type="text/javascript">
<!--
generateNormalTree("commentlist");
//-->
</script>

Recent Trackbacks

<!-- BEGIN recent_trackback -->
<div class="sidetitle">Recent Trackbacks</div>
<div class="side" id="trackbacklist">{recent_trackback_list}</div>
<!-- END recent_trackback -->
 
<script type="text/javascript">
<!--
generateNormalTree("trackbacklist");
//-->
</script>

Categories(他と若干設定内容が異なります)

<!-- BEGIN category -->
<div class="sidetitle">Categories</div>
<div class="side"><div id="categories">{category_list}</div></div>
<!-- END category -->
 
<script type="text/javascript">
<!--
generateSubcategoryTree();
//-->
</script>

Archives

<!-- BEGIN archives -->
<div class="sidetitle">Archives</div>
<div class="side" id="monthlylist">{archives_list}</div>
<!-- END archives -->
 
<script type="text/javascript">
<!--
generateNormalTree("monthlylist");
//-->
</script>

Links

<!-- BEGIN link -->
<div class="sidetitle">Links</div>
<div class="side" id="linklist">{link_list}</div>
<!-- END link -->
 
<script type="text/javascript">
<!--
generateNormalTree("linklist");
//-->
</script>

4.maketree.js インクルード文挿入

ベースHTMLテンプレート(個別エントリー用HTMLテンプレートを使っている方は両方)の </head> の直前に下記のタグを追加してください。スクリプトの文字コードとブログの文字コードが異なる場合は青色の charset 属性を指定する場合は maketree.js の文字コードを指定してください。

<script type="text/javascript" src="{site_top}maketree.js" charset="utf-8"></script>

5.画像のダウンロード

下記のファイルをダウンロードしてください。これはツリーを表示するための画像で、実線・点線の2種類を用意しています。それぞれ2つの画像がありますのでご注意ください。

実線:tree_lst_solid.gif / tree_end_solid.gif
点線:tree_lst_dotted.gif / tree_end_dotted.gif

保存方法は、(IEの場合)リンクをクリックして一旦画像を表示し、その後に「ファイル」→「名前をつけて保存」で保存するか、リンクを右クリックして「対象をファイルに保存」を選択します。なお実線につきましては以前我楽さんより提供いただいたものをそのまま使っています。点線バージョンはたいしたものではありませんので腕に自信のある方は作り直されることをお勧めします。

6.画像の配置

ダウンロードした画像を index.html と同じディレクトリにアップロードしてください。

7.スタイルシート追加

スタイルシート(style.css)の.sideの下辺りに下記のクラス指定を追加します。

ul.tree {
    margin: 0px!important;
    padding: 0px!important;
    font-size: 9px;
    list-style: none!important;
}
ul.tree ul {
    margin: 0px!important;
    padding: 0px!important;
}
ul.tree li {
    margin: 0px!important;
    padding: 0px 0px 0px 16px!important;
    background-image: url(tree_lst.gif);
    background-position: 0 0;
    background-repeat: no-repeat!important;
    list-style: none!important;
}
ul.tree li.end {
    background-image: url(tree_end.gif);
    list-style: none;
}

赤字部分については、先ほどダウンロードした画像のファイル名にそれぞれ変更するか、画像のファイル名をスタイルシートに設定されているファイル名に修正してください。また上の設定はスタイルシートと同じディレクトリ(=ローカル・サイト・パス)に画像を配置した場合です。異なるディレクトリに配置する場合は http://? のようにURLで画像を指定してください。

8.不具合の修正

Movable Type の設定をそのままお使いの場合、冒頭に記した通りツリーがきれいにつながって表示されません。
これを修正するにはスタイルシートに

ul.tree li {
   :
    background-position: 0 0;
   :
}

を追加することできれいに表示されるようになります(7項のCSSには設定済です)。

2006.04.04 追記
リストから language 属性を削除しました(HTML4.01/XHTMLで非推奨あるいは廃止されているため)。

2007.02.06 追記
4項の記述を修正しました(「<head>~</head> の間」→「</head> の直前」)。また、「JavaScript 不要なサイドメニューのツリー化 for Serene Bach」を同時に利用する場合の注意書きを追加しました。

Posted by yujiro ReTweet This!
関連記事
この記事を読んだ人はこんな記事も読んでいます
人気エントリー
Hatena Hot Entries
Hatena Entries
トラックバックURL


トラックバック

サイドメニューのツリー化 from てぃあら
昨日 に引き続き、気になってた「サイドメニューのツリー化」を導入。 ⇒ 小粋空間 : サイドメニューのツリー化スクリプト(改)( ̄-  ̄ ) ンー... [続きを読む]

Tracked on January 24, 2006 6:38 AM

nwxce from nwxce
たまに来ますのでよろしくお願いします。 [続きを読む]

Tracked on November 8, 2006 1:36 PM

weblogカスタマイズ2・小粋空間さんより from おかち日和
SereneBachでウェブログを新しく作るにあたり、たくさんの技をお借りしました。 [続きを読む]

Tracked on January 16, 2007 5:24 PM

頑張ってツリー化をやってみた☆その1 from *day after day...*
サイドメニューをツリー化してみようと思い,いつもお世話になっている小粋空間さまのサイドメニューのツリー化スクリプト for Serene Bachを参考... [続きを読む]

Tracked on March 27, 2007 3:21 PM
コメント

w(°o°)w おおっ!!ありがとうございますぅ???。
ちゃんとツリーがつながりましたぁ。
あと、サブカテゴリも 変だったんだけど、まともなツリーになりました。
ヽ(*^。^*)ノ ワ?イ エントリに追記してトラックバックさせていただきますね。

[1] Posted by さえら : January 24, 2006 6:30 AM

>さえらさん
こんばんは。
早々のご利用&トラックバック、ありがとうございます。
うまくできたようでよかったです。
カスタマイズも進行していますね!

[2] Posted by yujiro : January 24, 2006 11:57 PM

(・Ω・)ノ コンニチワー
今日になって、ていうか ついさっき気が付いたんですけど、
サブカテゴリの部分のツリー、トップページは いい感じなんですが
エントリアーカイブで、なんか変なことになってます。
カテゴリアーカイブや 日付アーカイブは トップページと同じように
素敵なツリーになってるんですけど・・・どうしてでしょう?

[3] Posted by さえら : January 25, 2006 10:39 AM

ツリー化スクリプト、利用させていただいています。
カテゴリーはちゃんとツリー化されていますが、最近のコメントとトラックバックがツリー化できません。
ツリーの画像は表示されています。
どこを間違えているのでしょうか。

[4] Posted by たま : January 26, 2006 12:05 PM

お久しぶりです。
ツリー化スクリプト、早速利用させて頂きました。

MTからSBに移行して以来、カテゴリーリストをツリー化したいと思っていたのでとても嬉しいです。
有難う御座いました!

[5] Posted by Taka : January 26, 2006 10:34 PM

>さえらさん
こんばんは。
スクリプト、修正版に差し替えました。
情報ありがとうございました!

>たまさん
こんばんは。
ご利用ありがとうございます。
こちらから拝見させて頂く限り、表示されているようです(解決済でしたらご容赦ください)。
なお、「⇒」についてはツリー化できませんので併せてご了承ください。

>Takaさん
こんばんは。
ご無沙汰しております。
スクリプトご利用ありがとうございます。
気に入って頂けてよかったです。

[6] Posted by yujiro : January 27, 2006 12:39 AM

おはようございます。
管理画面の 「環境設定」 ⇒ 「環境設定」 ⇒ 「保存形式」 で
「個別エントリをhtml保存」 にしていると、エントリアーカイブで
ツリーの表示がおかしくなってしまうんです。
「保存形式」 を 「トップページのみ html生成」 にすると
エントリアーカイブの url は sb.cgi?eid=○○ となって、
この状態だと ほかのページ同様 ツリーが きれいに表示されますが
みなさん、結構 「個別エントリをhtml保存」 に されているようで、
できたら .html の状態でも サブカテゴリが うまく ツリーになれば・・・と思うのですが。。。

[7] Posted by さえら : January 27, 2006 7:10 AM

「⇒」の表示を変えられると思っていたので、ツリー化されていないと思ってしまっていました。
さっそくの回答、ありがとうございました。

[8] Posted by たま : January 27, 2006 11:00 AM

>さえらさん
こちらのコメントにつきましては解消済ということで。

>たまさん
こんにちは。
ご連絡ありがとうございます。
「⇒」は改行タグの後に表示しているだけで、タグの構造上変換が面倒というのもありますが、コメントやトラックバックについてはエントリーごとにまとめて表示するプラグインを適用して、その後ツリー化する方がすっきりすると思います。
このエントリーではそこまでサポートできておりませんがまた機会をみてエントリーしたいと思います。

[9] Posted by yujiro : January 27, 2006 4:23 PM

おはようございます。
SBいじり初心者のここちと申します。
私のお借りしているテンプレートが
dl/dt/dd で記されていまして、どこをどの様に
いじったらいいのかわからずにおります・・・。
カテゴリーとリンク部分をツリー化したいのですが、
よろしければお知恵をお貸しいただければと思います。
どうぞよろしくお願いします。。。

[10] Posted by ここち : January 29, 2006 6:11 AM

>ここちさん
こんにちは。
カテゴリーとリンクのタグが dl/dt/dd を利用して具体的にどのような構造になっているかを知りたいので、サイトのURLまたはご利用になっているテンプレートサイト(およびテンプレート名)をお知らせ頂けますでしょうか。
サイトURLをご連絡頂けた方が当方の作業がスムーズに行えますので有り難いです。

なお本スクリプトは現在のところ ul/li にしか対応していないため改造してみます。

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

[11] Posted by yujiro : January 30, 2006 2:39 PM

こんばんは。早速のご回答ありがとうございます。゚(゚´Д`゚)゚。
テンプレートをお借りしているのはblog TK*Plus1様の「Leaf of Pumila Ver1.01
」です。サイトの方は、わたしがめちゃくちゃにいじくってしまっていまして、とても見にくい物になってしまっているのでお恥ずかしい次第です。。。
お忙しい中本当にお手数かけますがどうぞよろしくお願いします!!

[12] Posted by ここち : January 30, 2006 11:07 PM

>ここちさん
こんばんは。
サイト、拝見させて頂きました。
ご連絡ありがとうございます。
サイドメニューにカテゴリーがみつからなかったので、「リンク」の部分だけ修正内容をお知らせいたします。

その前に、tree_lst.gif / tree_end.gif がアップロードされていないようですので、5項の作業で index.html と同じディレクトリにツリー表示用の画像がアップロードされているかご確認ください。

本題ですが、リンク部分のタグの Links となっている部分を

<dl class="sidetitle2"> <dt id="linkname">Links</dt> <dd id="linklist"> <div id="categories">?(省略)?

に変更してください。
その下の

<script type="text/javascript" language="javascript"> <!-- generateNormalTree("linklist"); //--> </script>

の赤色部分は

<script type="text/javascript" language="javascript"> <!-- generateSubcategoryTree(); //--> </script>

に変更してください。

また、ツリー部分の罫線用の画像を無効にするため、スタイルシートの最後に

#navi_area dl dd ul.tree {     background:none; }

を追加願います。

なお categories という名前の id 属性は、1つのHTMLページに1つしか設定できないため、カテゴリーリストを増やす場合は maketree.js を改造する必要があります(今回は暫定ということでお許しください)。

説明だけでは伝わらないので、修正したものをこちらにおきました。文字コードはUTF-8に変更してますがこちらの都合ですので実際の修正はEUCのままで問題ありません。

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

[13] Posted by yujiro : February 1, 2006 11:00 PM

yujiro 様 こんばんは(*゚ー゚)
早速ご指摘いただきました通りやってみたところ・・・
見事ツリー化されましたヽ(τωヽ)ノ ←嬉し泣きです。
あれこれ悩んでた半日が嘘の様に・・・5分で完了です!
本当に本当にありがとうございました!
これからもこちらでちょこっとずつお勉強しながらカスタマイズしていきたいです♪

お忙しい中、ご質問にお答えいただきましてありがとうございました。
これからもがんばって下さい!!

[14] Posted by ここち : February 3, 2006 1:02 AM

>ここちさん
こんにちは。
うまくできたようで、良かったです。
お疲れ様でした。
また何かありましたらご連絡ください。
ではでは!

[15] Posted by yujiro : February 4, 2006 2:01 PM

おはようございます!
先日はお世話になりました(*゚ー゚)
あれから少しずつですが、何とか初心者なりにいじっているんですが、どうしてもまたわからない所があったので、お尋ねに来ました。。。リンク部分にプルダウンとツリーを使ってるのですが
よくみると文字が全体的に(リンク部分のみ)右寄りになってしまっていて、本当に少しなんですがツリーがずれてしまっているようなんです。。。
プルダウンの方は自分で適当にやってしまったので、
もしかしたらそのやり方がもしかしてマズかったかな・・・と色々考えたんですが、結局わからずじまいで・・・
もしよろしかったらまたお知恵をお貸しいただければと思います;;
本当にお忙しい中、申し訳ありません。

[16] Posted by ここち : February 19, 2006 8:56 AM

こんにちは!
プルダウンのプラグインとツリー化を参考にさせていただきました!
そこでアドバイスいただきたいのですが、プルダウン・ツリーの表示はちゃんとできたものの、サイドバーの、かけ線が表示される所と されない所がでてきました。
blog*citron様の桜テンプレートを使っているのですが、CSSもblog*citron様でやる場合のようにやったのですが、かけ線だけが表示されなくなりまして(TдT)
どこか間違っている所があればアドバイスいただきたいのですが(m*_ _)mペコ

[17] Posted by aco* : February 20, 2006 3:26 PM

>ここちさん
こんにちは。
ご利用ありがとうございます。
ご質問の件ですがスタイルシートに設定された下記の赤色部分の値を小さくすればリンク文字が左に移動します。

ul.tree li {     margin: 0px!important;     padding: 0px 0px 0px 16px!important;     background-image: url(tree_lst_solid.gif);     background-position: 0 0;     background-repeat: no-repeat!important;     list-style: none!important; }

12px くらいが丁度良さそうです。
以上です。
それではよろしくお願い致します。

>aco*さん
こんにちは。
ご利用ありがとうございます。
ご質問の件ですが、

  • 「Categories」の親カテゴリー(例えば「Murmur」)の左に表示されているツリーに罫線が重なって表示されない
  • 親カテゴリーのすぐ下に罫線が表示されない

のいずれでしょうか。すいませんが再度ご連絡ください。

[18] Posted by yujiro : February 22, 2006 12:45 PM

お忙しい中お返事ありがとうございます。

かけ線が表示されないのは、今使ってるテンプレートはサイドバーに、かけ線が表示されるものなのですが、親カテゴリーでも表示される所と、されないところがあるんです。

CSSでの設定だとは思うのですが、サイドバーのコメントの所が表示されてなかったり、サイドバーのエントリー部分は表示されてたりと…バラバラに表示されるようになってしまいました。
カテゴリーの背景の かけ線は表示されています。

[19] Posted by aco* : February 22, 2006 5:58 PM

yujiro 様こんばんは(*゚ー゚)
早速のお返事どうもありがとうございました。
そこの部分の数値を変える、とツリーバーと一緒に文字が左に寄るのは理解していたのですが、全体的にLinksの部分だけ文字が右よりになっていたので、ちょっと気になっていたのですが、(私のいじり方がおかしいのかと気になって(´ヘ`;)・・・)特に問題なさそうなので、ご指摘いただいた通り、12pxにして使ってみようと思います。
お忙しい中アドバイスありがとうございました♪

[20] Posted by ここち : February 23, 2006 10:35 PM

>aco*さん
こんにちは。
ご返事遅くなってすいません(確認で手間取りました)。
とりあえず修正したものをこちらにおきましたのでご確認ください。

CSSはダウンロードしてそのままお使いください。テンプレートは下記の青色部分を追加してください。

       : </div> <div class="navigation2"> <div class="sideber"> <dl class="category"> <dt id="categoryname"> <span>Category</span> </dt> <dd id="categorylist"> <div id="categories">        : </div> </dd> </dl> </div> <script type="text/javascript"> <!-- generateSubcategoryTree(); //--> </script> </div> <div class="navigation">        :

変更点は、HTMLのサブカテゴリーリスト部分のみ navigation2 という class 属性を加えて、他のリストと異なる設定を与えています。
詳細につきましてはHTMLソースとCSSに「修正」というキーワードで括ってますのでそちらを参照ください(おおざっぱな説明ですので修正方法に不明な点がございましたら再度ご連絡ください)。

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

>ここちさん
こんにちは。
ご連絡ありがとうございました。
またなにかございましたらご連絡ください。
ではでは!

[21] Posted by yujiro : February 26, 2006 3:10 PM

yujiro様、ご丁寧なお返事ありがとうございます!
おかげで かけ線も表示されるようになり
表示もちゃんとなりました(TдT)
CSSもダウンロードさせていただきました!
心から感謝いたします。ありがとうございます!今回の修正されている部分もちゃんと自分で勉強して、これから質問も無いようにやっていきたいと思います!ありがとうございました!

[22] Posted by aco : February 26, 2006 8:48 PM

>acoさん
こんにちは。
ご連絡ありがとうございました。
うまく表示できるようになってよかったです。
このカスタマイズ方法はまた改めてエントリーしたいと思っています。私自身いい勉強になりました。
ではでは!

[23] Posted by yujiro : February 27, 2006 12:17 PM

はじめまして、グリフと申します。
以前からこの「サイドメニューのツリー化スクリプトforSB」を使わせてもらっていました。
何も問題はなく使っていたと思っていたのですが
ふとIEで自サイトを見てみたところ(普段はSleipnir)ページエラーが出ましたorz

ライン:50
文字:13
'innerHTML'はNullまたはオブジェクトではありません。

というエラーです。
更にエラーチェックには好評(?)のFirefoxでチェックしてみると

エラー: uncaught exception: [Exception... "Index or size is negative or greater than the allowed amount" code: "1"
nsresult: "0x80530001 (NS_ERROR_DOM_INDEX_SIZE_ERR)"
location: "http://gulif.netgamers.jp/blog/maketree.js Line: 49"]

というエラーが。
様々なサイトを参考に問題解決しようと試みましたが、自分ではサッパリな状態でして;
どうか良い解決法がありましたらご教授お願いしますm(_ _)m

[24] Posted by グリフ : May 14, 2006 9:00 PM

>グリフさん
はじめまして。
ご利用ありがとうございます。
ご質問の件ですが、maketree.js の50行目付近に下記の青色のコード(計2行)を追加して頂けますでしょうか。

// Mozilla 警告対処 2005.09.10 if(ulNodes.length - 1 > 0){   if(ulNodes[ulNodes.length - 1].innerHTML){     ulNodes[ulNodes.length - 1].setAttribute('class', 'end');     ulNodes[ulNodes.length - 1].setAttribute('className', 'end');   } }

こちらで確認したところエラーは表示されなくなりました(厳密には他のJavaScrptエラーが表示されました)。

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

[25] Posted by yujiro : May 14, 2006 11:38 PM

>yujiro殿
早速の回答ありがとうございます。
おかげさまでIEではエラーが出なくなりました。
表面上(IEエラー検出)には出ないスクリプトエラーがちょっと気になりますが…。

ありがとうございました!

[26] Posted by グリフ : May 15, 2006 5:29 PM

>グリフさん
こんにちは。
ご連絡ありがとうございました。
エラーが解消してホッとしました。
ではでは!

[27] Posted by yujiro : May 16, 2006 9:35 AM

こんにちは。
カスタマイズ等、いつもお世話になっています。

ツリー化スクリプト for Serene Bachをカテゴリーリストの欄で使用させて頂いているのですが、
ツリーの最後の部分が、正しく表示されるところと、されないところがあるのです。

<dd>要素に<li>要素をムリヤリ詰めてしまっているからかもしれないのですが、修正の仕方がわからないので、アドバイスをお願いしたいと思いまして、コメントさせて頂きました。

不都合がないようでしたら、よろしくお願いいたします。

[28] Posted by anniemilk : July 14, 2006 12:32 AM

>anniemilkさん
こんばんは。
ご利用ありがとうございます。
ご質問の件ですが、サブカテゴリーリストの中に中身が空の ul タグが混じっていて、それが表示に不具合を及ぼしているようです(ソースを拝借して、それらを取り除くと正常に表示されました。)。
「空の ul タグ」の原因は当方では不明ですが、HTMLソースを拝見させて頂いた限りでは、LIVE/music/film/book のサブカテゴリーにあたる部分(実体は何もありません)にそれらが表示されています。
カテゴリー・サブカテゴリーの設定で何か思い当たる点はないでしょうか。

なお dd の中に ul - li が含まれることについては問題ありません。
それではよろしくお願い致します。

[29] Posted by yujiro : July 14, 2006 2:02 AM

yujiro様。

すばやいご返答、本当にありがとうございました。
自分でも確認してみたところ、ソース表示をすると、空のULタグがありました。

思い当たる節といえば、misic/film/book では、さらに非表示設定にしてあるサブカテゴリがあるので、そのせいかと思いました。

しかし、LIVEのカテゴリに関しては、その配下にサブカテゴリを設けていないので、原因がやはりわかりませんでした。

そこでツリー化は諦め、開閉式のプルダウンするプラグインを使わせて頂くことにしました。

ツリー化と同様、あたかも更にサブカテゴリがあるみたいに、misic/film/book/LIVEカテゴリのところに、三角マークが表示されましたが、このプラグインでは、どこを開閉式にするか選べるので、とても便利です。それによって対応させていただきました。


では、お手数をおかけしてすみませんでした。
これからもよろしくお願い致します。

[30] Posted by anniemilk : July 14, 2006 9:57 PM

>anniemilkさん
こんばんは。
ご連絡ありがとうございました。
もう少し調べてみたところ、空の ul タグが存在すると maketree.js がスクリプトエラーになっており、対処した結果ツリーが正常に表示されるようになりました。
お時間がありましたらスクリプトのページから maketree.js 1.06 をダウンロードしてお試しください。
多分折りたたみとの併用も可能だと思います。

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

[31] Posted by yujiro : July 16, 2006 1:14 AM

たびたびすみません^^;

yujiroさんのテンプレートをお借りして
Blogを作っているのですが・・・

サイドメニューのツリー化スクリプト for Serene Bach
の設定通りしましたが・・・
linkの所だけ表示がおかしく直せ無いのです(´・ω・`)ションボリ

お時間がある時にご助言お願いしますm(__)m

[32] Posted by キスティス : December 15, 2006 6:22 PM

>キスティスさん
こんばんは。
リンクリストはツリーが二重になっているので、

generateNormalTree("linklist");

の部分を

generateTreeForTreeStructure("linklist");

としてください。
それではよろしくお願い致します。

[33] Posted by yujiro : December 17, 2006 9:35 PM

yujiroさん

ご助言ありがとうございました^^
希望通りの動作となりました♪

また何かございましたらお願い致しますm(__)m

[34] Posted by キスティス : December 17, 2006 10:59 PM

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

[35] Posted by yujiro : December 18, 2006 12:48 AM

初めまして。こちらのツリー化スクリプトを導入させてもらいました。

表示はきれいにされるのですが、カテゴリーをクリックした場合にしかツリーが出現してくれません…。TOPやプロフィールをクリックすると、こつ然と姿を消してしまいます。

ほぼ初心者ですので、どうしたらいいかも分からず…。何かアドバイスがありましたらお願いできないでしょうか。お忙しい所申し訳ありませんが、よろしくお願いします。

[36] Posted by chikochiko : December 27, 2006 8:27 PM

>chikochikoさん
はじめまして。
ご質問の件ですが、動作を確認しないと適切が回答ができないため、とりあえずURLをご連絡ください。
それではよろしくお願い致します。

[37] Posted by yujiro : December 27, 2006 8:43 PM

お手数をおかけして申し訳ありません。
諸事情により、サイトのURL等はメールにて送らせてもらいました。

すみませんがよろしくお願いします。

[38] Posted by chikochiko : December 27, 2006 9:24 PM

メールわざわざありがとうございました。

画像のURLをhttp://から指定するだけだったんですね…。
こんな単純な事だったなんて、試さなかった自分が情けないです。
今度から気を付けたいと思います。

無事に表示されました。本当にありがとうございました。

[39] Posted by chikochiko : December 28, 2006 12:31 AM

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

[40] Posted by yujiro : December 28, 2006 7:23 PM

yujiroさんこんばんは。
絵文字の件では大変お世話になりました。
今頃ですが、こちらも使わせていただきたく設定させていただきました。
カテゴリーのプルダウンはプラグインなので私でもすぐに導入できました。
こちらのツリー化でカテゴリーの親記事から
子記事に画像を使ってツリー化をしたかったんですが
画像が出ません。前から画像だけ出なくて
実際には子記事が少し親記事より空白があったので
ツリーカになっていたのかもしれませんが
いつからなのか?解からず、こちらのを使わせていただき、カテゴリー画像でツリー表示をと試みました。
あつかましいお願いですがお時間あるときにお力お貸し下さい、お願いします。

[41] Posted by yumi : February 5, 2007 7:06 PM

>yumiさん
こんにちは。
ご質問の件ですが、ツリー化用のスクリプトファイル

http://kerokerokaeru.chips.jp/cgi/days/maketree.js

が 404 Not Found になっていますのでファイルがきちんと配置されていることをご確認ください。
それではよろしくお願い致します。

[42] Posted by yujiro : February 6, 2007 2:33 PM

yujiroさんこんにちは。
自分で説明通りにやっているつもりでも、
指摘していただいて、初めて気が付くなんて
本当に申し訳ありません。
maketree.jsアップロードされていませんでした。
配置した時点でツリー画像が出るようになったのですが、
親カテから子カテに画像が表示されてなかったり、
子カテじゃないのに同じ親カテから画像が表示
されたりしています。
たびたび申し訳ありませんがよろしくお願いいたします。

[43] Posted by yumi : February 6, 2007 4:04 PM

>yumiさん
こんにちは。
ご質問の件ですが、まず前提として、

A.ツリー化を行っているのは、コメントリストとサブカテゴリーリストの2つ。
B.それぞれのリストは、

を元にカスタマイズ。

上記の前提でよろしければ、下記の修正を行ってください。

1.テンプレートの maketree.js をインクルードしている script タグを </head > の前に移動(meta タグの前に記述しないのが一般的です)

2.スタイルシートに全角空白が含まれている行が何箇所かありますので、全て半角空白に置き換えるか、あるいは全角空白を削除してください(全角空白があると、ブラウザによっては CSS が正しく解釈されません)。

3.異なるツリー化カスタマイズを同時に行われているので、maketree.js は「Serene Bach で異なるツリー化カスタマイズを同時に利用する」を参考に修正してください。
#修正前と修正後で文字コードが変わらないように気をつけてください(参考:「ファイルの文字コードを簡単に変更する方法」)。

4.異なるツリー化カスタマイズを同時に行われているので、スタイルシートのツリー化用の設定は下記の内容に置き換えてください(これはサービスです)。

ul.tree li.lst {
    list-style-type:none;
    padding: 0px 0px 0px 20px;
    background-image: url(http://kerokerokaeru.chips.jp/cgi/days/03arrow7.gif);
    background-repeat: no-repeat;
}
ul.tree li.end {
    list-style-type:none;
    padding: 0px 0px 0px 20px;
    background-image: url(http://kerokerokaeru.chips.jp/cgi/days/03arrow7.gif);
    background-repeat: no-repeat;
}
ul.tree2 {
    margin: 0px;
    padding: 0px;
    font-size: 9px;
    list-style: none;
}
ul.tree2 ul {
    margin: 0px;
    padding: 0px;
}
ul.tree2 li {
    margin: 0px;
    padding: 0px 0px 0px 10px;
    background-image: url(http://kerokerokaeru.chips.jp/cgi/days/03arrow7.gif);
    background-position: 0 0;
    background-repeat: no-repeat;
    list-style: none;
}
ul.tree2 li.end {
    background-image: url(http://kerokerokaeru.chips.jp/cgi/days/03arrow7.gif);
    list-style: none;
}

これで正常に表示されると思います。
それではよろしくお願い致します。

[44] Posted by yujiro : February 6, 2007 6:03 PM

yujiroさん、何度もありがとうございます。
1、script タグを &lt;/head &gt;の直前に変えました。
2、全角の空白も検索して削除しました。
3、maketree.js もtreeの部分6箇所tree2にしました。
4、cssも書いてくださったものを入れました。

これまでの設定で、サブカテゴリーにもツリー化
画像が出るようになりました。
しかし、サブカテゴリーもないただの親カテゴリーにもツリー画像が表示されます。
どこが悪いのでしょうか?
お忙しい中、申し訳ありません。

[45] Posted by yumi : February 6, 2007 8:18 PM

>yumiさん
こんばんは。
ご質問の件ですが、「カテゴリーのプルダウン化プラグイン for Serene Bach」をツリー化した場合、親カテゴリーにもツリーが表示される仕様になっています(元エントリーのスクリーンショットを参照ください)。

ということで、悪い訳ではなく仕様なのですが、もしかしたら CSS で制御できるかもしれません。しばらくお時間ください。

[46] Posted by yujiro : February 8, 2007 12:19 AM

yujiro さん、おはようございます。
ご解答ありがとうございます。
親カテゴリーの前に付く画像は仕様なんですね。
使っている画像がまっすぐの点線ならもっとすっきり
表示できるのかもしれないですね。
「CSS で制御」出来るのなら、私としてもとっても
うれしい事ですが、
プルダウン化を優先するかツリー化を優先するか、
こちらで色々勉強させていただきながら考えたいと思います。
こちらで色々教えていただき、自分で解決できなかった私にとって
とっても有り難く思っていました。
これからもまたよろしくお願いします。

[47] Posted by yumi : February 10, 2007 9:39 AM

>yumiさん
こんばんは。
CSSを変更すれば可能なようです。近々エントリーしたいと思いますのでよろしければご覧ください。
ではでは!

[48] Posted by yujiro : February 11, 2007 11:50 PM

yujiroさん、いつもお世話になってます。
今回ツリー化をしてみたのですが、
全く変わってくれません・・・

どこが間違ってるのかが全くわからないので、
お時間のある時にでも見ていただけませんか?

あつかましいお願いで申し訳ないです・・・。

[49] Posted by ワカ : March 6, 2007 9:57 AM

>ワカさん
こんにちは。
お世話になります。
ご質問の件につきまして、「Serene Bach で異なるツリー化カスタマイズを同時に利用する」の内容を適用されているようですが、記事の1項で書き換えた maketree.js が文字化けしているようです(Firefox でmaketree.js をURL指定してごらんになると状況がお分かりになると思います)ので、その点に注意して再度トライしてみてください。
文字化けの原因が分からない場合は maketree.js の日本語のコメントをすべて削除しても結構です。
解消しないようでしたら再度ご連絡ください。
それではよろしくお願い致します。

[50] Posted by yujiro : March 8, 2007 1:39 PM

yujiroさん、ありがとうございます!!
ツリー化ができました!!

でも、ここでいいのか分からないのですが、
『サブカテゴリーリストのツリー画像で親カテゴリーのみ異なる画像を表示する』
のエントリーをしてみて、画像はちゃんと表示されるんですが、tree_end.gifが使われないと言うか・・・
うまく言えないんですが、こちらのサイトのように綺麗にツリーが出来ません・・・。
質問ばかりで申し訳ないですが、時間があるときにでも教えていただけないでしょうか?

[51] Posted by ワカ : March 8, 2007 3:34 PM

・・・すみません。

自分で何とかしてみたら出来ました。

[52] Posted by ワカ : March 8, 2007 5:54 PM

>ワカさん
こんばんは。
ご連絡ありがとうございました。
自己解決されたようでなによりです。
ではでは!

[53] Posted by yujiro : March 9, 2007 1:52 AM

いつもお世話になってます。問題発生しました;;
コメントのところなんですが,うまくツリー化ができません。
 エントリー?
  コメント?
  コメント?
  コメント?
 エントリー?
  コメント?
としたいところを
 エントリー?
 コメント?
 コメント?
 コメント?
 エントリー?
 コメント?
となってしまいます。トラックバックも同じような感じじゃないかと思います。(トラックバックは今のところないのでわかりません)
ソースではきちんと表示されています。
あと,otherというメニューにjavascriptがないにもかかわらず,ul と li を用いたリスト形式になっているせいか罫線みたいなの(っていうか点です)が表示されてしまいます。これをなくさせる事はできるのでしょうか。長くなりましたが,よろしくお願いします。

 

[54] Posted by kana : March 27, 2007 11:51 AM

>kanaさん
こんばんは。
ご返事遅くなって申し訳ありません。
テンプレート当サイトのものに替えて頂いたようで大変恐縮です。
なお「Archives」と「Links」のツリーを起動するところは、それぞれ

<script type="text/javascript">
<!--
generateTreeForTreeStructure("monthlylist");
//-->
</script>
   :
<script type="text/javascript">
<!--
generateTreeForTreeStructure("linklist");
//-->
</script>

とすると余分なツリーが表示されなくなります。
またなにかございましたらご連絡ください。
ではでは!

[55] Posted by yujiro : April 1, 2007 1:18 AM

いえいえこちらこそいつもお世話になりっぱなしですいません。
無事に余計な部分が表示されなくなりました。
また何かありましたら,よろしくお願いします。

[56] Posted by kana : April 3, 2007 2:31 PM

初めまして。こちらのツリー化スクリプトを利用しようとしたのですが、
サイトで利用しているテンプレートが「宵間書房」さんの
『twinkle_liquid(いろいろカスタマイズ済)』でリスト形式が
ul・liではなくdl・dt・ddなため、エラーが連発しています。
上の方にも同じようなコメントがあったのですが、
そちらのサイトがリンク切れのため、途方に暮れている状態です。
お忙しいところ大変恐縮ですが、どこをどう直せばよいかご教授いただけないでしょうか?
ちなみに、こちらのPC環境はWinXP・IE6.0、
サーバーはロリポップ、Serene Bachのバージョンは2.17Rです。
どうかよろしくお願い致します。

[57] Posted by tsubuko : October 12, 2007 1:21 AM

>tsubukoさん
はじめまして。
ご利用ありがとうございます。
ご質問の件ですが、例えば「Latest Entries」であれば

<!-- BEGIN latest_entry -->
<dt class="sidetitle">Latest Entries</dt>
<dd class="side" id="entrylist">{latest_entry_list}</dd>
<!-- END latest_entry -->
 
<script type="text/javascript">
<!--
generateNormalTree("entrylist");
//-->
</script>

と読み替えてみてください。
不具合が解消しないようでしたら、お手数ですが再度ご連絡頂けますでしょうか。
それではよろしくお願い致します。

[58] Posted by yujiro : October 20, 2007 3:51 AM

こんばんは。レスありがとうございます。ご提示されたようにやってみました。
エラーはなくなりましたが、gif画像が反映されておらず、
ツリー化したい部分の左側の余白がスクリプトを利用する前の状態より空いた、という状況です。
スタイルシートはこちらで紹介されている通りに追加したのですが、
タグの都合上「.tree」が組み込めないので他に何か方法があれば、と思います。
また、カテゴリー部分はこの場合どのように変更すればよいのでしょうか?
お忙しいところ大変申し訳ないのですが、教えていただけたら幸いです。
どうぞよろしくお願い致します。

[59] Posted by tsubuko : October 21, 2007 3:23 PM

>tsubukoさん
こんばんは。
ご質問の件ですが、「タグの都合上「.tree」が組み込めない」ですが、現状どのようなマークアップになっており、組み込めない理由を教えて頂けますでしょうか。
また、カテゴリーリストは「JavaScript 不要なサイドメニューのツリー化 for Movable Type」が参考になれば幸いです。
それではよろしくお願い致します。

[60] Posted by yujiro : October 21, 2007 11:45 PM

こんばんは。お返事ありがとうございます。
説明がまずかったですね…申し訳ありません。

>タグの都合上「.tree」が組み込めない

というのはもともとのテンプレートがdl・dt・ddで構成されており、ulがテンプレート上では記載されていないので、この場合どの部分に「ul.tree」等を加えればよいのかということをご質問したかったのです。
一応テンプレートの一部を記しておきます。

    ・
    ・
   (略)
    ・
    ・
<!-- BEGIN category -->
<dl class="category">
<dt id="categoryname">CATEGORIES</dt>
<dd id="categorylist">
<div id="categories">{category_list}</div>
</dd>
</dl>
<!-- END category -->

<script type="text/javascript">
<!--
generateSubcategoryTree();
//-->
</script>
    ・
    ・
   (略)
    ・
    ・
<!-- BEGIN link -->
<dl class="link">
<dt id="linkname">LINKS</dt>
<dd id="linklist">{link_list}</dd>
</dl>
<!-- END link -->

<script type="text/javascript">
<!--
generateNormalTree("linklist");
//-->
</script>
    ・
    ・
   (略)
    ・
    ・

以上です。たびたび申し訳ありませんが、ご教授いただければと思います。
よろしくお願い致します。

[61] Posted by tsubuko : October 22, 2007 8:00 PM

>tsubukoさん
こんにちは。
ご連絡ありがとうございました。
上記のマークアップであればカスタマイズ内容を変更する必要はありません。
(ul は独自タグ{・・・}で展開された部分に表示されるものです)

確認したところ、ツリー画像が(両方とも)CSSで指定したURLにアップロードされていないようです。
それではよろしくお願い致します。

[62] Posted by yujiro : October 23, 2007 1:15 PM

こんばんは。レスありがとうございました。
ご回答の通りツリー画像について調べてみたところ、CSS該当部分の画像名を間違えていたことがわかり、修正したところ無事画像が表示されました。
単純なミスでコメント欄を汚してしまい、申し訳ありませんでした。
つたない質問にも関わらず丁寧かつわかりやすくお答えいただき、本当にありがとうございました。

[63] Posted by tsubuko : October 24, 2007 12:11 AM

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

[64] Posted by yujiro : October 25, 2007 1:46 PM

こんばんは、教えてください。
カテゴリーでツリー化をしています。

tree_lst.gifを使用すると
カテゴリーの一番上の横の画像が
「L」の形になってしまいますよね。

これを「┌」っという画像に指定する事はできますか?
サブカテゴリーはもちろん「L」がいいんですが。

現在は、liと endの部分の指定だけですが
もう一つ、指定したいんです。

[65] Posted by もみ : April 26, 2008 12:24 AM

こんにちは。
エントリーリストをツリー化しようと、
試しに上記スクリプトをそのままコピペで設置してみたのですが、
日付ごとにリスト化されず・・・
リスト画像は表示されるものの、
通常と変わらず新規記事→古い記事がリスト表示さけただけでした。
他にツリー化のスクリプトは使用していません。
そのままコピペしたたけで何も手を加えていないので、原因がわかりません。
解決方法を教えて頂けますでしょうか。よろしくお願い致します。

[66] Posted by ponko : August 4, 2008 1:50 PM

>ponkoさん
こんにちは。
ご質問の件ですが、文言だけでは適切な回答ができないので、不具合の発生しているページのURLをご連絡頂けますでしょうか。
それではよろしくお願い致します。

[67] Posted by yujiro : August 5, 2008 10:21 AM

yujiroさん、こんばんは。
JUGEMのツリー化スクリプトを使って、
エントリーリストを日付別にリスト化できました。
お騒がせしてスミマセン!
ただ、新たに問題が出てきてしまったので、
別に質問させて頂きたいと思います。

[68] Posted by ponko : August 5, 2008 8:36 PM
コメントする
greeting

*必須



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

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

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

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

Now loading...
Introduction
Entry Trackbacks
サイドメニューのツリー化
 [てぃあら] 01/24 06:38
nwxce
 [nwxce] 11/08 13:36
weblogカスタマイズ2・小粋空間さんより
 [おかち日和] 01/16 17:24
頑張ってツリー化をやってみた☆その1
 [*day after day...*] 03/27 15:21
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

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

loading ...
Categories
Monthly Archives
BlogPeople
Syndicate this site
FeedBurner(RSS1.0/RSS2.0/Atom)
Counter
これまでのアクセス
クリエイティブ・コモンズ・ライセンス
Powered by
Movable Type 5.02