8月はさよならのララバイ（つかみ）
夏休みの自由研究”ツリー化のスクリプトのベース”のサポート期限（あってないようなものだが）なので、いったんまとめときます。あんまり需要なかったけど、DOMの基本は押さえたつもりなのでHTMLを書き換えるスクリプトの参考にもなるかも。
ulに変更className: .lastchildを付加エラー処理をほとんどしていないので、テンプレ依存度はかなり高いです。以後はこのページでサポートいたします。
< PHSじゃないよ（ついに） | 第一回ソムリエ版テンプレートコンテスト > | 表紙へ戻る |
さっそく、利用させてもらいましたv いやぁ〜苦労しました（汗）
ツリー化スクリプトVer,2を使いながらの導入だったので、UL、LIの画像設定や表示位置など
頭が痒くなりました（笑）でも何とか出来たようです(^^ゞ
スクリプトVer,2では出来なかった、コメントの個別リンクを付けられたので
とっても嬉しいですo(〃^▽^〃)oありがとうございました。
それから、コメント入力欄の下にある「使い方」の吹き出しのようなのナイスです（*＾.＾*）
前から気になっていたんですけど…と！ナゾかけてみる←これ方言かな？！-01日14時
＞でも何とか出来たようです(^^ゞ
カスタマのコツが解ってくると面白味が増しますよね。ダークサイド向きな性格かも。
＞前から気になっていたんですけど…と！ナゾかけてみる←これ方言かな？！
謎掛けといえば「その心は」ってやつを思い浮かべますけど、違う？
吹き出しは、CSS POPUPという結構昔からある技です。僕が参考にしたのはこちら。
→ http://www.meyerweb.com/eric/css/edge/popups/demo.html
エッセンスだけ上げときますね。ソースを直接読んでみてください。
→ http://blog2.fc2.com/s/sug/file/hover1.htm-01日19時
公式テンプレにこの神スクリプトを導入してみたいのですが、やっぱりライセンス的にはマズイ感じなのでしょうか？-02日15時
ライセンスフリーですから、ご自由に使ってください。
・ 一応、こちらで不定期で修正するかもしれませんので、いったんダウンロードしてください。
・ できることなら、不具合の報告はCHOU-FLEURさんを中継してもらえるとありがたいです。
2005-09-02 19:40に一部修正しました。
・ コメ/トラが0の場合は処理しない（新規で使われる人のため）
・ title属性「<%rcomment_etitle>」へのコメント の部分は固定（記事タイトル内に鍵括弧が使えるように）
その他、実装に際して気付かれた点がありましたら、報告してください。
＞神スクリプト
あと、冷静な判断をしてください（笑-02日19時
ｷﾀ━━━━(ﾟ∀ﾟ)━━━━ｯ!!
やっぱり神スクリプトです。
早速、ツリー化してみました。いいですねコレ。
不具合報告は春木屋を見て、ウチとフォーラムであげておきますね。-03日11時
ナイスなスクリプトをどうもです。-03日11時
＞最後の項目liにclassName: .lastchildが設定されます。
コレなんの説明もないのに、意図した通りに使われていて感動しました。
追伸：CFDNにコメントしようとしたのですが、まだ改装中？-04日11時
現在はコメント投稿出来ます。失礼しました。
>コレなんの説明もないのに、意図した通りに使われていて感動しました。
最初、試したところ意図しない表示になったので、勝手に脳内で補完させていただきました。
あんな感じに仕上がりましたけど、どうでしょうか？
DOM実行後の脳内予想図
<ul>
<li>
<ul class="tree">
<li>aaa</li>
<li class="lastchild">bbb</li>
</ul>
</li>
</ul>-04日15時
Firefoxだと書き出された部分を選択して、右クリック→選択した部分のソースを表示(E) で読むことができます。改行コードが入ってないので読みにくいですが、参考まで。
＞現在はコメント投稿出来ます。
了解しました。秘密のコメントしときます（笑-04日16時
早速試してみます！！-04日16時
その方はFirefoxを普段は使っていて、そちらでは問題ないようです。ちなみに今のべーじゅのこころもツリーになっていないそうです。なんだかよくわかっていない状態で使わせていただいているので、どこか間違ってるんでしょうね(T.T)
お手上げなので、お暇なときに見てやって頂けますか？-05日00時
そちらのツリー化は「└」の表示にcontentプロパティを使って表示しているようです。
contentプロパティはIEでは対応していないので、通常のリスト表示になってしまいます。
確実なのは画像を使って背景に指定し、paddingで余白を空けてみるといいと思います。
一応、こんな感じで。
http://cfdn.blog1.fc2.com/-05日01時
わざわざありがとうございました。
そうだったんですか！マック版の腐ったIEで普通に表示されているので、そんなこととは夢にも思いませんでした。
早速画像を作るところから始めたいと思います。CHOU-FLEURさんのサイトを参考にさせていただきやり直してみます。
ウチのブログにもわざわざコメントありがとうございました。-05日02時
ところが今度は外部化するとIEではダメなんですよ。Winではどうかわからないのですが、CHOU-FLEURさんのところもツリーになっていませんでした。
sugさんのサンプルは一応ツリーにはなっているのですが、なぜかセンタリング（涙）
やっぱりIEはアホだと再確認なんですが、Winでも同じ状況だと困るので経過報告です。
とりあえず外部化をやめておきます。
追伸：
sugarさんところは外部でもツリーになってました。（記号は表示されてなかったですけど）
何が違うんだろ？だんだんお馬鹿なヒトの気分になってきました(T.T)-05日19時
うちはWinIE6で確認していますが、リスト化されてますけど。-05日19時
MacIEでは、Chakoさんがおっしゃるように、sugさんのサンプルはセンタリングだし、CHOU-FLEURさんところはリストになってません。まぁ、MacIEだし……＞CHOU-FLEURさん
うちのスクリプトとここに上がっているスクリプトは若干違うみたいです＞Chakoさん-05日20時
順番にいきます。
＞Win2000のIEでツリーになっていないというお知らせを頂いたのですが、
記事タイトル、コメント個別リンクが書き出されない、ということではないようですね？
やっぱりツリーというからには、あのラインが無いとまずいんでしょうか。色々と微妙な問題アリかと思って木構造を作るのと見映えは分離したのです。装飾は使う人まかせということで（殴
具体的な装飾の仕方は、CHOU-FLEURさんの方法がクロスブラウザだと思います。フォローありがとうございました。
＞外部化するとIEではダメなんですよ。Winではどうかわからないのですが、CHOU-FLEURさんのところもツリーになっていませんでした。
＞sugさんのサンプルは一応ツリーにはなっているのですが、なぜかセンタリング（涙）
＞sugarさんところは外部でもツリーになってました。
この３つはMacIEの表示ですよね？
想像で書きますが、
1番目の原因は、”url()内で引用符を使用したURI指定を認識しない”
→ http://cssbug.at.infoseek.co.jp/detail/macie/b047.html
多分解決法は
background-image: url(画像アドレス); ← のようにシングルもダブルもクォーテーションは無し
かと思われます。（なにぶんMacIEを持ってないので確かめようがないのですが）
2番目は、”marginプロパティで値を一括指定すると無視される”
→ http://cssbug.at.infoseek.co.jp/detail/macie/b022.html
実際に一括指定なので、このコメント後に修正してみます。
3番目は、sugarさんのスタイルはcontentプロパティなのでMacIEでもOK、と思われます。
総合すると、winIE用にだけ背景画像を表示させるhackを仕込み、その他のブラウザではcontentを使うというのがみんな幸せになれそう。
.tree {
padding: 0;
margin: 0;
margin-bottom 2em
margin-left: 1em;
line-height: 1.2;
}
.tree ul {
list-style-type: none;
margin: 0;
margin-bottom: 1em;
padding: 0;
}
/* hide MacIE ?*/
.tree li li {
padding-left: XXpx;
background-image: url("枝画像のアドレス");
background-repeat: no-repeat;
background-position: 0 0;
}
.tree li li.lastchild {
background-image: url("末尾画像のアドレス");
}
/* hide MacIE */
/* hide winIE */
.tree li>li {
padding: 0;
background-image: none;
}
.tree li ul li:before {
content: "?2514 ";
/* 下のコメントアウトをはずすとツリーっぽくなりますが、liの内容が折り返すとカッコ悪いです。単なる見映えですからお好みで。 */
/*content: "?251c ";*/
color: #999;
font-size: 1.2em;
line-height: 1;
}
.tree li ul li.lastchild:before {
content: "?2514 ";
}
/* hide winIE */
CHOU-FLEURさん
ご要望の方も処置しておきます。-05日20時
そう、なんにも言わなかったですけどwinIEで見るとsugarさんのサイトはツリー化（この言い方抵抗あるんですけど）されてません。ここの動作サンプルのように木構造（いっそこっちに統一したろか（笑））になるだけです。
目的は記事ごとのコメ・トラ振り分けなのでこれでOKかと（殴
ま、CSSをはずしても、テキストブラウザ（スクリプト可な）でもアクセスはしやすくなるのでこれで良いと思うとりますです。-05日21時
でも、目的は達成しているので、文句はありません。-05日21時
CHOU-FLEURさんにもみっちりと濃いサポートをしていただき、ワタシは幸せ気分に酔いしれております。
はっ...また今日も推薦テンプレ決められなかった...-06日00時
＞はっ...また今日も推薦テンプレ決められなかった...
blog branch読みましたよ。
みんな良いテンプレを探し出すのうまいですねー。早い者勝ちなのか、はたまた、まだ埋もれてる財宝があるか楽しみです。-06日22時
以前から時々拝見しては、色々と感心させられていました。
この度、春木屋様の「コメント・トラックバックリンクの振り分け」と「要素の汎用折りたたみ」を私のブログで使わせて頂きましたので、事後報告となりましたが、ご挨拶も兼ねてコメントさせて頂きました。
スクリプトに疎い私には勉強になることも多く、今後も春木屋様を色々と参考にさせて頂こうと思います。-13日00時
＞スクリプトに疎い私には勉強になることも多く、今後も春木屋様を色々と参考にさせて頂こうと思います。
身の引き締まる思いです＾＾
スクリプトやCSSは、たくさん読むこと、たくさん書くことで自然に上達するものです。
うちのソースもまだまだ改良の余地があります。どんどんいじってみてください。
-13日20時
（例）
○ タイトル
└ コメント（タイトル同じで記事番号１）
└ コメント（タイトル同じで記事番号３）
└ コメント（タイトル同じで記事番号１）-29日23時
＞どこを直せば正しくツリー化できるか
別の文章ならばタイトルを違うものにするというのがセオリーですが･･･
別件同タイトルは、現実の文章にもありえる条件ですね（うちもゆんべ書いてるし）。
記事番号を読んで振り分けるように改変してみました。
→ http://sug.blog2.fc2.com/file/tree_ul_3.js
1）上記のファイルをいったんダウンロードし、こーすけさんのサイトにアップしてください。
2）テンプレの編集ページへ移動します。
3）以前のファイル組み込みは済んでいるようなので、リンク部分
<script src="<%url>file/tree_ul_3.js" type="text/javascript"></script>
と、tree_ul_2.jsの2を3に編集ののち、テンプレを更新します。
4）リロードして動作を確認してください。
うまく動かないようでしたら、コメントくださいね。-30日19時
さっそくtree_ul_3.jsを試させていただいたところ、同名のタイトルも区別されてツリー化されました。
どうもありがとうございました。(^.^)-30日23時
お役に立ててなによりです。
同タイトルは盲点でした。HTMLがマークアップの道具だとすれば、そのルールのために元文章を変えなければならない（同じタイトルが使えない）のは変ですよね。今度、この辺の文献を漁ってみようかと思います。-02日11時