現在、日々の日記はココに書いてます。↓
2006年11月28日 23時04分2006:11:28:23:04:00

カテゴリのツリー化(2006/11/28追記)

カテゴリーのツリー化を行いました。

参考にさせて頂いたのは、
Des notes de KOHtan様のカテゴリの分類とツリー化2カテゴリのツリー化(サブカテゴリ化)3
んー?( ̄ー ̄;)様のカテゴリのツリー化(seesaa)をスピードアップ
です。

[以下、2006/11/28追記]

《手順》
[1] 記事のカテゴリ名を、『カテゴリ名:サブカテゴリ名』にする(:は全角コロン)
 例)SeeSaaブログ:カスタマイズ

[2] 『デザイン⇒コンテンツ⇒カテゴリ⇒コンテンツHTMLの編集』で、以下を上書きコピー(既存のコードを全て削除し貼り付ける)する。
<div class="sidetitle"><% content.title %></div>
<div class="side">
<% content.header -%>
<% loop:list_category -%>
<a href="<% category.page_url %>"><% category.name | tag_break %>(<% category.article_count | __or__ | echo("0") %>)</a><br />
<% /loop -%>
<% content.footer -%>
</div>
『保存』を忘れずに!

[3] 『デザイン⇒コンテンツ⇒カテゴリ⇒挿入テキスト(下部)』に、以下を貼り付ける。
<SCRIPT language="JavaScript">
<!--
/////////////////////////////////////////////////////////////////////////////////
tree("カテゴリ","左");                 //←この行を変更する
/////////////////////////////////////////////////////////////////////////////////
function tree(title,position){
    var category=new Array();
    var subcategory=new Array();
    category[0]=null; subcategory[0]=null;
    if(position=="左"){
        position="links-left";
    }else if(position=="右"){
        position="links";
    }else{
        return;
    }
    var tmp=document.getElementById(position).getElementsByTagName('div');
    for(var i=0;i<tmp.length;i++){
        if(tmp[i].innerHTML==title) break;
    }
    if(i==tmp.length) return;
    var target=tmp[i+1];
    var tmp2=target.getElementsByTagName('a');
    for(var j=0;j<tmp2.length;j++){
        var link=tmp2[j].innerHTML;
        if(tmp2[j].innerHTML.indexOf(":")==-1){
            category[j+1]="<a href="+tmp2[j].getAttribute('href')+">"+ link+"</a>";
            subcategory[j+1]=null;
        }else{
            category[j+1]=link.substring(0,link.indexOf(":"));
            subcategory[j+1]="<a href="+tmp2[j].getAttribute('href')+">"
                +link.substring(link.indexOf(":")+1,link.length)+"</a>";
        }
    }
    category[j+1]=null; subcategory[j+1]=null;
    //出力
    var tmpHTML="<br>";
    for(i=1;i<(category.length-1);i++){
        if(subcategory[i]==null){
            tmpHTML+=("◆ "+category[i]+"<br><br>");
        }else{
            if(category[i]!=category[i-1]) tmpHTML+=("◆ "+category[i]+"<br>");
            if(category[i]==category[i+1]){
                tmpHTML+=("├"+subcategory[i]+"<br>");
            }else{
                tmpHTML+=("└"+subcategory[i]+"<br><br>");
            }
        }
    }
    target.innerHTML=tmpHTML;
}
// -->
</SCRIPT>
その際、『//←この行を変更する』の行を、ブログ設定によって書き換える。
・"カテゴリは"、(変更していれば)あなたが設定しているカテゴリのタイトルに変更する。
・"左"は、右側に配置している方は"右"に変更する。

『保存』を忘れずに!

[4] 最後に『全て』再構築して、完成 (^O^)/
人気Blogランキング
(気づいたこと 感じたこと お気軽にコメントください。 疑問・質問・苦情も 大歓迎です。)
この記事へのコメント
こんばんは!!
リクエストに答えて頂いてありがとうございました^^

感動です。
また質問で申し訳ないのですが、
大さんのサイトのように、
◆seesaaブログ
のようにして、その中のカテゴリを
・カスタマイズ
・seesaaへの要望とするにはどうしたら良いのでしょうか??
ifで、何か指定していくのですか?
どこかで、ちらっと見た気がするのですが、自分で、手書きしないと
できないのでしょうか。
お時間あればまたお願いいたします☆
Posted by ブログ初心者KYON at 2006年12月03日 19:44
こんばんは、リクエストに答えて頂いてありがとうございました!!
またまた質問ですみません。
大さんのサイトのように、
◆seesaaブログ
その中で・カスタマイズ
    ・seesaaへの要望
とするにはifで何かしないといけないのでしょうか??お時間あったら教えてください^^
Posted by ブログ初心者KYON at 2006年12月03日 19:47
何度もコメントになってしまいましたすみません>
Posted by ブログ初心者KYON at 2006年12月03日 19:48
ブログ初心者KYON様、いらっしゃい。

こんなvvv
◆ SeeSaaブログ
  ├ カスタマイズ(39)
  └ SeeSaaへの要望(1)
^^^表示にするにはどうするのか と言う質問ですね。

一応答えは、本記事[1]に載っていますが、詳説します。

上の例だと、カテゴリ名はそれぞれ、
『SeeSaaブログ:カスタマイズ』
『SeeSaaブログ:SeeSaaへの要望』
(:は全角コロン)というように、『記事⇒記事カテゴリ』画面で登録してあります。

『:』の左側がベース(主)カテゴリ、右側がサブ(副)カテゴリという具合です。

サブカテゴリが(:以降が)無いカテゴリも可能です(当ブログの『このブログについて』などががそれです)。

また、script内(記事内『[3]』の処理)で並べ替えなどはしていませんので、『記事⇒記事カテゴリ』画面の『表示順』で並びを整えておいてください。そして、副々カテゴリも対応していません。

この説明で、わかりますか? わかんなきゃ聞いてくださいね。
Posted by at 2006年12月03日 20:55
こんにちは!!
無事にできました!!
ありがとうどざいます☆
Posted by ブログ初心者KYON at 2006年12月15日 09:36
お役に立てましたか?
又来てくださいね。
Posted by at 2006年12月15日 20:06
はじめまして☆
NEWマーク、ツリー化を検索していたら
たどり着いた次第です。
本当に探していたカスタムだったので
できたときは感無量でしたっ。
これでブログもバッチリです。

ありがとうございます☆
リンクさせて頂きました。また色々参考にさせていただきますっ。
Posted by はち at 2007年01月31日 23:40
はち様、いらっしゃいませ (^o^)/
> 本当に探していた・・・
お役に立てて、光栄です。まだまだ、私も勉強中です。また覗いてみて下さいね。
Posted by at 2007年02月01日 08:41
はじめまして。
カテゴリのツリー化をしたくて苦戦しておりましたが、大さんのこの記事でやっとできました。出来た時は本当にとても嬉しかったです!
そこで、「参考にさせていただきました」という形でブログの記事中にこちらのサイトを紹介させていただいてもよろしいでしょうか。宜しくお願い致します。<(_ _)>
Posted by ぽむ at 2007年05月22日 21:48
ぽむ様、いらっしゃいませ。
お役に立てて、光栄です。(^o^)/

> ブログの記事中にこちらのサイトを・・・
こんなのでよければ、いくらでも どうぞ・・・

でも、こんなブログを紹介して、ぽむさんのブログの品位が下がっても 知りませんよ。(^_^.)
Posted by at 2007年05月22日 22:36
はじめまして。
この記事のとおりやってみたのですが
ツリー化できません。

tree("リードメール","右");
でやってみたのですが
どこか違うのでしょうか?

ご教授いただけたら幸いです。
ささやかながら応援させていただきました。
Posted by さくらっこ at 2007年06月19日 21:05
さくらっこ さん。確認しました。

> tree("リードメール","右");
treeの第一引数は、""コンテンツの名前。さくらっこ さんのブログのコンテンツ-カテゴリの名前は、そのまま "カテゴリ" なので、『tree("カテゴリ","右");』 と直してみてください。
私のPCに、さくらっこ さんのブログのソースをコピーして、上記を修正したら、Tree化出来ましたので、行けると思います。
Posted by at 2007年06月20日 00:22
できました!

商用の拙いブログなのに
こんなに早くお答えいただき
本当に助かりました。

テンプレ配布先様の所で相談しに
いこうかと思ってたぐらい悩んでました。
お恥ずかしい(TT)。

ありがとうございました。
Posted by さくらっこ at 2007年06月20日 00:55
さくらっこ さん。
お役に立てて、光栄です。
また、なんかあったら、聞いてみてくださいね。答えられることがあるかもしれません。
Posted by at 2007年06月20日 08:34
はじめまして。
大さんのこの記事で簡単にツリー化できました!!
ありがとうございます♪

しかし、カテゴリごとの間に1行空いてしまいます。。。大さんのように詰めて表示するにはどのように設定すればいいのでしょうか?
お時間のあるときでいいですので、教えて頂けますか?宜しくお願いいたします。
Posted by BodyDesigner at 2007年07月20日 20:42
すみません、追記です。

サブカテゴリを1字右にズラしたいのですが、どのようにすればいいのでしょうか?

拙い質問で申し訳ございません。
Posted by BodyDesigner at 2007年07月20日 20:46
BodyDesignerさん、こんばんは。

このページのHTMLの見方って、判りますか?
"右クリック⇒ソースの表示" ですよね。

じゃ、このページのCSSの見方は?
さっき開いた、HTMLのHEAD部分の "?ttp://dai-kasegeruka.seesaa.net/styles-index.css" をクリックすると、開くのです。


まぁ、コレで、"僕のを見てください" って言っちゃうと終わっちゃうんですが、この方法で BodyDesignerさんのページを、ウチのパソコンのローカルディスクに作って、修正してみました。

↓↓↓見てね↓↓↓
http://dai-kasegeruka.up.seesaa.net/image/20070720.JPG
↑↑↑見てね↑↑↑

《質問1の回答》
 ・CSSの文字の高さを変えました。
 ・実際には、 ".side" の "line-height:18px;" を "line-height:120%;" に変えました。

《質問2の回答》
 ・HTMLのジャバスクリプトを修正しました。
 ・実際には、 "function tree(title,position)" の "├" を "  ├" に。
 ・"└" を "  └" に。

HTMLやCSSになれる近道は、"他人のを見る/パクる" 事なのです。
Posted by at 2007年07月20日 22:51
BodyDesignerさん。

コメント入力時のホームページアドレスの入力がまちがっています。

正しくhttp://karada-design.seesaa.net/を入力してくださいね。
Posted by at 2007年07月20日 22:55
大さん、ありがとうございます。
無事にできました♪

あとは、記事の数を表示することと、「NEW」を表示したいと思っております。大さんのソースとにらめっこしているのですが・・・ちょっと難しいです。。
付け足すのは cateCount のところでしょうか?

これからも色々とご指導宜しくお願い致します。

p.s.ホームページアドレス、すみません間違ってましたね。。。(ノ´∀`*)
Posted by BodyDesigner at 2007年07月21日 12:01
BodyDesignerさん、こんにちは。

> 無事にできました♪
おめでとうございます。

"NEW表示" ですが、カテゴリだけは、めちゃめちゃなことをやってます。その他は簡単ですよ。過去に記事でまとめた気がします。探してみてください。
Posted by at 2007年07月21日 13:15
ありがとうございます。探してみますね!

ただ…今は今までの記事を新しいカテゴリに仕分けしているので、それが終わり次第やりますので、その時はまたお世話になります^^
Posted by BodyDesigner at 2007年07月22日 15:02
はじめまして。

カテゴリーのツリー化について質問です。

カテゴリごとの間に1行空いてしまいます。
前にも BodyDesigner さんが質問した記事を読みましたが、よく、わかりません。
もうちょっと、詳しく教えてもらいませんか?
Posted by aiko at 2007年09月28日 17:06
aikoさん、こんばんは。

aikoさんのページで言うと、
『└アフィリエイトって?(1)』

『◆ 日記(1)』
の間が1行あいてるって事でしょうか。

であれば、『└ "+subcategory[i]+"<br /><br />"』の『<br />』を一個取ってみてください。
Posted by at 2007年09月28日 21:39
大さん。おはようございます。

早い対応、ありがとうございます。

今度は、『●カテゴリ』

『◆ はじめに』の間の一行を
詰めるのは、前と同じ作業で
いいのでしょうか?

よろしく、お願いします。




Posted by aiko at 2007年09月29日 12:46
aikoさん、こんにちは。

書いた当初はよかったんでしょうが、現在設定しているHTMLとは、だいぶん違ってますね。

修正箇所は、『//出力』のすぐ下の
  『var tmpHTML="<br>";』

  『var tmpHTML="";』
に、修正してください。m(__)m

記事も、修正しました。^^;
Posted by at 2007年09月29日 15:57
大さん。こんばんわ。

何度もすみません。教えてください。

>記事も、修正しました。^^;

どこを修正したのでしょか?
わかりません。

あと、
◆ 日記(1)

○最近の記事

の所ですが、ここも詰めることができますか?

よろしくお願いします。

Posted by aiko at 2007年09月29日 19:09
aikoさん、こんばんは。

記事のジャバスクリプトの所に、削除する"<br />" を、取り消し線で表現しました。

HTML等を極めるおつもりなら、対象HPのHTMLソースなどを見比べてみる事をオススメします。
Posted by at 2007年09月29日 20:14
大さん。ありがとうございました。

いろいろ、やってみましたが、
訳が分からなくなってきました。

希望のカテゴリのツリー化ができたので
満足してます。

また、何か、あったら、ここに聞きにきます。
ありがとうございました。
Posted by aiko at 2007年09月30日 07:53
はじめまして!!

seesaa専用のカテゴリのツリー化する方法を探しに探して、

ここにたどり着きました。

私は、ブログ作成初心者なので、無事ツリー化設定完了したときは

感動しました。

ありがとうございます。

宜しければ、私のブログでツリー化を紹介させてください。

また、参考にさせていただきたいので、遊びに伺います。

それでは、失礼します。(^^)


Posted by ひでっぴ男 at 2008年05月27日 01:44
こんちは〜
大ちゃん、
ひでっぴさんとこのブログで5日間で2000万稼ぐのどうのこうの・・・ってあったけど。。。
稼げるんか〜?
ワシも仕事やめてやろうかなぁ・・・(^_^;
Posted by ちゃれ at 2008年05月27日 15:40
こんばんわ〜。

ひでっぴ男さん(なんて読むの?)。
私の情報がお役に立てたのかな?そりゃ、良かった。(^^♪

> 宜しければ、私のブログでツリー化を紹介させてください。
どぞどぞ、こんなブログでよろしければ。


ちゃれさん。
> ワシも仕事やめてやろうかなぁ・・・(^_^;
また〜ぁ。判ってるくせにぃ。

ちなみに私の行動基準は、ズバリ、『ガキに話せること。ガキが後ろ指を刺されないこと』に尽きます。仕事でも、遊びでも。
もちろん自分が納得できるってのも重要ですが。

だもんで、自分が納得できても、ガキが後ろ指を刺されるような仕事とかはボツです。

このタガが外れりゃ、一日400マンどころか・・・・・やっぱムリですネェ。^^;
Posted by at 2008年05月27日 23:44
コメントを書く
お名前: [必須入力]

メールアドレス:

ホームページアドレス:

コメント: [必須入力]

認証コード: [必須入力]


※画像の中の文字を半角で入力してください。

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

この広告は1年以上新しい記事の投稿がないブログに表示されております。