JUGEM:子カテゴリーを作る(ツリー化)
公開日: : 最終更新日:2016/03/24 JUGEMブログ編集, WEB制作
1.カテゴリーの編集
JUGEMブログの管理画面にて
書く > カテゴリーの編集
をクリックする。
2.カテゴリー名の変更
登録しているカテゴリーを
親カテゴリー名(子カテゴリー名)
に書き換える。
※()は半角で入力する。
3.テンプレートの編集
JUGEMブログの管理画面にて
デザイン > HTML・CSS編集
をクリックする。
4.HTML編集フォームの書き換え
① HTML編集フォーム内の{category_list}を探し、
{category_list}
↓
<div id="categorylist"> {category_list} </div>
と、書き加える。
② HTML編集フォーム内の</body>の直前に以下のスクリプトを貼り付ける。
<script type="text/javascript" language="javascript"> <!-- //カテゴリーリストでサブカテゴリーがあるっぽく表示する //ツリー化スクリプト ver 2 edit by stroll function makeTreeElements (idName,objList) { if (!objList.innerHTML) return; var objLink = objList.getElementsByTagName('a')[0]; var linkUrl = objLink.getAttribute('href'); if (idName.indexOf('comment') > -1 || idName.indexOf('tb') > -1) { var tmpText = objList.innerHTML.split("⇒"); tmpText[0] = tmpText[0].slice(0,tmpText[0].search(/<BR/i)); this.base = Array('<a href="',linkUrl,'">',tmpText[0],'</a>').join(''); this.elem = objLink.innerHTML; } else if (idName.indexOf('entry') > -1) { var tmpText = objList.innerHTML; tmpText.match(/¥((¥d¥d¥/¥d¥d)¥)/); this.base = Array('<strong>[',RegExp.$1,']</strong>').join(''); this.elem = Array('<a href="',linkUrl,'">',objLink.innerHTML,'</a>').join(''); } else if (idName.indexOf('link') > -1) { var tmpText = objList.innerHTML; if ( tmpText.match(/¥[(.+)¥](.+)/) ) { this.base = Array('<strong>[',RegExp.$1,']</strong>').join(''); this.elem = Array('<a href="',linkUrl,'" target="_blank">',RegExp.$2,'</a>').join(''); } } else if (idName.indexOf('category') > -1) { var tmpText = objList.innerHTML; if ( tmpText.match(/>(.+)¥((.+)¥).+(¥s¥(.+¥))/) ) { this.base = Array(RegExp.$1).join(''); this.elem = Array('<a href="',linkUrl,'"> ',RegExp.$2, '</a>', RegExp.$3).join(''); } else { this.base = Array('<a href="',linkUrl,'">',tmpText,'</a>').join(''); this.elem = 'null'; } } return this; } function createTreeList(idName,option) { var objFocus = this.document.getElementById(idName); if (!objFocus) return; if (!objFocus.innerHTML) return; var objLists = objFocus.getElementsByTagName('li'); var linkList = new Array(); var outText = new Array(); var linkListNum = new Array(); var count = 0; var tempDispNum = ''; if (objLists.length > 0) { for (i=0;i<objLists.length;i++) { var chckFlag = true; var elemText = new makeTreeElements(idName,objLists[i]); if (!elemText.base || !elemText.elem) return; for (j=0;j<linkList.length;j++) { if (linkList[j].base.indexOf(elemText.base) > -1) { chckFlag = false; linkList[j][linkList[j].length] = elemText.elem; } } if (chckFlag) { var tmpNum = linkList.length; linkList[tmpNum] = new Array(); linkList[tmpNum][0] = elemText.elem; linkList[tmpNum].base = elemText.base; } } if (idName == 'categorylist' && linkList.length > 0) { for (i=0;i<linkList.length;i++) { linkListNum[i] = 0; for (j=0;j<linkList[i].length;j++) { if (linkList[i][j] != 'null' && linkList[i][j].match(/¥s¥((.+)¥)/)) { linkListNum[i] = linkListNum[i] + parseInt(RegExp.$1); } } } } if (linkList.length > 0) { outText[outText.length] = '<ul>¥n'; for (i=0;i<linkList.length;i++) { tempDispNum = ''; if (idName == 'categorylist' && linkListNum[i] > 0) { tempDispNum = ' ('+linkListNum[i]+')'; } outText[outText.length] = Array('<li>',linkList[i].base,tempDispNum,option.top).join(''); if (linkList[i].length > 0 && option.sort) linkList[i].reverse(); for (j=0;j<linkList[i].length;j++) { if (linkList[i][j] != 'null') { outText[outText.length] = (j == linkList[i].length - 1) ? option.end : option.list; outText[outText.length] = Array(linkList[i][j],option.leef).join(''); } } outText[outText.length] = Array(option.btm,'</li>').join(''); } outText[outText.length] = '</ul>¥n'; objFocus.innerHTML = outText.join(''); } } } var gTreeOption = new Array; gTreeOption['sort'] = false; /* ツリー内の表示順 true:並び替える false:そのまま */ gTreeOption['list'] = ' ├ '; /* ツリー用マーク(通常) */ gTreeOption['end'] = '└ '; /* ツリー用マーク(末端) */ gTreeOption['leef'] = '<br />¥n'; /* 各枝の末尾 */ gTreeOption['top'] = '<br />¥n'; /* ツリー本体の最初 */ gTreeOption['btm'] = ''; /* ツリー本体の最後 */ gTreeOption['num'] = 0; /* ()の中身の数の合計数(値を変更しないでください) */ createTreeList('newentrylist',gTreeOption); // 最新エントリリストのツリー化 createTreeList('entrylist',gTreeOption); // エントリリストのツリー化 createTreeList('commentlist',gTreeOption); // 最新コメントリストのツリー化 createTreeList('tblist',gTreeOption); // 最新トラックバックリストのツリー化 createTreeList('linklist',gTreeOption); // リンクリストのツリー化 createTreeList('categorylist',gTreeOption); // カテゴリリストのツリー化 // --> </script>
以上の作業で、Jugemブログのカテゴリーをツリー化する作業は終了です。
関連記事
-
「SyntaxHighlighter」を使って、行番号のついたソースコードを表示する方法
他のサイトでよく見る、行番号のついたソースコードを表示してくれる「SyntaxHighlighter...
-
「SyntaxHighlighter」のカスタマイズ
「SyntaxHighlighter」は、自身のサイトで使うにあたって、きめ細かい設定をすることがで...
- PREV
- 水玉背景のジェネレーター
- NEXT
- WordPressの条件分岐:モバイルとPCで別表示に変える