2006年10月09日

カテゴリをツリー化

サイドバーのカテゴリが増えてくると見にくくなってしまいます。
ただ並んでいるだけでなく綺麗に整理したいですよね。

カテゴリをツリー化してみましょう。

ツリー化を行うことによってサブカテゴリが作られ、
カテゴリーが増えても綺麗に整理できます。

実際にどのようになるのかはこのブログのカテゴリの部分を見てください。

Des notes de KOHtanさんで紹介されている方法を元に私も設置してみました。
以下に自分なりに分かりやすく設置方法を纏めておきます。



【設置方法】

1.Javascriptを作る

◆ 日記       ←メインカテゴリ
├バトン(10)   ←サブカテゴリ

カテゴリが上記のようになるのを目指します。

メモ帳などに以下をコピペして下さい。

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

//////////////////////////////////////////////////////////////////////////////////
tree("カテゴリ","右or左");   //←自分のブログのカテゴリ名
//////////////////////////////////////////////////////////////////////////////////


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>

上記の赤い部分を自分のブログに合わせて変更する。

tree("カテゴリ名","カテゴリがあるのはどちらのサイドバーか");

例)右サイドバーにカテゴリがあり、カテゴリ名が「カテゴリ」の場合
tree("カテゴリ","右");

注1)カテゴリ名はメインカテゴリ名ではありません。
  うちのブログで「カテゴリ」となっている部分です。
  大抵のブログは「カテゴリ」や「Category」という名称のはずです。


注2)上記ソースの「◆ 」は各メインカテゴリの頭に付きます。
  各自好きなように変更してください。


2.HTML編集

マイブログ→デザイン→HTML→HTMLの追加
(過去に追加している場合はそれを編集するか、
 今回追加したものに過去のも合わせて編集)

一番最後の「</div>」と「</body></html>」の間に上で作ったスクリプトを
コピペして保存する。

注)今回作ったものを「適用」するのを忘れずに。


3.コンテンツHTML編集

マイブログ→デザイン→コンテンツ→カテゴリ
→右上の「コンテンツHTMLの編集」

変更前
<div class="sidetitle"><% content.title %></div>
<div class="side">
<% content.header -%>
<% loop:list_category -%>
<a href="<% category.page_url %>"><% category.name | tag_break %></a>(<% category.article_count | __or__ | echo("0") %>)<br />
<% /loop -%>
<% content.footer -%>
</div>


変更後
<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>

</a>の位置が変わっただけ。

これを行うことで以下のようにサブカテゴリに記事数が表示される。
◆ 日記
├バトン(10)


4.サブカテゴリを作成

◆ 日記
バトン(10)

この赤い部分です。

通常カテゴリを追加するのと同様に
マイブログ→記事→記事カテゴリ

カテゴリ名を「メインカテゴリ名>サブカテゴリ名」とします。
「>」は全角であることに注意して下さい。

例)メインカテゴリ「日記」にサブカテゴリとして「バトン」を追加
記事カテゴリ名「日記>バトン」

メインカテゴリ、サブカテゴリは今後いくらでも増やせます。


5.再構築する

まずトップページを再構築して、出来てるか確認します。
ちゃんと出来ていたらブログ全体を再構築しましょう。
カテゴリがツリー化されていれば成功です。



読んでいるだけで理解するのは大変なので、一度上記の手順で編集してみましょう。
実際にやることによって「意外にに簡単かも」って思えるでしょう。


もし分からないことがあれば、コメントにて質問していただければ
答えられる範囲でお答えします。
posted by シス at 14:51 | Comment(41) | 日記>ブログカスタマイズ | *
この記事へのコメント
だめだああああああ
サッパリワカラン・・・_| ̄|○
私の頭のOSをなんとかしてくらさい・・・_| ̄|○
でも、おかげでシスさんの知的な部分に
ご飯3杯いけますた(*´д`*)ハァハァ

お洋服、いいの買えたですか〜♪?
漫画読み終わったのですが、あれって途中でおわっちゃってるよね〜><??
Posted by リトルラビ at 2006年10月10日 07:46
私もわからん分からん言いながら朝からずっとやってたんよorz
でも出来たのは超地味という・・・
というかJavascriptは拾ってきたのに何処でこんなに迷ったのかとw

後はラビさんのブログっぽく、自分のコメントだけ色付けたいんだけどね〜。
どっかにJavascriptおっこって無いかしらw

洋服は・・・洋服は・・・
連休引きこもってたよ私orz
買い物行こうって言われた気がするけど断ったしなぁ・・・
恋をしたら頑張るよ(ぉぃ
Posted by シス at 2006年10月10日 07:59
ぁ、あと漫画は1日2ページ更新らしいよ。
Posted by シス at 2006年10月10日 08:27
ありがとうございました!
どこで探して説明文を読んでも、チンプンカンプンなわたしで
諦めていましたが、シス様のおかげで、なんとかこんなわたしでも
できました!
本当にありがとうございました!
すごくわかりやすかったです(*^_^*)
感謝しております!
ありがとうございました!
Posted by ありん at 2007年10月31日 14:30
ぉ〜、稚拙な文章だったと思いますが
お役に立てて嬉しいです!><
しかし、シス様なんて((((;゚Д゚)))
私は他サイト様からやり方を教えてもらってるだけのヘタレorz

シーサーブログは色々カスタマイズできますからね。
うちのブログも色々やってますが
その中でも「クッキー保存」なんて便利ですよ!
もしよければ、右のカテゴリから「ブログカスタマイズ」でやり方が乗ってます。
Posted by シス at 2007年10月31日 14:50
初めまして、お邪魔します。

この度の記事、大変参考になりました。有り難う御座いました!!

数ある、その他の同様記事の中で最も判りやすく、
ヘナチョコ知識の俺でも何とかなりました。

どうもお世話になりました´ω`)ノ
Posted by imorin at 2009年08月05日 14:59
そう言ってもらえると嬉しいです!
私もヘナチョコなので、詳しく書いておかないと後で何をしたか分からなくなってしまうのですよね^^;
Posted by シス at 2009年08月05日 18:29
ものすごくわかりやすいです、、。ほんとに。
ただ、質問があってコメントさせて頂きますm_ _m

サブカテゴリを作ったところは、1行1行詰まっているのですが、
サブカテゴリを作っていないところは、


   (スペースが1行分あいている。)


となってしまいます。
このスペースを無くすにはどうしたらよいのでしょうか?
(自分のブログURLを貼りましたので、見て頂けたら幸いです。
よろしくお願いしますm_ _m

Posted by D猫 at 2009年08月29日 02:43
こんにちは〜。

ブログ拝見させていただきましたっ!(゚∇゚〃



って、ええええええ!!!
ニコニコ動画で超超有名なピアノ動画アップされている方じゃないですか((((;゚Д゚)))
何度も見させていただいています!






っと、本題を忘れるところでした(汗
行間が一行空くという事は、2回改行されているという事ですね。
ここでは<br>が改行を意味する記号となっています。
<br><br>となっている所(2か所)を、<br>に直せば行間が詰まると思いますよ〜。
Posted by シス at 2009年08月29日 08:08
おおお、早い返信ありがとうございますm_ _m
(&動画みてくださっていたとは嬉しい限りですm_ _m

><br><br>となっている所(2か所)を・・・

デザイン→コンテンツ→「カテゴリ」→コンテンツHTML編集

というところでしょうか?
(うう、、どこで編集するかわかりますでしょうか?
 スタイルシート編集でもなさそうだし。。

時間があるときでよいです、、
よろしくお願いしますm_ _m
Posted by D猫 at 2009年08月29日 08:58
言葉足らずですいません!
このブログの記事の「1.Javascriptを作る」でコピペしたヤツですね〜。
具体的に言うと、下の方の「//出力」以下にある<br><br>二箇所です。

「マイブログ→デザイン→HTML」から、書き換えれば大丈夫だと思いますよ〜。
Posted by シス at 2009年08月29日 19:55
シスさん、はじめまして。
最近ブログを始めて、ツリー化したいと思い色々検索していたら、たどり着きました。
非常にわかりやすい説明で、無事ツリー化できました。
ありがとうございました。
Posted by Nのすけ at 2009年08月30日 00:47
どうもはじめまして〜。
無事にツリー化出来たようでなによりです!

そしてiPhoneかっこよす・・・
Posted by シス at 2009年08月30日 02:40
シスさん、
丁寧に説明してくだすったおかげで
無事にカテゴリ改行無になりましたm_ _m

今ブログの引越しを考えているところだったのです。
SeeSaaの使い勝手はまだよくわかりませんが…

IceSpaは楽しい!
ありがとおうございましたm_ _m
Posted by D猫 at 2009年08月30日 04:30
無事出来たようでよかったですっ!

他のブログ使ったことないのでよく分かりませんが、
seesaaの使い勝手はあんまり良くない気もしますね・・・
頑張っていろいろカスタマイズしたりもしてますが、他のブログだとデフォで備わっている機能だったりしますし(汗
昔、ネトゲ日記でSSを大量にアップする事もあり、アップロード出来るファイルサイズの合計が大きかったseesaaを選んだのですが、今は何処も結構容量大きいみたいですしね〜。

まぁ、一時期記事を投稿しても全く反映されなかったりという時期もありましたが、最近は安定しているようですし、悪くはないのかな?


>IceSpaは楽しい!
全力で同意せざるを得ない。
Posted by シス at 2009年08月30日 05:34
1ヵ月くらい前にお世話になったD猫ですm_ _m

Seesaa、どうも自分には使いにくくて(記事投稿のときにプレビュー画面がない、、)
結局アメーバがメインになりそうです

色々と教えてくだすったのにアメーバに浮気してしまいすいません&ありがとう!を言いたくてきました

では(=゚ω゚)ノSpa
Posted by D猫 at 2009年10月05日 16:29
わざわざお礼を言いに来ていただいて、こちらこそありがとうございました。

私も、最初は人目に付きにくい昔の日付で投稿して、色々修正した後に最新の日付に修正とかよくやってました(汗
記事を確認するだと、正確なプレビューが見れないんですよね(´・ω・`)

私も引越しする機会があったらアメーバにしてみようかしら(゚∇゚〃
Posted by シス at 2009年10月07日 00:17
はじめまして。seesaaにはツリー表示が最初からないので
なんとかしてできないかなぁ〜と必死に探していました。

私でもなんとかできました。

ありがとうございました!!
Posted by セブ島リンク at 2010年07月25日 15:51
未だにツリー表示が無いんですね!
無事に出来たようでなによりです^^
Posted by シス at 2010年07月27日 01:13
はじめまして。

当方もseesaaブログを利用していまして、今回カスタマイズを行う際、
この『カテゴリをツリー化』の記事内容を参照させて頂きました。
大変分かりやすい内容で、すぐに理解でき反映させることができました。
本当にありがとうございました。

なお、お世話になりましたので、勝手ながら
当ブログ記事中に、御ブログ記事のリンクを貼らせて頂いたのですが、差し支えなかったでしょうか…?

今後も色々と参考にさせて下さい。どうぞよろしくお願いいたします。
Posted by at 2011年01月15日 12:18
はじめまして〜。

お役に立てて何よりです。
なるべく分かりやすく書いておかないと、後で自分が何をやっていたのか分からなくなるのでw

>リンクを貼らせて頂いたのですが、差し支えなかったでしょうか…?
ブログの方見させていただきました^^
リンクの方は貼っていただいて問題ありません〜。
Posted by シス at 2011年01月16日 02:44
はじめまして。
HP風にseesaaをカスタマイズ中で、貴サイトを参照させて頂いています。

ツリー化に苦労しています。
みなさん「すぐ出来た」とのことですが、私、上手く出来ないのです。
何かが違うのだろうと思うのですが、その何かが不明です。
ソースを見ても、ツリー化されている他の方々と同じに感じるのですが・・・
アドバイスお願いします。
Posted by saya at 2011年09月27日 15:27
はじめまして。
記事など少ないうちにカスタム化をと思い、
カテゴリのツリー化のみしています。
ですが、上手く表示されません。
まだ記事内容は「テスト」のみでページも全部で1ページの状態です。
どこかがおかしいのでしょが、見てもらうことできますか?
宜しくお願いします。
Posted by san at 2011年09月28日 13:51
すみません、出来ました。
IEのJAVが OFFになっていました。
ONにしたらできました。
Posted by san at 2011年09月28日 13:56
できました。
IE JavaScriptをONにするべく、セユリテーを規定値にしたら
表示が上手く出来ました。
お騒がせしてすみませんでした。
Posted by saya at 2011年09月28日 14:11
シスさん、はじめまして。
seesaaブログを新たに作ることになり、こちらのサイトを利用させていただいています。

メインとサブカテゴリはすぐに作成できました!
ただ、メインカテゴリの下に、新たにサブカテゴリを作るには
どうしたらいいのかがわからないのですが。。。

よろしくお願いします。
Posted by emi at 2011年10月01日 01:41
■sanさん sayaさん
上手く出来たようで良かったです。


■emiさん
お返事遅くなって申し訳ありません。
カテゴリの作成が上手く言っているのであれば後は、

メイン>サブ1
メイン>サブ2

と増やして行けば

メイン
 サブ1
 サブ2

となります。
Posted by シス at 2011年10月09日 10:37
はじめまして☆
seesaaブログのカテゴリのツリー化で検索していて
ようやく分かりやすいサイトに辿り着き、なんとか
ツリー化できました♪
本当にありがとうございます^-^

ツリー化はできたのですが、メインカテゴリの文字が
サブカテゴリよりも小さいので、できればサブカテゴリと同じ大きさにしたいのですが、何か方法はございますでしょうか(>_<)

もし宜しかったら教えていただけますと大変たすかります<(_ _)>
Posted by 大福 at 2011年10月19日 16:25
はじめまして〜。
もう自力で解決されていらっしゃるかも知れませんが…

フォントサイズ等は基本的にスタイルシートで設定されているはずです。
メインカテゴリは普通の文字で、サブカテゴリはクリックするとリンクに飛べるようになっていますよね?
この、クリックできる文字とクリックできない文字のフォントサイズが、スタイルシートでそれぞれ別の文字サイズに設定されているのが原因でしょう。

デザイン→デザイン一覧→自分が適用しているタイトルをクリック

.side {    ←クリックできない文字の設定
.side a{   ←クリックできる文字の設定
の中のfont-sizeの値を同一に設定

で、多分行けるはずです。
Posted by シス at 2011年10月23日 06:18
おお〜〜〜〜〜(#^.^#)
できましたです〜〜〜〜〜〜!!!
本当に本当にありがとうございます!
分かりやすく、優しく教えて下さり
感謝です!!
大変助かりました<(_ _)>
Posted by 大福 at 2011年10月27日 10:51
良かったです(゚∇゚〃
Posted by シス at 2011年10月28日 20:22
ありがとうございます。出来ました!!
Posted by キリコ at 2012年01月05日 15:16
いえいえ〜。
出来たようで良かったです(゚∇゚〃
Posted by シス at 2012年02月21日 21:21
はじめまして、こんばんわ。

ツリー化したくて探していたらここに辿りつきました。

シスさんの説明ものすっごくわかりやすいです^^

ですが、一度はツリー化できたのに、テンプレートを替えてから新たにやり直したのですが何度試してみてもツリー化されません(泣)

何が原因なのか私にはさっぱりわからなくてお手上げ状態です・・・。

とても図々しいお願いですが、もしわかるようでしたら手助けお願いできますでしょうか?
Posted by chico* at 2012年07月11日 21:35
一度全部初期化してもう一度やり直してみたらできました!

すみませんでした^^;
Posted by chico* at 2012年07月13日 10:38
はじめまして。
seesaaブログのカテゴリーをツリー化できないものかと
カスタマイズサイトをさんざん訪ねつくし、
ようやくここでゴールできました。

編集の仕方が丁寧で、とてもわかりやすく参考になりました。
ありがとうございましたT0T/~
Posted by ポポ at 2012年09月30日 11:31
お世話になります。

ツリー化はできたのですが、3.コンテンツHTML編集をしたのですが、同じサブカテゴリの記事を二つ書いても、記事数がカウントされず、1のままです。

どうすればいいのでしょうか?

教えていただけると助かります。
よろしくお願いします。
Posted by ゆずMAN at 2012年11月10日 20:28
放置しすぎました…

>chico*様
自力で解決されたようでよかったです^^

>ポポ様
私自身がこういうのに疎いので、出来る限り分かり易く記述しておかないと後で自分が分からなくなるという・・・w

>ゆずMAN様
質問してくださっていたのにブログを放置しており申し訳ありません。おそらくもう見られていないともいますので回答は割愛させていただきます。
Posted by シス at 2012年12月26日 00:55
はじめまして。
seesaaブログでカテゴリのツリー化をしたくてこちらのページに
たどり着きました。とっても参考になりました!!

それで、過去記事を全てツリー化して気づいたのですが、カテゴリ
枠内に全ての内容が収まっていない?ようなのです。
今日現在「Star Ratingとは?」というカテゴリが一番下にあるの
ですが、実際はその下に3つカテゴリが設定されているのですが
画面上に出てきません。

スタイルシートで縦幅変更すれば良いかな?と思って調べてみたの
ですが、どの部分を変更すれば良いのか分かりません。
(横幅の変更は検索などに引っかかってくるのですが・・・)
そもそもスタイルシートをいじれば直るものなのかどうかも私には
判断できず(^^;)図々しくもシスさんにご教授いただきたく書き込み
いたしました。

もし解決策ありましたら返答いただけると嬉しいです。
宜しくお願いしますm(__)m


Posted by yuzu-shiba at 2013年10月18日 16:56
たびたびすみません。自己解決しました(^^;)
デザイン→コンテンツ→カテゴリの「表示件数」が20になっていたため
20個しか表示されていなかったようです。
とりあえず最大の100にしておきました・・・
でもこれって100超えたら同じ問題にぶち当たりますよね。
まぁ普通そこまでは増えないってことでしょうか。
お騒がせしました〜
Posted by yuzu-shiba at 2013年10月18日 19:40
HPを放置してしまっていて申し訳ございません。
自己解決されたようでよかったです。
Posted by シス at 2013年11月11日 07:47
コメントを書く
お名前: [必須入力]

メールアドレス:

ホームページアドレス:

保存しますか?

コメント: [必須入力]

×

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