seesaa_tips

Seesaaブログ:カテゴリツリー化(新デザインシステム対応)

2016/09/02

今回は、カテゴリをツリー化させる方法を紹介します。


非常に残念ですが、Seesaaブログではカテゴリーのツリー表示ができません!
もちろん、そのような不便な部分に改良を加えたツリー化有志がいるのですが、カテゴリー化している記事を書かれている方は過去のシーサーブログ記事ばかりです。
そこで、私が新デザインシステム化対応の修正をしてみようと思い、今回記事を書いてみました

 

参考にしたブログ

シーサーブログのカテゴリーツリー化は主に2つのサイトで紹介されていましたが、両方とも過去の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>

ソースの再配布はNGですが、ご自身で使うための改造、こちらの記事紹介はOKです。

ソース内の「◆ 」はメインカテゴリの最初に付与されますので、マークを変えたい方はご自由に変更して下さい。

2.HTML編集

①管理画面上から、[デザイン]-[デザイン設定]-[選択しているテンプレタイトル]を選んで画面を表示させます。

Design-thumbnail2.png

②下にスクロールをして、[HTML編集]を選択

blog_import_57a947ed5cb18.png

先ほどコピーしたソースを</body>直前に貼り付け、保存します。

3.カテゴリのコンテンツHTML編集

①管理画面上から、[デザイン]-[コンテンツ]を選んで画面を表示させます。

blog_import_57a947edebb11.png

②ここでは右サイドバーにカテゴリパーツを追加します。

blog_import_57a947eebd6de.png

②カテゴリの設定ボタンを押してパーツ設定画面を表示させ、コンテンツHTML編集を選択します。

blog_import_57a947ed5cb18.png

画面を開くとすでにソースが書かれているので、変更後のソースをコピペして保存します。

変更前

<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」になります。
※ >は全角ですのでご注意下さい。

注意事項

また、過去に作成した記事のカテゴリーの場合、新しく作成した記事カテゴリーと離れている場合にはツリー化がうまく機能しません。そのような場合には、カテゴリー作成画面で表示順序並べることでうまく表示されますので試みてください。

 

-seesaa_tips