iPhone/ カメラ/ 自転車/ ブログ/ 食べ物 についてプログラマーやらしてもらっているtakoashiがぐちぐち言う日記系ブログです。
電化製品は機能重視。takoashiはtoshiba:RDを応援してます。
プログラマ系ブログ「takoashiの開発記録」も、よろしくお願いします。

ミニカスタマイズ 25 簡易版「とりあえずなにも考えずにプラグイン(コメント/トラックバック/カテゴリ)をツリー化」

[課題]
プラグイン(コメント/トラックバック/カテゴリ)をとりあえずなにも考えずにツリー化表示してみたい!


[はじめに]
この内容は、「ミニカスタマイズ 25:プラグイン(コメント/トラックバック/カテゴリ)をツリー化表示する」がわからないという人のための簡単対応版です。詳細はあっちでお願いします。

それでは、はじめます。


[方法]
1.新規にプラグインでフリーエリアを追加します。
2.追加したフリーエリアを順番が一番最後になるようにします。
3.次の内容を貼り付けます。

<style>
.key_area {
padding:0 0 0 10px;
text-align:left;
}
.key {
}
.leaf_area {
margin:3px 3px 3px 3px;
text-align:left;
}
.leaf {
padding:2px 2px 2px 18px;
margin:0;
background: url(http://image.blog.livedoor.jp/takoashi/tbm.gif) no-repeat;
}
.leaf_last {
padding:2px 2px 2px 18px;
margin:0;
background: url(http://image.blog.livedoor.jp/takoashi/tbe.gif) no-repeat;
}
</style>

<script type="text/javascript"
src="http://www.takoashi.net/js/ConvertTree.js"></script>
<script type="text/javascript"
src="http://www.takoashi.net/js/CreateCommentsTree.js"></script>
<script type="text/javascript"
src="http://www.takoashi.net/js/CreateTrackBacksTree.js"></script>
<script type="text/javascript"
src="http://www.takoashi.net/js/CreateCategoryTree.js"></script>

<script language="JavaScript"><!--

//コメントをツリーか(ここから)
var commnets_div = GetPluginByTitle("Recent Comments");
if( commnets_div != null )
{
var comments_tree = CreateTreeDataFromComments(commnets_div);
var commenttd = new TreeDataObj(); // おまじない
ConvertTree(comments_tree,commnets_div,commenttd);
}
//コメントをツリーか(ここまで)

//トラックバックをツリーか(ここから)
var trackbacks_div = GetPluginByTitle("Recent TrackBacks");
if( trackbacks_div != null )
{
var trackbacks_tree = CreateTreeDataFromTrackBacks(trackbacks_div);
var trackbacktd = new TreeDataObj(); // おまじない
ConvertTree(trackbacks_tree,trackbacks_div,trackbacktd);
}
//トラックバックをツリーか(ここまで)

//カテゴリをツリーか(ここから)
var cate_div = GetPluginByTitle("Categories");
if( cate_div != null )
{
var cate_tree = CreateTreeDataFromCategories(cate_div,":");
var cate_td = new TreeDataObj(); // おまじない
ConvertTree(cate_tree,cate_div,cate_td);
}
//カテゴリをツリーか(ここまで)

// --></script>


4.指定箇所を3箇所修正します。

赤い文字が修正箇所です。
それぞれ対応するプラグインの名称に変更してください。

5.サブカテゴリ対応にする。

カテゴリをツリー化するにはサブカテゴリを作成しなければなりません。
#ブログを投稿するときにカテゴリが二つ設定できることとはなにも関係ありません。

仮想的にカテゴリを生成します。

方法
すべてのカテゴリを下記のように書き換えてください。

[メインカテゴリ名]:[サブカテゴリ名]

「:」←これが重要です。全角です。

サブカテゴリが必要なければ設定しなくていいです。

6.おわり

最近はプラグインを編集すると自動で再構築されるのはなにも不要。
さあ、これでツリー化されているはずです。
希望をもって確認してみよう!!


え?だめ?

ちゃんと赤いところ修正しました?


[関連記事]
ミニカスタマイズ 25:プラグイン(コメント/トラックバック/カテゴリ)をツリー化表示する
ミニカスタマイズメニュー
カスタマイズの注意点


参考になりました?応援だと思って お願いします。

トラックバックURL
この記事へのトラックバック
1. カテゴリをツリー表示化 - ネットで小遣いを稼ごう・・・本当に稼げるの? [2008年05月21日 23:18]
2. カテゴリをツリー表示化 - ライブドアブログ:カスタマイズ:ネットで小遣いを稼ごう・・・本当に稼げるの? [2008年05月22日 00:03]
4. ブログ改造 その2 - I LOVE AION [2009年06月11日 00:38]
この記事へのコメント
1. Posted by 万年床生活者 [2008年04月06日 12:36]
先日はサインありがとうございました。
いつもありがたくツリー化させていただいております<( _ _ )>

簡潔でとてもわかりやすいです。
これならカスタマイズ初心者の方にも安心しておすすめできます♪
2. Posted by heroes1616 5 [2008年05月21日 23:50]
いつも参考にさせてもらっております。
初心者には解りやすく非常に助かります。
3. Posted by Hiro 5 [2008年07月01日 16:03]
超簡単カスタマイズ、ありがとうございました!!!
4. Posted by towa [2008年09月02日 17:59]
はじめまして。
今日初めてこちらのことを知りやってきました。
とてもわかりやすくツリー化の仕方が説明されていて、初心者の私でもカスタマイズすることができました!
今後も参考にさせていただくことがあると思いますので、その際にはよろしくお願いいたします。
ありがとうございました。
5. Posted by TOM 5 [2008年09月09日 17:38]
こんにちは

思い描いていたようなツリー化になり
大変満足しております。

一つ質問させてください。

コメントをツリーかした場合、投稿者の横に日付は入れられますか?

また、ツリー化されたコメントの色は変更可能でしょうか?

↓この色を変更し、日付を入れる方法があれば、ご教授願います。
aaaaa
|__あああああ(9/9)
|__いいいいい(9/10)
|__ううううう(9/11)
6. Posted by maple story mesos 5 [2008年09月09日 18:23]
はい、どうもありがとうございました!
7. Posted by takoashi [2008年09月09日 18:29]
確認してませんが…

.leaf {
padding:2px 2px 2px 18px;
margin:0;
color:red;
background: url(http://image.blog.livedoor.jp/takoashi/tbm.gif) no-repeat;
}
.leaf_last {
padding:2px 2px 2px 18px;
margin:0;
color:red;
background: url(http://image.blog.livedoor.jp/takoashi/tbe.gif) no-repeat;
}

みたいな感じで色は変わると思います。
日付は現状できません。

出したいですかね??
8. Posted by TOM [2008年09月10日 15:34]
ありがとうございます。

すばらしですね。

ちなみに、コメントのタイトル
この例だと、aaaaa の色は変えられないでしょうか?

日付でると、うれしいですね。
9. Posted by TOM [2008年09月18日 09:57]
こんにちは

質問させてください。

コメントのツリー化をサイドバーではなく
記事、本文のトップページに表示させたいと思っております。

良い方法があれば、アドバイス頂けないでしょうか?

以上、宜しくお願いいたします。
10. Posted by ぽこにゃん [2008年10月24日 17:30]
はじめまして。
サブカテゴリーのツリー化!できました!!
これ、やりたかったんですよね〜!
何回かやり直しましたが、初心者の私でもついにできてとっても嬉しいです。
本当にありがとうございました。
11. Posted by takoashi [2008年11月06日 00:38]
みなさんお返事遅れました。
コメントが付いたことに気づいてませんでした。


>>> TOM さんへ

変更できますよ。
ちょっとは自分で試してみたほうがいいですよ。
意外と簡単なんでいろいろ試してみてください。

.key {
color:red;
}



本文に表示させたいなら、コメントのRSSを読み込んで
それを表示させればできます。

もしくは、プラグインAとBをうまく使い分けて、
Aは本文に表示させて、Bをサイバーにするとか発想を変えてみるといいかも。


>>> ぽこにゃん さんへ
おめでとうございます。
まあ、だれにでもできるはずなんでほかの方もチャレンジしてみてください。
12. Posted by ひすこ [2009年02月06日 16:05]
プラグインを使用させていただきました!
カテゴリのツリーかはできたんですが、

カテゴリーリスト
・aaaa:bbbb
・aaaa:cccc
aaaa
├bbbb
└cccc
のように既存カテゴリリスト表示され、その下にカテゴリツリーが表示されてしまっています。
何か別に設定などあるのでしょうか?

質問のみで申し訳ございませんがわかる方いらっしゃいましたら教えてください><
13. Posted by ひすこ [2009年02月06日 18:10]
>>12で書きましたが
よくわからないうちにきれいに表示されてました
14. Posted by takoashi [2009年02月06日 22:10]
>>> ひすこ さんへ
なんか解決できたようでよかったです。
15. Posted by なりと 5 [2009年05月30日 02:56]
こんばんは とても簡単なやりかたで できました
プラグインのフリーエリアにいれると 何もない枠ができて
いやだったんで トップページ などCSS以外の3箇所の</body>の上にいれたら なにごともなく ツリー化できました コメントもOKでした(フリーエリアのときは コメントはできず)
もひとつ 質問ですが ここのツリーみてると 親カテゴリーのとこに 小さなアイコンがあるのですが どうすれば表示できますか?
また 親カテゴリーごとに 違うアイコンをつけることできますかね たとえば 番号のアイコンとか
教えてくだされば 幸いです
16. Posted by takoashi [2009年05月30日 14:02]
>>> なりと さんへ

> ここのツリーみてると 親カテゴリーのとこに 小さなアイコンがあるのですが どうすれば表示できますか?
このアイコンは、プラグイン全体のsidebodyのスタイルが適用されています。

> 親カテゴリーごとに 違うアイコンをつけることできますかね たとえば 番号のアイコンとか
できるかな?とおもってちょっと試してみましたが
いまのままではできないですね。
すこし手を入れればできそうですけど。
17. Posted by なりと 5 [2009年05月30日 18:26]

さそく お返事ありがとうです
ちと がんばって やってみますね

無料だと 制限あるんで 有料でやってみます
18. Posted by なりと [2009年06月17日 16:59]
こんにちは
かなり出来上がりました
開閉式にしましたが +のところを 炎のイメージにかえたまでは よかったのですが
ロールオーバーに使用と悪戦苦闘しましたが出来ませんでした
いま やってみたのは
<img src="画像のアドレス"
onmouseover="this.src='マウスを乗せたときの画像のアドレス'"
onmouseout="this.src='マウスを離したときの画像のアドレス'">
これいれると ツリーまで壊れる始末です
どこが いけないでしょう?
19. Posted by takoashi [2009年06月17日 18:17]
atcateのスタイルにスタイルを指定すると可能なのではないかなと思います。

参考:CSS ロールオーバー
http://hac-design.com/css/rollover.html
この記事にコメントする
名前:
URL:
  情報を記憶: 評価: 顔