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

「SyntaxHighlighter」のカスタマイズ

「SyntaxHighlighter」は、自身のサイトで使うにあたって、きめ細かい設定をすることがで...

記事を読む

Message

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

日本語が含まれない投稿は無視されますのでご注意ください。(スパム対策)

no image
エコノミークラス症候群

エコノミークラス症候群とは?  エコノミークラス症候群は、旅行に関連

no image
巻き爪・陥入爪

巻き爪・陥入爪ってなに?  巻き爪とは、主に親指の爪の両端が「巻く」

結婚お祝い金

披露宴に出る場合 祝儀袋の渡し方 受付でお祝いの言葉を述べ、祝儀袋をふ

結婚祝い

お祝い品選びと費用 お祝い品の選び方 新居を構える二人には、生活実用品

no image
ダニ除去マニュアル

ダニ除去マニュアルについて  基本的なダニアレルゲン対策としては、

→もっと見る

PAGE TOP ↑