2005年04月23日

Blogカスタマイズ59〜トップページ・コメントのツリー化を設定〜

かなり前から気にはなっていた、コメントのツリー化にチャレンジしてみました。
(「弱小エンジニアの小言」さんを参考にさせて頂きました。感謝致します♪)

【追記】8/30
livedoor Blogのリニューアル版は「カスタマイズ65」の方を参考にして下さい。
(リニューアル版とは、投稿する時に「気分 or 評価」というのがあるものです)

とりあえず、私が設定した簡単なバージョンを書き記しておきたいと思います。(基本はその下にあります)

★トップページ・コメントのツリー化を設定

「Blogの設定/管理」→「プラグインの設定」→「フリーエリア」を選択し、下記のタグを貼り付け、
必要な部分を変更し、一番下の「フォーマット」の「変換しない」を選択し、保存・再構築(トップページ)をして完了です。

※設定したフリーエリアはプラグインのコメントより後に設定します。 (私は一番最後に設定しました)

<script language="JavaScript" src="http://blog.livedoor.jp/takoashi/convert_tree.js"></script>
<script language="JavaScript"><!--
ct_param.title = "最新コメント";
ct_param.mark = '►';
ct_param.mark_last = '►';
ct_param.mark_end = '<br /">';
ct_param.mark_end2 = " さん";
ct_param.userid = "モダチョキ"
ct_param.linkid = "links2";
ct_param.mark_tb_br = '';

comment_convert_treeview2(ct_param);
// --></script>

※上記の ► の部分は設定後、数字になってしまいますが、トップページではちゃんと表示されます。
※「さん」の前に半角のスペースを入れて、名前との間を少し開けるようにしてみました。
 (続けたい場合は、半角スペースを削除して下さい)

ct_param.title = "最新コメント"; ←プラグインのコメントのタイトル名
ct_param.mark = '►';        ←投稿者名の前のデザイン(通常のツリーアイテム) 【例】「+」「├」「→」など。
ct_param.mark_last = '►';     ←投稿者名の前のデザイン(最下段のツリーアイテム)【例】「+」「└」「→」など。
ct_param.mark_end = '<br /">';  ←投稿者名の後のデザイン
ct_param.mark_end2 = "さん";  ←投稿者名の後に「さん」「様」などを付ける。
ct_param.userid = "モダチョキ" ←自分の投稿者名の後ろに「さん」「様」付けない場合は、自分の投稿名を設定します。
ct_param.linkid = "links2";     ←2カラムの場合と3カラムで左側に「最新コメント」がある場合は「links」、
                       3カラムで右側に「最新コメント」がある場合は、「links2」を設定します。
ct_param.mark_tb_br = '';

※ct_param.mark から ct_param.mark_end2 までの設定にはHTMLタグなどが使えます。
※投稿者名の前のデザインに画像を設定する場合は、
 ct_param.mark = '<img src="http://****.gif">';という風に設定します。


■基本のタグは下記になります。(「弱小エンジニアの小言」さんより)

※JavaScriptの上にCSSを設定するとより細かく設定できます。
 (livedoor Blog以外で下記のgif画像をご利用になる場合は、必ずダウンロードしてご利用して下さい)

<style>
.tbm {
padding:0 0 4px 18px;
margin:0;
background: url(http://image.blog.livedoor.jp/takoashi/tbm.gif) no-repeat;
}
.tbe {
padding:0 0 0 18px;
margin:0;
background: url(http://image.blog.livedoor.jp/takoashi/tbe.gif) no-repeat;
}
</style>
<script language="JavaScript" src="http://blog.livedoor.jp/takoashi/convert_tree.js"></script>
<script language="JavaScript"><!--
ct_param.title = "Comments";
ct_param.mark = '<div class="tbm">';
ct_param.mark_last = '<div class="tbe">';
ct_param.mark_end = '</div>';
ct_param.mark_end2 = "";
ct_param.userid = ""
ct_param.linkid = "links";
ct_param.mark_tb_br = '';

comment_convert_treeview2(ct_param);
// --></script>

.tbm…投稿者名の前の画像の設定(通常のツリーアイテム)
.tbe…投稿者名の前の画像の設定(最下段のツリーアイテム)



 ■【堀江貴文・ホリエモンもオススメ!】 パソコン教室!397時間動画パソコン教室DVD4枚組!
   ホームページ作成、オフィス(ワード、エクセル、パワーポイント、アクセス)2003/2007、Photoshop、Illustrator、Dreamweaverなど
   29ジャンルが自宅で学べます!
 ■離婚大全集〜圧倒的有利に離婚する方法〜
   離婚経験者の専門家が、27冊の書籍やテレビでは語れない裏ワザがここに。
 ■運動なし!代謝を高めて無理なくやせるDLダイエットサポート 太らない身体が目標!
 ■【15秒筋トレ】自宅でお金をかけない肉体改造! 目標はゴリマッチョ?細マッチョ?
 ■1,353人のメガネ使用者がわずか3日で視力が1.0に!!見える!驚異の視力回復法 自宅で簡単に視力アップ!
 ■【ホリエモンブログ】で紹介されました!【せどり】でリッチ☆に!最強せどりツール【せどリッチforCD】
 ■ダウンロード販売と人と人をつなぐコミュニティ・コマースのインフォカート
 ■引っ越しを考えている方必見!すごいっ!
  ・全国賃貸情報【アパマンショップ】

  ・引越し一括見積もりサイトの決定版!【引越大手比較.com】

 ■ロリポップサーバーのドメインが65種類 → 85種類に!!初心者でも安心なサービスがあります♪

 ■ ダイエット商品人気ランキング
  この夏はみんなのオススメダイエットにチャレンジ!
 ■ラブコスメティックすごいっ!
  人に言えない身体の悩みをすっきり解決しましょう♪

よろしければ人気blogランキングにご協力を!

この記事へのトラックバックURL

  迷惑トラックバック対策のため、トラックバックはこちらでチェックした後、アップさせて頂いておりますので、ご了承下さい。

この記事へのトラックバック
私も前から気になってたので、さっそく導入です☆ 少しはスッキリしたかな(^_^)
コメント・タラックバックのツリー化【Feel at Ease】at 2005年04月23日 14:01
この記事へのコメント
こんばんわ!コメントのツリー化に挑戦してみたのですが出来なくて間違っている所があったら教えてください。貼り付けをするタグはこれでよろしいでしょうか?
<script language="JavaScript" src="http://blog.livedoor.jp/takoashi/convert_tree.js"></script>
<script language="JavaScript"><!--
ct_param.title = "コメントありがとう!"
ct_param.mark = '⇒’;
ct_param.mark_last = '⇒';
ct_param.mark_end = '<br/">';
ct_param.mark_end2 = " さん";
ct_param.userid = "hicky"
ct_param.linkid = "links2";
ct_param.mark_tb_br = '';
comment_convert_treeview2(ct_param);
// --></script>
Posted by hicky at 2005年04月24日 02:57
その後ですが、フリーエリアに貼り付け(タイトルはコメントのツリー化)→タグは変換しないにチェック→設定したフリーエリアは今あるコメントの直ぐ下に設定→再構築(トップページ)をしたのですが出来上がりを見たらコメントの下にコメントのツリー化という物が一つ増えているだけなのです。何処が間違っているのか教えてください。
Posted by hicky at 2005年04月24日 03:04
"コメントありがとう!"の後の ; が抜けているようですね。
そこを足して、再度設定してみて下さい。(下記のタグで大丈夫だと思います)

<script language="JavaScript" src="http://blog.livedoor.jp/takoashi/convert_tree.js"></script>
<script language="JavaScript"><!--
ct_param.title = "コメントありがとう!";
ct_param.mark = '⇒';
ct_param.mark_last = '⇒';
ct_param.mark_end = '<br /">';
ct_param.mark_end2 = " さん";
ct_param.userid = "hicky"
ct_param.linkid = "links2";
ct_param.mark_tb_br = '';

comment_convert_treeview2(ct_param);
// --></script>
Posted by モダチョキ at 2005年04月24日 03:19
ありがとうございます。
やり直したのですが、だけど同じ事になるのですが・・・(-_-;)
Posted by hicky at 2005年04月24日 10:03
おかしいですねー。(hickyさんがご利用のテンプレで試したらちゃんとできたのですが…)
3カラムの設定はご自分でなさっているのですよね?
もしかしたら、3カラムにする時にCSSでlinks2に当たる部分が、
右側になっていないのでしょうか。
プラグインのコメントがCSSでlinksかlinks2かで設定が変わるのですが、
通常はlinksが左側、links2が右側になるのですが。
Posted by モダチョキ at 2005年04月24日 12:33
3カラムはお借りしたものです。
links2は右側でコメントもそうです。
何で出来ないんでしょうね?
Posted by hicky at 2005年04月24日 13:49
そのへんもあっていますね。ん〜。(^ ^;)
「サイドバーの開閉ボタン」のスプリクトとの併用が上手くできないと聞いた事がありますが、
これはプラグインの順番かなにかでなんとかなるみたいでした。
もしかしたら、プラグインに設定しているスプリクト系が問題なのかもしれませんね。
ちょっとこれ以上は分からないので、「弱小エンジニアの小言」さんの方でお伺いした方が良いかもしれません。
お力になれず、すみません!
Posted by モダチョキ at 2005年04月24日 15:56
色々とありがとうございました。
また何かあった時お邪魔します(^_^;)
Posted by hicky at 2005年04月24日 17:06
前はうまくできなかったんですけど、今回は一発でできました。
サイドバーのプラグインでできるのがカンタンでいいですね。
間に破線が入ってしまうのは...CSSの問題ですね。
今度いじってみます。
Posted by まいQ at 2005年05月10日 14:50
> まいQさん

上手く設定が出来たようで良かったです!
サイドバーがちょっとすっきりするのでいいですよね。
Posted by モダチョキ at 2005年05月11日 00:29
はじめまして、参考にさせて頂きツリー化成功しました(^^)
ありがとうございましたー(__)
Posted by ルーファス at 2005年05月20日 23:33
はじめまして、ルーファスさん。
お役に立てて幸いです♪
Posted by モダチョキ at 2005年05月21日 00:48
こんにちは。
またカスタマイズを参考にさせて頂きました。
今回は珍しく一度で出来ました^^

が〜〜〜、個別、月別、カテゴリーに反映しないので、HTMLに入れてみたのですが・・・

書き込む場所は指定があるのでしょうか?
お分かりでしたらご指導下さい。お願い致します。

また、参考元として記事にさせて下さい。
Posted by 大家族ママ ruru♪ at 2005年06月14日 15:28
反映されない原因はよく分かりませんが、
「全ページ」で再構築をしていますか?
これだと、個別や月別が反映されない事があるようなので、
「月別」「カテゴリー別」で再構築をしてみてはどうでしょうか。
(「全アーカイブ」ももしかしたら同じかもしれません)
もしそれでもダメなら、それぞれの最新記事のページだけを
それぞれ再度保存してみて下さい。
(例えば、月別は6月の最新記事、5月の最新記事という感じで)
私は以前、別のカスタマイズでこれで直った事があります。
Posted by モダチョキ at 2005年06月15日 01:57
モダチョキさん。こんにちは・・
いつもスミマセン。全てやってみたのですが・・残念ながら出来ませんでした。
とりあえずTopはツリー化されてるので良しとします。
ありがとうございました。
Posted by 大家族ママ ruru♪ at 2005年06月15日 17:22
ダメでしたか。他のBlogでできている方もいらっしゃったので、
方法はあるとは思うのですが、お役に立てずすみません。(^ ^;)
もし、方法が分かりましたら、ご連絡しますね。
Posted by モダチョキ at 2005年06月16日 00:32
livedoorのデフォデザインで別館を始めました。
始めは3カラムのデフォデザインを指名するも、一番上が気に入らなかったので回避。
適当に他のデフォデザインを指名して、そこにモダチョキさんの映画フィルムデザインCSSを噛まして完璧♪
なんですが、、、基本中の基本。 コメントのツリー化が出来ないんですよね。。。
記事編集画面や、プラグイン振り分け画面がもの凄い変わってます。(汗)
A(サイド左振り分け) B(サイド右振り分け)
この辺が原因なのか、何回やってもツリー化が無理でした。ヽ(`△´)/
いろいろと全ての面で、心からありがとうございます!
Posted by Tyler at 2005年07月12日 19:43
タイラー・ダーデンときましたか!
一瞬、新しい方かと思いましたよ、キャス…、あ、別人扱いかな。(笑)
テンプレートもご利用して頂き、ありがとうございます♪
ツリー化も無事にできたようですね。
新規にIDをとられたという事は新機能も使えるんですね。
変更するなら早いところやっちゃって欲しいのですが、
なかなかリニューアルされませんね。(^ ^;)
Posted by モダチョキ at 2005年07月13日 01:22
久しぶりにブログをいじりたくなってこのコメントツリー化に
チャレンジしました。おかげさまで完成しました!!
ありがとうございます。

いつも(密かに)拝見、参考にさせていただいております。
とっても可愛いくて、また分りやすいので、また色々チャレンジ
してみたいと思います。
本当に超初心者な私なのにわかるなんて・・・感激v
先生とお呼びして宜しいでしょうか!?
でわ★

Posted by junta at 2005年07月28日 02:59
はじめまして、juntaさん。
少しでもお役に立てて幸いです♪
私もこのBlogを始めてから、初めて色々なカスタマイズにチャレンジしているので、
先生だなんて、とんでもないです!(笑)
お互いに楽しいBlog生活を送っていきましょう♪
ここで使える情報はどんどん利用して下さいね。
Posted by モダチョキ at 2005年07月29日 03:28
(Cookieに投稿者情報を記憶します)
 
コメントをプレビューする
ご利用のブラウザの設定ではご利用になれません。