サイドメニューのツリー化スクリプト for Serene Bach
Movable Type 用に公開しているサイドメニューのツリー化スクリプト(改)をSerene Bach / sb で適用する方法です。
なお当サイトで公開しているツリー化スクリプトを適用すると、ツリーがきれいにつながって表示されないという情報を頂いておりますので、その点に関しましては8項を参照ください。
注:本カスタマイズと「JavaScript 不要なサイドメニューのツリー化 for Serene Bach」を同時に利用する場合は、「Serene Bach で異なるツリー化カスタマイズを同時に利用する」の設定を行ってください。
1.maketree.js ダウンロード
下記のリンクをクリックしてスクリプトのページへジャンプしてください。そこで maketree.js をクリックし、同じファイル名でご自身のPCに保存してください。
本スクリプトは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つの画像がありますのでご注意ください。
保存方法は、(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」を同時に利用する場合の注意書きを追加しました。
- Serene Bach で異なるツリー化カスタマイズを同時に利用する
- JavaScript 不要なサイドメニューのツリー化 for Serene Bach
- 罫線つきのカテゴリーリストにツリー化スクリプトを適用する
- ツリー化スクリプト不具合対処(Serene Bach / sb)
≫ サイドメニューのツリー化 from てぃあら
昨日 に引き続き、気になってた「サイドメニューのツリー化」を導入。 ⇒ 小粋空間 : サイドメニューのツリー化スクリプト(改)( ̄-  ̄ ) ンー... [続きを読む]
≫ weblogカスタマイズ2・小粋空間さんより from おかち日和
SereneBachでウェブログを新しく作るにあたり、たくさんの技をお借りしました。 [続きを読む]
≫ 頑張ってツリー化をやってみた☆その1 from *day after day...*
サイドメニューをツリー化してみようと思い,いつもお世話になっている小粋空間さまのサイドメニューのツリー化スクリプト for Serene Bachを参考... [続きを読む]
w(°o°)w おおっ!!ありがとうございますぅ???。
ちゃんとツリーがつながりましたぁ。
あと、サブカテゴリも 変だったんだけど、まともなツリーになりました。
ヽ(*^。^*)ノ ワ?イ エントリに追記してトラックバックさせていただきますね。
>さえらさん
こんばんは。
早々のご利用&トラックバック、ありがとうございます。
うまくできたようでよかったです。
カスタマイズも進行していますね!
(・Ω・)ノ コンニチワー
今日になって、ていうか ついさっき気が付いたんですけど、
サブカテゴリの部分のツリー、トップページは いい感じなんですが
エントリアーカイブで、なんか変なことになってます。
カテゴリアーカイブや 日付アーカイブは トップページと同じように
素敵なツリーになってるんですけど・・・どうしてでしょう?
ツリー化スクリプト、利用させていただいています。
カテゴリーはちゃんとツリー化されていますが、最近のコメントとトラックバックがツリー化できません。
ツリーの画像は表示されています。
どこを間違えているのでしょうか。
お久しぶりです。
ツリー化スクリプト、早速利用させて頂きました。
MTからSBに移行して以来、カテゴリーリストをツリー化したいと思っていたのでとても嬉しいです。
有難う御座いました!
>さえらさん
こんばんは。
スクリプト、修正版に差し替えました。
情報ありがとうございました!
>たまさん
こんばんは。
ご利用ありがとうございます。
こちらから拝見させて頂く限り、表示されているようです(解決済でしたらご容赦ください)。
なお、「⇒」についてはツリー化できませんので併せてご了承ください。
>Takaさん
こんばんは。
ご無沙汰しております。
スクリプトご利用ありがとうございます。
気に入って頂けてよかったです。
おはようございます。
管理画面の 「環境設定」 ⇒ 「環境設定」 ⇒ 「保存形式」 で
「個別エントリをhtml保存」 にしていると、エントリアーカイブで
ツリーの表示がおかしくなってしまうんです。
「保存形式」 を 「トップページのみ html生成」 にすると
エントリアーカイブの url は sb.cgi?eid=○○ となって、
この状態だと ほかのページ同様 ツリーが きれいに表示されますが
みなさん、結構 「個別エントリをhtml保存」 に されているようで、
できたら .html の状態でも サブカテゴリが うまく ツリーになれば・・・と思うのですが。。。
「⇒」の表示を変えられると思っていたので、ツリー化されていないと思ってしまっていました。
さっそくの回答、ありがとうございました。
>さえらさん
こちらのコメントにつきましては解消済ということで。
>たまさん
こんにちは。
ご連絡ありがとうございます。
「⇒」は改行タグの後に表示しているだけで、タグの構造上変換が面倒というのもありますが、コメントやトラックバックについてはエントリーごとにまとめて表示するプラグインを適用して、その後ツリー化する方がすっきりすると思います。
このエントリーではそこまでサポートできておりませんがまた機会をみてエントリーしたいと思います。
おはようございます。
SBいじり初心者のここちと申します。
私のお借りしているテンプレートが
dl/dt/dd で記されていまして、どこをどの様に
いじったらいいのかわからずにおります・・・。
カテゴリーとリンク部分をツリー化したいのですが、
よろしければお知恵をお貸しいただければと思います。
どうぞよろしくお願いします。。。
>ここちさん
こんにちは。
カテゴリーとリンクのタグが dl/dt/dd を利用して具体的にどのような構造になっているかを知りたいので、サイトのURLまたはご利用になっているテンプレートサイト(およびテンプレート名)をお知らせ頂けますでしょうか。
サイトURLをご連絡頂けた方が当方の作業がスムーズに行えますので有り難いです。
なお本スクリプトは現在のところ ul/li にしか対応していないため改造してみます。
以上です。
それではよろしくお願い致します。
こんばんは。早速のご回答ありがとうございます。゚(゚´Д`゚)゚。
テンプレートをお借りしているのはblog TK*Plus1様の「Leaf of Pumila Ver1.01
」です。サイトの方は、わたしがめちゃくちゃにいじくってしまっていまして、とても見にくい物になってしまっているのでお恥ずかしい次第です。。。
お忙しい中本当にお手数かけますがどうぞよろしくお願いします!!
>ここちさん
こんばんは。
サイト、拝見させて頂きました。
ご連絡ありがとうございます。
サイドメニューにカテゴリーがみつからなかったので、「リンク」の部分だけ修正内容をお知らせいたします。
その前に、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のままで問題ありません。
以上です。
それではよろしくお願い致します。
yujiro 様 こんばんは(*゚ー゚)
早速ご指摘いただきました通りやってみたところ・・・
見事ツリー化されましたヽ(τωヽ)ノ ←嬉し泣きです。
あれこれ悩んでた半日が嘘の様に・・・5分で完了です!
本当に本当にありがとうございました!
これからもこちらでちょこっとずつお勉強しながらカスタマイズしていきたいです♪
お忙しい中、ご質問にお答えいただきましてありがとうございました。
これからもがんばって下さい!!
>ここちさん
こんにちは。
うまくできたようで、良かったです。
お疲れ様でした。
また何かありましたらご連絡ください。
ではでは!
おはようございます!
先日はお世話になりました(*゚ー゚)
あれから少しずつですが、何とか初心者なりにいじっているんですが、どうしてもまたわからない所があったので、お尋ねに来ました。。。リンク部分にプルダウンとツリーを使ってるのですが
よくみると文字が全体的に(リンク部分のみ)右寄りになってしまっていて、本当に少しなんですがツリーがずれてしまっているようなんです。。。
プルダウンの方は自分で適当にやってしまったので、
もしかしたらそのやり方がもしかしてマズかったかな・・・と色々考えたんですが、結局わからずじまいで・・・
もしよろしかったらまたお知恵をお貸しいただければと思います;;
本当にお忙しい中、申し訳ありません。
こんにちは!
プルダウンのプラグインとツリー化を参考にさせていただきました!
そこでアドバイスいただきたいのですが、プルダウン・ツリーの表示はちゃんとできたものの、サイドバーの、かけ線が表示される所と されない所がでてきました。
blog*citron様の桜テンプレートを使っているのですが、CSSもblog*citron様でやる場合のようにやったのですが、かけ線だけが表示されなくなりまして(TдT)
どこか間違っている所があればアドバイスいただきたいのですが(m*_ _)mペコ
>ここちさん
こんにちは。
ご利用ありがとうございます。
ご質問の件ですがスタイルシートに設定された下記の赤色部分の値を小さくすればリンク文字が左に移動します。
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」)の左に表示されているツリーに罫線が重なって表示されない
- 親カテゴリーのすぐ下に罫線が表示されない
のいずれでしょうか。すいませんが再度ご連絡ください。
お忙しい中お返事ありがとうございます。
かけ線が表示されないのは、今使ってるテンプレートはサイドバーに、かけ線が表示されるものなのですが、親カテゴリーでも表示される所と、されないところがあるんです。
CSSでの設定だとは思うのですが、サイドバーのコメントの所が表示されてなかったり、サイドバーのエントリー部分は表示されてたりと…バラバラに表示されるようになってしまいました。
カテゴリーの背景の かけ線は表示されています。
yujiro 様こんばんは(*゚ー゚)
早速のお返事どうもありがとうございました。
そこの部分の数値を変える、とツリーバーと一緒に文字が左に寄るのは理解していたのですが、全体的にLinksの部分だけ文字が右よりになっていたので、ちょっと気になっていたのですが、(私のいじり方がおかしいのかと気になって(´ヘ`;)・・・)特に問題なさそうなので、ご指摘いただいた通り、12pxにして使ってみようと思います。
お忙しい中アドバイスありがとうございました♪
>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に「修正」というキーワードで括ってますのでそちらを参照ください(おおざっぱな説明ですので修正方法に不明な点がございましたら再度ご連絡ください)。
以上です。
それではどうぞよろしくお願い致します。
>ここちさん
こんにちは。
ご連絡ありがとうございました。
またなにかございましたらご連絡ください。
ではでは!
yujiro様、ご丁寧なお返事ありがとうございます!
おかげで かけ線も表示されるようになり
表示もちゃんとなりました(TдT)
CSSもダウンロードさせていただきました!
心から感謝いたします。ありがとうございます!今回の修正されている部分もちゃんと自分で勉強して、これから質問も無いようにやっていきたいと思います!ありがとうございました!
>acoさん
こんにちは。
ご連絡ありがとうございました。
うまく表示できるようになってよかったです。
このカスタマイズ方法はまた改めてエントリーしたいと思っています。私自身いい勉強になりました。
ではでは!
はじめまして、グリフと申します。
以前からこの「サイドメニューのツリー化スクリプト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
>グリフさん
はじめまして。
ご利用ありがとうございます。
ご質問の件ですが、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エラーが表示されました)。
それではよろしくお願い致します。
>yujiro殿
早速の回答ありがとうございます。
おかげさまでIEではエラーが出なくなりました。
表面上(IEエラー検出)には出ないスクリプトエラーがちょっと気になりますが…。
ありがとうございました!
>グリフさん
こんにちは。
ご連絡ありがとうございました。
エラーが解消してホッとしました。
ではでは!
こんにちは。
カスタマイズ等、いつもお世話になっています。
ツリー化スクリプト for Serene Bachをカテゴリーリストの欄で使用させて頂いているのですが、
ツリーの最後の部分が、正しく表示されるところと、されないところがあるのです。
<dd>要素に<li>要素をムリヤリ詰めてしまっているからかもしれないのですが、修正の仕方がわからないので、アドバイスをお願いしたいと思いまして、コメントさせて頂きました。
不都合がないようでしたら、よろしくお願いいたします。
>anniemilkさん
こんばんは。
ご利用ありがとうございます。
ご質問の件ですが、サブカテゴリーリストの中に中身が空の ul タグが混じっていて、それが表示に不具合を及ぼしているようです(ソースを拝借して、それらを取り除くと正常に表示されました。)。
「空の ul タグ」の原因は当方では不明ですが、HTMLソースを拝見させて頂いた限りでは、LIVE/music/film/book のサブカテゴリーにあたる部分(実体は何もありません)にそれらが表示されています。
カテゴリー・サブカテゴリーの設定で何か思い当たる点はないでしょうか。
なお dd の中に ul - li が含まれることについては問題ありません。
それではよろしくお願い致します。
yujiro様。
すばやいご返答、本当にありがとうございました。
自分でも確認してみたところ、ソース表示をすると、空のULタグがありました。
思い当たる節といえば、misic/film/book では、さらに非表示設定にしてあるサブカテゴリがあるので、そのせいかと思いました。
しかし、LIVEのカテゴリに関しては、その配下にサブカテゴリを設けていないので、原因がやはりわかりませんでした。
そこでツリー化は諦め、開閉式のプルダウンするプラグインを使わせて頂くことにしました。
ツリー化と同様、あたかも更にサブカテゴリがあるみたいに、misic/film/book/LIVEカテゴリのところに、三角マークが表示されましたが、このプラグインでは、どこを開閉式にするか選べるので、とても便利です。それによって対応させていただきました。
では、お手数をおかけしてすみませんでした。
これからもよろしくお願い致します。
>anniemilkさん
こんばんは。
ご連絡ありがとうございました。
もう少し調べてみたところ、空の ul タグが存在すると maketree.js がスクリプトエラーになっており、対処した結果ツリーが正常に表示されるようになりました。
お時間がありましたらスクリプトのページから maketree.js 1.06 をダウンロードしてお試しください。
多分折りたたみとの併用も可能だと思います。
それではよろしくお願い致します。
たびたびすみません^^;
yujiroさんのテンプレートをお借りして
Blogを作っているのですが・・・
サイドメニューのツリー化スクリプト for Serene Bach
の設定通りしましたが・・・
linkの所だけ表示がおかしく直せ無いのです(´・ω・`)ションボリ
お時間がある時にご助言お願いしますm(__)m
>キスティスさん
こんばんは。
リンクリストはツリーが二重になっているので、
generateNormalTree("linklist");
の部分を
generateTreeForTreeStructure("linklist");
としてください。
それではよろしくお願い致します。
yujiroさん
ご助言ありがとうございました^^
希望通りの動作となりました♪
また何かございましたらお願い致しますm(__)m
>キスティスさん
こんばんは。
ご連絡ありがとうございました。
無事に直ったようでよかったです。
ではでは!
初めまして。こちらのツリー化スクリプトを導入させてもらいました。
表示はきれいにされるのですが、カテゴリーをクリックした場合にしかツリーが出現してくれません…。TOPやプロフィールをクリックすると、こつ然と姿を消してしまいます。
ほぼ初心者ですので、どうしたらいいかも分からず…。何かアドバイスがありましたらお願いできないでしょうか。お忙しい所申し訳ありませんが、よろしくお願いします。
>chikochikoさん
はじめまして。
ご質問の件ですが、動作を確認しないと適切が回答ができないため、とりあえずURLをご連絡ください。
それではよろしくお願い致します。
お手数をおかけして申し訳ありません。
諸事情により、サイトのURL等はメールにて送らせてもらいました。
すみませんがよろしくお願いします。
メールわざわざありがとうございました。
画像のURLをhttp://から指定するだけだったんですね…。
こんな単純な事だったなんて、試さなかった自分が情けないです。
今度から気を付けたいと思います。
無事に表示されました。本当にありがとうございました。
>chikochikoさん
こんばんは。
ご連絡ありがとうございました。
無事に表示されたようでよかったです。
ではでは!
yujiroさんこんばんは。
絵文字の件では大変お世話になりました。
今頃ですが、こちらも使わせていただきたく設定させていただきました。
カテゴリーのプルダウンはプラグインなので私でもすぐに導入できました。
こちらのツリー化でカテゴリーの親記事から
子記事に画像を使ってツリー化をしたかったんですが
画像が出ません。前から画像だけ出なくて
実際には子記事が少し親記事より空白があったので
ツリーカになっていたのかもしれませんが
いつからなのか?解からず、こちらのを使わせていただき、カテゴリー画像でツリー表示をと試みました。
あつかましいお願いですがお時間あるときにお力お貸し下さい、お願いします。
>yumiさん
こんにちは。
ご質問の件ですが、ツリー化用のスクリプトファイル
http://kerokerokaeru.chips.jp/cgi/days/maketree.js
が 404 Not Found になっていますのでファイルがきちんと配置されていることをご確認ください。
それではよろしくお願い致します。
yujiroさんこんにちは。
自分で説明通りにやっているつもりでも、
指摘していただいて、初めて気が付くなんて
本当に申し訳ありません。
maketree.jsアップロードされていませんでした。
配置した時点でツリー画像が出るようになったのですが、
親カテから子カテに画像が表示されてなかったり、
子カテじゃないのに同じ親カテから画像が表示
されたりしています。
たびたび申し訳ありませんがよろしくお願いいたします。
>yumiさん
こんにちは。
ご質問の件ですが、まず前提として、
A.ツリー化を行っているのは、コメントリストとサブカテゴリーリストの2つ。
B.それぞれのリストは、
- コメントリスト:JavaScript 不要なサイドメニューのツリー化 for Serene Bachのカスタマイズ
- サブカテゴリーリスト:本エントリーのカスタマイズ
を元にカスタマイズ。
上記の前提でよろしければ、下記の修正を行ってください。
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;
}
これで正常に表示されると思います。
それではよろしくお願い致します。
yujiroさん、何度もありがとうございます。
1、script タグを &lt;/head &gt;の直前に変えました。
2、全角の空白も検索して削除しました。
3、maketree.js もtreeの部分6箇所tree2にしました。
4、cssも書いてくださったものを入れました。
これまでの設定で、サブカテゴリーにもツリー化
画像が出るようになりました。
しかし、サブカテゴリーもないただの親カテゴリーにもツリー画像が表示されます。
どこが悪いのでしょうか?
お忙しい中、申し訳ありません。
>yumiさん
こんばんは。
ご質問の件ですが、「カテゴリーのプルダウン化プラグイン for Serene Bach」をツリー化した場合、親カテゴリーにもツリーが表示される仕様になっています(元エントリーのスクリーンショットを参照ください)。
ということで、悪い訳ではなく仕様なのですが、もしかしたら CSS で制御できるかもしれません。しばらくお時間ください。
yujiro さん、おはようございます。
ご解答ありがとうございます。
親カテゴリーの前に付く画像は仕様なんですね。
使っている画像がまっすぐの点線ならもっとすっきり
表示できるのかもしれないですね。
「CSS で制御」出来るのなら、私としてもとっても
うれしい事ですが、
プルダウン化を優先するかツリー化を優先するか、
こちらで色々勉強させていただきながら考えたいと思います。
こちらで色々教えていただき、自分で解決できなかった私にとって
とっても有り難く思っていました。
これからもまたよろしくお願いします。
>yumiさん
こんばんは。
CSSを変更すれば可能なようです。近々エントリーしたいと思いますのでよろしければご覧ください。
ではでは!
yujiroさん、いつもお世話になってます。
今回ツリー化をしてみたのですが、
全く変わってくれません・・・
どこが間違ってるのかが全くわからないので、
お時間のある時にでも見ていただけませんか?
あつかましいお願いで申し訳ないです・・・。
>ワカさん
こんにちは。
お世話になります。
ご質問の件につきまして、「Serene Bach で異なるツリー化カスタマイズを同時に利用する」の内容を適用されているようですが、記事の1項で書き換えた maketree.js が文字化けしているようです(Firefox でmaketree.js をURL指定してごらんになると状況がお分かりになると思います)ので、その点に注意して再度トライしてみてください。
文字化けの原因が分からない場合は maketree.js の日本語のコメントをすべて削除しても結構です。
解消しないようでしたら再度ご連絡ください。
それではよろしくお願い致します。
yujiroさん、ありがとうございます!!
ツリー化ができました!!
でも、ここでいいのか分からないのですが、
『サブカテゴリーリストのツリー画像で親カテゴリーのみ異なる画像を表示する』
のエントリーをしてみて、画像はちゃんと表示されるんですが、tree_end.gifが使われないと言うか・・・
うまく言えないんですが、こちらのサイトのように綺麗にツリーが出来ません・・・。
質問ばかりで申し訳ないですが、時間があるときにでも教えていただけないでしょうか?
>ワカさん
こんばんは。
ご連絡ありがとうございました。
自己解決されたようでなによりです。
ではでは!
いつもお世話になってます。問題発生しました;;
コメントのところなんですが,うまくツリー化ができません。
エントリー?
コメント?
コメント?
コメント?
エントリー?
コメント?
としたいところを
エントリー?
コメント?
コメント?
コメント?
エントリー?
コメント?
となってしまいます。トラックバックも同じような感じじゃないかと思います。(トラックバックは今のところないのでわかりません)
ソースではきちんと表示されています。
あと,otherというメニューにjavascriptがないにもかかわらず,ul と li を用いたリスト形式になっているせいか罫線みたいなの(っていうか点です)が表示されてしまいます。これをなくさせる事はできるのでしょうか。長くなりましたが,よろしくお願いします。
>kanaさん
こんばんは。
ご返事遅くなって申し訳ありません。
テンプレート当サイトのものに替えて頂いたようで大変恐縮です。
なお「Archives」と「Links」のツリーを起動するところは、それぞれ
<script type="text/javascript">
<!--
generateTreeForTreeStructure("monthlylist");
//-->
</script>
:
<script type="text/javascript">
<!--
generateTreeForTreeStructure("linklist");
//-->
</script>
とすると余分なツリーが表示されなくなります。
またなにかございましたらご連絡ください。
ではでは!
いえいえこちらこそいつもお世話になりっぱなしですいません。
無事に余計な部分が表示されなくなりました。
また何かありましたら,よろしくお願いします。
初めまして。こちらのツリー化スクリプトを利用しようとしたのですが、
サイトで利用しているテンプレートが「宵間書房」さんの
『twinkle_liquid(いろいろカスタマイズ済)』でリスト形式が
ul・liではなくdl・dt・ddなため、エラーが連発しています。
上の方にも同じようなコメントがあったのですが、
そちらのサイトがリンク切れのため、途方に暮れている状態です。
お忙しいところ大変恐縮ですが、どこをどう直せばよいかご教授いただけないでしょうか?
ちなみに、こちらのPC環境はWinXP・IE6.0、
サーバーはロリポップ、Serene Bachのバージョンは2.17Rです。
どうかよろしくお願い致します。
>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>
と読み替えてみてください。
不具合が解消しないようでしたら、お手数ですが再度ご連絡頂けますでしょうか。
それではよろしくお願い致します。
こんばんは。レスありがとうございます。ご提示されたようにやってみました。
エラーはなくなりましたが、gif画像が反映されておらず、
ツリー化したい部分の左側の余白がスクリプトを利用する前の状態より空いた、という状況です。
スタイルシートはこちらで紹介されている通りに追加したのですが、
タグの都合上「.tree」が組み込めないので他に何か方法があれば、と思います。
また、カテゴリー部分はこの場合どのように変更すればよいのでしょうか?
お忙しいところ大変申し訳ないのですが、教えていただけたら幸いです。
どうぞよろしくお願い致します。
>tsubukoさん
こんばんは。
ご質問の件ですが、「タグの都合上「.tree」が組み込めない」ですが、現状どのようなマークアップになっており、組み込めない理由を教えて頂けますでしょうか。
また、カテゴリーリストは「JavaScript 不要なサイドメニューのツリー化 for Movable Type」が参考になれば幸いです。
それではよろしくお願い致します。
こんばんは。お返事ありがとうございます。
説明がまずかったですね…申し訳ありません。
>タグの都合上「.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>
・
・
(略)
・
・
以上です。たびたび申し訳ありませんが、ご教授いただければと思います。
よろしくお願い致します。
>tsubukoさん
こんにちは。
ご連絡ありがとうございました。
上記のマークアップであればカスタマイズ内容を変更する必要はありません。
(ul は独自タグ{・・・}で展開された部分に表示されるものです)
確認したところ、ツリー画像が(両方とも)CSSで指定したURLにアップロードされていないようです。
それではよろしくお願い致します。
こんばんは。レスありがとうございました。
ご回答の通りツリー画像について調べてみたところ、CSS該当部分の画像名を間違えていたことがわかり、修正したところ無事画像が表示されました。
単純なミスでコメント欄を汚してしまい、申し訳ありませんでした。
つたない質問にも関わらず丁寧かつわかりやすくお答えいただき、本当にありがとうございました。
>tsubukoさん
こんにちは。
ご連絡ありがとうございました。
無事に直ったようで良かったです。
ではでは!
こんばんは、教えてください。
カテゴリーでツリー化をしています。
tree_lst.gifを使用すると
カテゴリーの一番上の横の画像が
「L」の形になってしまいますよね。
これを「┌」っという画像に指定する事はできますか?
サブカテゴリーはもちろん「L」がいいんですが。
現在は、liと endの部分の指定だけですが
もう一つ、指定したいんです。
こんにちは。
エントリーリストをツリー化しようと、
試しに上記スクリプトをそのままコピペで設置してみたのですが、
日付ごとにリスト化されず・・・
リスト画像は表示されるものの、
通常と変わらず新規記事→古い記事がリスト表示さけただけでした。
他にツリー化のスクリプトは使用していません。
そのままコピペしたたけで何も手を加えていないので、原因がわかりません。
解決方法を教えて頂けますでしょうか。よろしくお願い致します。
>ponkoさん
こんにちは。
ご質問の件ですが、文言だけでは適切な回答ができないので、不具合の発生しているページのURLをご連絡頂けますでしょうか。
それではよろしくお願い致します。
yujiroさん、こんばんは。
JUGEMのツリー化スクリプトを使って、
エントリーリストを日付別にリスト化できました。
お騒がせしてスミマセン!
ただ、新たに問題が出てきてしまったので、
別に質問させて頂きたいと思います。