カエテンジョイSeesaa版（旧デザインシステム）

トップページ ＞ その他カスタマイズ情報 ＞ カテゴリのツリー化

カテゴリをツリー化する方法を説明します。




下記図のようにカテゴリをツリー化する方法です。




ネタ元はこちらのブログさんです。
http://siss.seesaa.net/article/25132142.html
この情報をアレンジしたものをご案内します。

また、当テンプレートで設置する場合ですので
その他のSeesaaテンプレートには適用できません。

１．コンテンツのカテゴリのHTMLを書き替えします

管理画面　→　デザイン　→　コンテンツ で、カテゴリのHTMLを書き替えします。

●書き替えするHTMLソース

※ソースをダブルクリックしてその状態でコピーしてください
【ご注意】Google Chromeは ドラッグ でコピーしてください。ダブルクリックしてコピーすると文字化けします。

<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>

<script type="text/javascript">
<!--

/////////////////////////////////////////////////////////////////////////////////
tree("カテゴリ","右");     //←カテゴリ名と置いているサイドバーが左か右か
/////////////////////////////////////////////////////////////////////////////////

function tree(title,position)
{
var category=new Array();
var subcategory=new Array();
category[0]=null;   subcategory[0]=null;

if(position=="左"){
position="sidebarbody-l";
}else if(position=="右"){
position="sidebarbody-r";
}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="";
for(i=1;i<(category.length-1);i++){
if(subcategory[i]==null){
tmpHTML+=("■<b>"+category[i]+"</b><br />");
}else{
if(category[i]!=category[i-1])  tmpHTML+=("■<b>"+category[i]+"</b><br />");
if(category[i]==category[i+1]){
tmpHTML+=("├"+subcategory[i]+"<br />");
}else{
tmpHTML+=("└"+subcategory[i]+"<br />");
}
}
}
target.innerHTML=tmpHTML;
}
 
// -->
</script>

上記は右サイバーにコンテンツのカテゴリを設置した場合です。
左サイドバーに設置する場合は、灰色行のソースを、次のように変更します。

tree("カテゴリ","左");     //←カテゴリ名と置いているサイドバーが左か右か

右 → 左 に変更します。

コンテンツ名を「カテゴリ」から「別の名前」に変更している場合は、
カテゴリ → その別の名前 に変更します。



コンテンツHTMLの書き替え方法はこちらを参考にしてください。
５．コンテンツ記事HTMLを書き替えする

２．カテゴリ名の設定をします

カテゴリ名は
のように、親カテゴリ名と子カテゴリ名の間に「 - 」(半角ハイフン)を入れます。
このようにカテゴリ名をしないとツリー化はできません。

カテゴリ名は、管理画面　→　設定　→　カテゴリ設定　で変更します。

カテゴリのツリー化関連ページ

ブログ側の広告を非表示にする

続きを読む文言の設定

続きを読むをクリック時の表示について

グローバルメニュー応用編

ヘッダーナビを固定する

PCとスマホで改行を自動修正する

広告を2つ横並びにする

記事一覧を2段組みにする