画像1

※なんかアクセスがこの記事に集中してるみたいですが、今現在(2013/8)ではたしかこの方法ではツリー化は正常に作動しません。一年くらい前から動かなくなりましてね。だからうちのカテゴリのツリーは今はこれつかってません。ライブドアブログの場合内部の仕様が変わってそういうことになることが多いのよ。他の方法は・・・わかりませんw つーことで○すみんさんお力になれずすいません。


「ツリー化」というのはどういうことかと簡単に説明すれば上の画像のようにするということ。ツリー=木のように枝分かれさせるということです。
ライブドアブログは基本はコメントなどはツリー化しない仕様。人それぞれなんでツリー化が全員に見やすいかといえばそうでもないかもしれないですが、見やすくするという効果がツリー化にはあります。
それを改造してライブドアブログでも使用しようということです。

今回参考にさせてもらったサイト様は弱小エンジニアの小言の中のミニカスタマイズ 25 簡易版「とりあえずなにも考えずにプラグイン(コメント/トラックバック/カテゴリ)をツリー化」という記事です。
ライブドアブログの改造のことならこのサイトともいうべき老舗様ですね。ブログ改造しようとした人ならいったことがるサイト様だと思います。
実際はこのサイト様にいってコードコピー、フリーエリアにペースト。おしまいなんですが、たまにわからない人のための超丁寧講座ってことで。
まぁMHFブログですんで「地雷でもわかる」なんて書いてみちゃったわけですw
もしできなくても地雷なわけじゃないので安心してくださいね。

ということでたった一行でおわれる記事を本家様より3倍は長い記事にしてお送りいたします。MHFとはまったく関係ないので興味ない人はつづきは全力スルーで。

イメージ3907

まず最初に注意として2009年2月現在の管理ページでおこなってます。新管理ページの場合はすこし手順が違うかもしれないです。

ライドアブログの管理ページにログイン→カスタマイズ/管理→プラグインの設定/新規追加から新規追加→上級者向けプラグイン→フリーエリア→追加するで、フリーエリアのプラグインを作ります。

でそのフリーエリアに下に書くコードをコピペして設定すれば終わりです。ここでまた注意点。上の画像にあるように改行設定は「変換しない」にチェックをしてください。タグ変換のほうだと絶対なりません。コード入れたのにツリー化しないってひとはまずここをチェックです。
で本題のコードです。ここから下の<style>から</script>までを全部もらさずコピーしてくださいね。

 

<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>

 

 

上の</script>まできっちりコピ−してさっきつくったフリーエリアにペーストしてくださいね。で「この内容で設定する」をおしておしまいです。なにもいじってないのならこれで再構築がおわって自分のブログを見ればツリー化できている人はできているはずです。

イメージ3908

かきわすれましたがこのツリー化コードを書いたフリーエリアはプラグインの一番下におきましょう。2カラムをつかっているのならBの一番下ってことです。タイトルの欄にはなんでも書いてもかまいません。この説明があとになったのは、「なにもいじらなければ」つくったフリーエリアは自然に一番下になりますので。

では次はちょっといじってる人用です。

イメージ3913

「なにもいじっていない人」はと上で書きましたが、いじるといってもプラグインのタイトルを変えてるか変えてないかってだけの話です。
上のコードはコメントなどのタイトルを変えてない人用のものです。タイトルを変えている人はちょっとした書き換えが必要になってきます。

最新コメントのプラグインならタイトルを変えないでデフォルトならRecent Comments
カテゴリ別アーカイブのタイトルはデフォルトでCategories
最新トラックバックなら
Recent TrackBacks
となるわけです。感がいいかたなお気づきだと思いますがコードの中に同じ色で同じ文字のところがありますね。そうです。そこを変えたタイトルに変えればいいということです。

この記事のトップの画像にありますがRecent Commentsコメントありがとう
Categoriesカテゴリゴリとタイトルとコードの中を変えた状態でのツリー化の画像です。

//カテゴリをツリーか(ここから)

var cate_div = GetPluginByTitle(
"カテゴリゴリ"
);

if( cate_div != null )

例としてカテゴリーのプラグインのタイトルをカテゴリゴリに変えた場合はこういうふうにコードを書き換えることになるわけです。
ここでまた一つ注意点ですが、他でもいえますがカテゴリーであるならCategories
以外のコードのところはどれ一つして間違っても消さないように
よくあることだと思いますが
Categoriesの前後にあるダブルコーテーション(クオーテーション)「"」をけさないようにということです
意味は知らないでいいですがこのダブルコーテーションがないとツリー化しません。もしタイトルを変えていてコードの中を変えた人でツリー化しない人はここをチェックしましょう。あと完璧にタイトルとおなじもじをコード内に入れましょうね。半角が全角だったり小文字だったり大文字だったり余分なスペースが入ったりではだめですから。自信が無いひとはタイトルをそのままコピペしてコード内に貼れば間違うことは無いです。

さてこれでコメントとトラックバックのツリー化は完成しているはずです。

ちなーみにコードの書き換えるところまちがえると

イメージ3914

こんな風になりますwwこれはトラックバックのところにまちがってコメントのタイトル入れてしまった例です。まぁ基本はなんかおかしいなってときはどこかおかしいので間違いを探すか、探すのめんどくさいときは、最初からやりなおしましょう。へんに間違いさがすよりも最初からやったほうが早いことが多いですので。

イメージ3909

あとデザインによりますがプラグイのところの背景が黒いとこんな風にツリーの枝がよく見えないことがあります。対処の仕方はありますが、ちょっとめんどくさいので嫌だなってときは、デザインを変えたほうがよいと思います。これでいいときはいいんですけど。

イメージ3911
イメージ3910

ライブドアから提供されているデザインは大体ためしましたがほとんど問題なくツリー表示ができました。ただし今はみんなのデザインという有志のみなさまがつくったデザインを提供してもらえます。
このみんなのデザインのデザインでは動作は保証しません。実際に上のようにくずれたデザインもありました。こちらのようなオリジナルのデザイン、もしくは自分でかなりブログのデザインをいじっているというなら対処をしないと正確な表示はされないかもしれないです。まぁデザインいじってるような人は対処法も自分でみつけれると思いますが、自信がないめんどくさいってひとはできるだけライブドアから提供されているデザインをつかいましょう。ただしいじってるから「みんなのデザイン」だから絶対正確に表示されないわけじゃないです。まずはやってみないとわからないです。

さて長々書きましたができましたかな?これのツリー化は一応簡易版らしいです。個人的にはこれで十分ですが、これでものたりないって人は(表示速度が遅いや他の機能がつかいたい)という人は、一番最初に紹介した弱小エンジニアの小言様のサイトにミニカスタマイズ 25:プラグイン(コメント/トラックバック/カテゴリ)をツリー化表示するがありますのでそちらをご覧ください。
こちらが難しいというわけでは無いのですが慣れてないと苦労するかもです。
4年前はこちらで自分はツリー化してましたが、ライブドアのデザインの内部がバージョンアップなどでなったりならなかったりして大変だったんよね。今のこれは今のデザインようにバージョンアップされたツリー化なので大丈夫ですが。
こちらでやってみたいって人はがんばってください。こちらのやり方はここで書くことはたしかないです。

さてカテゴリのツリー化は長くなったのでもう1個記事を書いてそちらで説明しています。カテゴリーもやりたいかたはそちらをみてくださいね。

このツリー化のしかたは本当に簡単なのでここに何個か書いた注意点をしっかりまもれば絶対できるはずです。できないなって人はがんばってぇ。できないときはこういうものはなんでも最初からやり直しましょう。

あとなんでこうなるの?とかの疑問はもたないほうが身のためですw

でわでわ

チェックできた動作ブラウザ環境を。IE7 Firefox3.0.6  Google Chrome 1.0.154.48
他のブラウザ、特に携帯用では動作はわかりません。

2010/8 いろいろなライブドアブログの仕様変更がありうまく表示できない場合がありますご了承ください。

カテゴリツリー化記事はこちら
地雷でもわかるライブドアブログ改造講座2 カテゴリツリー化