シス日記

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

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

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

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

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



【設置方法】

１．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）上記ソースの「◆　」は各メインカテゴリの頭に付きます。
　　各自好きなように変更してください。


２．HTML編集

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

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

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


３．コンテンツ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)


４．サブカテゴリを作成

◆ 日記
├バトン(10)

この赤い部分です。

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

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

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

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


５．再構築する

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



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


もし分からないことがあれば、コメントにて質問していただければ
答えられる範囲でお答えします。