今回は、カテゴリをツリー化させる方法を紹介します。
非常に残念ですが、Seesaaブログではカテゴリーのツリー表示ができません！
もちろん、そのような不便な部分に改良を加えたツリー化有志がいるのですが、カテゴリー化している記事を書かれている方は過去のシーサーブログ記事ばかりです。
そこで、私が新デザインシステム化対応の修正をしてみようと思い、今回記事を書いてみました
とりあえず、カテゴリーツリー化するとどうなるのか？をイメージしてもらうために、サンプルを作成しました。
参考にしたブログ
シーサーブログのカテゴリーツリー化は主に２つのサイトで紹介されていましたが、両方とも過去のSeesaaブログのみにしか対応しておらず、新システムでは機能しません。
シス日記さん
Lc-Factory＠Seesaaブログさん
設置方法
Lc-Factory＠Seesaaブログさんの方ではソースの再配布が禁じられていますので、シスさんのソースをベースにSeesaaブログ新システム対応していきます。
1.JavaScriptをコピーする
以下のソースはメモ帳等のエディタにコピペしてください。
|
<SCRIPT language=”JavaScript”>
<!–
//////////////////////////////////////////////////////////////////////////////////
tree();
//////////////////////////////////////////////////////////////////////////////////
function tree()
{
var category=new Array();
var subcategory=new Array();
category[0]=null;subcategory[0]=null;
var tmp=document.getElementById(‘systree’).getElementsByTagName(‘div’);
var target=tmp[0];
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>
|
ソースの再配布はＮＧですが、ご自身で使うための改造、こちらの記事紹介はOKです。
ソース内の「◆ 」はメインカテゴリの最初に付与されますので、マークを変えたい方はご自由に変更して下さい。
2.HTML編集
①管理画面上から、[デザイン]-[デザイン設定]-[選択しているテンプレタイトル]を選んで画面を表示させます。
②下にスクロールをして、[HTML編集]を選択
先ほどコピーしたソースを</body>直前に貼り付け、保存します。
３．カテゴリのコンテンツHTML編集
①管理画面上から、[デザイン]-[コンテンツ]を選んで画面を表示させます。
②ここでは右サイドバーにカテゴリパーツを追加します。
②カテゴリの設定ボタンを押してパーツ設定画面を表示させ、コンテンツHTML編集を選択します。
画面を開くとすでにソースが書かれているので、変更後のソースをコピペして保存します。
変更前
|
<section class=”module module–category”>
<h3 class=”module__heading”><% parts.title -%></h3>
<div class=”module__body”>
<ul>
<% loop:list_category -%>
<li><a href=”<% category.page_url -%>”><% category.name | tag_break -%></a> <span>(<% category.article_count ?-%>)</span></li>
<% /loop -%>
</ul>
</div>
</section>
|
変更後
|
<section class=”module module–category”>
<h3 class=”module__heading”><% parts.title -%></h3>
<div id=”systree”>
<div class=”module__body”>
<ul>
<% loop:list_category -%>
<li><a href=”<% category.page_url -%>”><% category.name | tag_break -%> <span>(<% category.article_count -%>)</a></span></li>
<% /loop -%>
</ul>
</div>
</div>
</section>
|
赤文字の部分を修正しました。
こうすることで、カテゴリーのツリー表示が可能になります。
4．カテゴリのコンテンツメニューを作成
ソースの修正は終わりましたので、ツリー化させるためのカテゴリーを作成します。
作成するにあたっての注意点として、カテゴリの名前を
[メインカテゴリ]＞[サブカテゴリ]
という形で作成してください。
例）メインカテゴリを「ブログTips」、サブカテゴリを「ブログTips」とする場合、
カテゴリ名は「ブログTips＞ブログTips」になります。
※ ＞は全角ですのでご注意下さい。
注意事項
また、過去に作成した記事のカテゴリーの場合、新しく作成した記事カテゴリーと離れている場合にはツリー化がうまく機能しません。そのような場合には、カテゴリー作成画面で表示順序並べることでうまく表示されますので試みてください。
