【--/--/-- (--)】 スポンサーサイト
上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。

このページの先頭へ
【2005/07/18 (Mon)】 リンク&カテゴリリストのカテゴリ分け

上図のように、カテゴリーを細かく分類&ツリー化させるスクリプト

■■■ 手順1.javascriptを設置 ■■■

管理画面で「テンプレートの設定」のページを開く。
変更したいテンプレの「修正」を選ぶ。
HTMLの編集のソースの一番下、</body>の手前に以下の内容を挿入。

<!--ツリー化スクリプトここから-->
<script type="text/javascript">
<!--
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(/\[(.+)\](.+)/) ) {
this.base = Array('<strong>',RegExp.$1,'</strong>').join('');
this.elem = Array('<a href="',linkUrl,'">',RegExp.$2).join('');
}
} else if (idName.indexOf('archive') > -1) {
var tmpText = objList.innerHTML;
tmpText.match(/\((\d+)\)/);
var tmpCnt = Array(' (', RegExp.$1, ')').join('');
tmpText = objLink.innerHTML;
tmpText.match(/(.+) (\d+)/);
this.base = Array('<strong>',RegExp.$2,'</strong>').join('');
this.elem = Array('<a href="',linkUrl,'">',RegExp.$1,'</a>', tmpCnt).join('');
}
return this;
}
function createTreeList(idName,option) { // version 2.2
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();
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 (linkList.length > 0) {
outText[outText.length] = '<ul>\n';
for (i=0;i<linkList.length;i++) {
outText[outText.length] = Array('<li>',linkList[i].base,option.top).join('');
if (linkList[i].length > 0 && option.sort) linkList[i].reverse();
for (j=0;j<linkList[i].length;j++) {
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'] = ''; /* ツリー本体の最後 */
createTreeList('newentrylist',gTreeOption); // 最新エントリリストのツリー化
createTreeList('entrylist',gTreeOption); // エントリリストのツリー化
createTreeList('commentlist',gTreeOption); // 最新コメントリストのツリー化
createTreeList('tblist',gTreeOption); // 最新トラックバックリストのツリー化
createTreeList('linklist',gTreeOption); // リンクリストのツリー化
createTreeList('categorylist',gTreeOption); // カテゴリリストのツリー化
// -->
</script>
<!--ツリー化スクリプトここまで-->


■■■ 手順2.HTMLの編集のソース中のカテゴリ表示の部分を変更 ■■■

(カテゴリリスト)
<ul>
<!--category-->
<li><a href="<%category_link>" title="<%category_name>"><%category_name> (<%category_count>)</a></li>
<!--/category-->
</ul>

↑の部分を↓の文に書き直す。(コピペでいけるはず)

<div id="categorylist">
<ul>
<!--category-->
<li><a href="<%category_link>"><%category_name>(<%category_count>)</a></li>
<!--/category-->
</ul>
</div>


(リンクリスト)
<ul>
<!--link-->
<li><a href="<%link_url>" title="<%link_name>" target="_blank"><%link_name></a></li>
<!--/link-->
<li><a href="./?admin">管理者ページ</a></li>
</ul>

↑の部分を↓の文に書き直す。(コピペでいけるはず)

<div id="linklist">
<ul>
<!--link-->
<li><a href="<%link_url>" title="<%link_name>" target="_blank"><%link_name></a></li>
<!--/link-->
</ul>
</div>

に直す。
(プラグインの場合は、管理画面で「プラグインの設定」のページを開く。
「カテゴリー」と「リンク」の「HTML編集」を開いて同じように直せばいいはず。)
javascript設置はこれで終わり。


■■■ 手順3.カテゴリー名の修正 ■■■

(カテゴリリスト)
管理画面で「カテゴリーの編集」を開く。
現在あるカテゴリーを全て

[見出し]カテゴリ名

という形に修正してください。(↓図参照)


(リンクリスト)
管理画面で「リンクの編集」を開く。
「カテゴリの編集」のように[見出し]カテゴリ名という形に修正してください

注)[]は必ず半角に。全角だとうまくいきません。
また、一つでも[見出し]カテゴリ名の形に直していないと
うまくいかないので必ず全部修正してください。
スポンサーサイト
このページの先頭へ
【2005/07/17 (Sun)】 ツリー化(画像編)
ツリー化スクリプト
1.HTMLの編集のソース中のエントリ等の部分を変更
を行う。

■■■ ツリーを画像にしたい場合 ■■■

普通のツリー化と同じくHTMLの編集のソースの一番下
</body>の手前に以下の内容を挿入。(コピペ推奨)
赤文字のところが画像を変えるところです。

(ツリー画像有り用スクリプト)
<!--ツリー化スクリプトここから-->
<script type="text/javascript">
<!--
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(/\[(.+)\](.+)/) ) {
this.base = Array('<strong>',RegExp.$1,'</strong>').join('');
this.elem = Array('<a href="',linkUrl,'">',RegExp.$2).join('');
}
} else if (idName.indexOf('archive') > -1) {
var tmpText = objList.innerHTML;
tmpText.match(/\((\d+)\)/);
var tmpCnt = Array(' (', RegExp.$1, ')').join('');
tmpText = objLink.innerHTML;
tmpText.match(/(.+) (\d+)/);
this.base = Array('<strong>',RegExp.$2,'</strong>').join('');
this.elem = Array('<a href="',linkUrl,'">',RegExp.$1,'</a>', tmpCnt).join('');
}
return this;
}
function createTreeList(idName,option) { // version 2.2
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();
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 (linkList.length > 0) {
outText[outText.length] = '<ul>\n';
for (i=0;i<linkList.length;i++) {
outText[outText.length] = Array('<li>',linkList[i].base,option.top).join('');
if (linkList[i].length > 0 && option.sort) linkList[i].reverse();
for (j=0;j<linkList[i].length;j++) {
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'] = '<li class="lst">'; /* ツリー用マーク(通常) */
gTreeOption['end'] = '<li class="end">'; /* ツリー用マーク(末端) */
gTreeOption['leef'] = '</li>\n'; /* 各枝の末尾 */
gTreeOption['top'] = '<ul class="tree">'; /* ツリー本体の最初 */
gTreeOption['btm'] = '</ul>'; /* ツリー本体の最後 */

createTreeList('newentrylist',gTreeOption); // 最新エントリリストのツリー化
createTreeList('entrylist',gTreeOption); // エントリリストのツリー化
createTreeList('commentlist',gTreeOption); // 最新コメントリストのツリー化
createTreeList('tblist',gTreeOption); // 最新トラックバックリストのツリー化
createTreeList('linklist',gTreeOption); // リンクリストのツリー化
createTreeList('categorylist',gTreeOption); // カテゴリリストのツリー化
// -->
</script>
<!--ツリー化スクリプトここまで-->

■■■ ツリーの元になる画像を用意する(通常用と末端用) ■■■

・以下のようなもの(左が通常用、右が末端用)
通常用末端用


FC2管理画面から「ファイルアップロード」で画像2点をアップする。

続いてスタイルシートを記述します。
以下のようなスタイルを「スタイルシートの編集(css)」の最後に追加してください。

ul.tree {
list-style: none;
margin: 0px;
padding: 0px;
}
ul.tree li {
margin: 0px;
padding: 0px 0px 0px 16px;
background-image: url(アップした通常用の画像ファイルURL);
background-repeat: no-repeat;
}
ul.tree li.end {
background-image: url(アップした末端用の画像ファイルURL);
}

アップした画像ファイルURLを記述(例)
通常用:http://blog○.fc2.com/f/○○○/file/cate1.gif
末端用:http://blog○.fc2.com/f/○○○/file/cate2.gif

行間を空けたいとか、フォントサイズを設定したいという場合、
ul.tree {
list-style: none;
margin: 0px;
padding: 0px;
font-size: 希望のフォントサイズ;
line-height: 150%;

}

のようにul.tree内に設定を追加します。
このページの先頭へ
【2005/07/16 (Sat)】 ツリー化スクリプト
管理画面で「テンプレートの設定」のページを開く。
変更したいテンプレの「修正」を選ぶ。

■■■ 1.HTMLの編集のソース中のエントリ等の部分を変更 ■■■

ツリー化したいところを以下(赤文字)の文面に直す。
(テンプレートによって記述方法は様々なので最初見つけるのは
難しいかもしれませんが大体同じようなものなので理解すれば簡単だと思います。)

(最新エントリーリスト)
<ul>
<!--recent-->
<li>
<a href="<%recent_link>" title="<%recent_title>"><%recent_title> (<%recent_month>/<%recent_day>)</a>
</li>
<!--/recent-->
</ul>

日付けごとにツリー化
<div id="newentrylist">
<ul>
<!--recent-->
<li><a href="<%recent_link>" title="<%recent_body>"><%recent_title></a><span>(<%recent_month>/<%recent_day>)</span></li>
<!--/recent-->
</ul>
</div>

日付けごとにツリー化しない
<div id="entrylist">
<ul>
<!--recent-->
<li><a href="<%recent_link>" title="<%recent_body>"><%recent_title></a><span>(<%recent_month>/<%recent_day>)</span></li>
<!--/recent-->
</ul>
</div>


(コメントリスト)
<ul>
<!--rcomment-->
<li>
<a href="<%rcomment_link>#comment<%rcomment_no>" title="<%rcomment_title>"><%rcomment_name>:<%rcomment_etitle> (<%rcomment_month>/<%rcomment_day>)</a>
</li>
<!--/rcomment-->
</ul>

<div id="commentlist">
<ul>
<!--rcomment-->
<li><%rcomment_etitle><br><a href="<%rcomment_link>#comment"><%rcomment_name>(<%rcomment_month>/<%rcomment_day>)</a></li>
<!--/rcomment-->
</ul>
</div>


(トラックバックリスト)
<ul>
<!--rtrackback-->
<li>
<a href="<%rtrackback_link>#trackback<%rtrackback_no>" title="<%rtrackback_title>"><%rtrackback_blog_name>:<%rtrackback_title> (<%rtrackback_month>/<%rtrackback_day>)</a>
</li>
<!--/rtrackback-->
</ul>

<div id="tblist">
<ul>
<!--rtrackback-->
<li><%rtrackback_etitle><br><a href="<%rtrackback_link>#trackback"><%rtrackback_blog_name>(<%rtrackback_month>/<%rtrackback_day>)</a></li>
<!--/rtrackback-->
</ul>
</div>


(リンクリスト)
<ul>
<!--link-->
<li><a href="<%link_url>" title="<%link_name>" target="_blank"><%link_name></a></li>
<!--/link-->
<li><a href="./?admin">管理者ページ</a></li>
</ul>

<div id="linklist">
<ul>
<!--link-->
<li><a href="<%link_url>" title="<%link_name>" target="_blank"><%link_name></a></li>
<!--/link-->
</ul>
</div>


(カテゴリリスト)
<ul>
<!--category-->
<li><a href="<%category_link>" title="<%category_name>"><%category_name> (<%category_count>)</a></li>
<!--/category-->
</ul>

<div id="categorylist">
<ul>
<!--category-->
<li><a href="<%category_link>"><%category_name>(<%category_count>)</a></li>
<!--/category-->
</ul>
</div>


リンクリストとカテゴリリストのツリー化に関しては、
リンクのカテゴリ分け が必要になります。
カテゴリ分けをしていない場合はツリー化は行われません。

■■■ 2. javascriptを設置 ■■■

HTMLの編集のソースの一番下
</body>の手前に以下の内容を挿入。(コピペ推奨)

ツリー画像無し用スクリプト(ツリー画像有り用スクリプトはこちら

<!--ツリー化スクリプトここから-->
<script type="text/javascript">
<!--
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(/\[(.+)\](.+)/) ) {
this.base = Array('<strong>',RegExp.$1,'</strong>').join('');
this.elem = Array('<a href="',linkUrl,'">',RegExp.$2).join('');
}
} else if (idName.indexOf('archive') > -1) {
var tmpText = objList.innerHTML;
tmpText.match(/\((\d+)\)/);
var tmpCnt = Array(' (', RegExp.$1, ')').join('');
tmpText = objLink.innerHTML;
tmpText.match(/(.+) (\d+)/);
this.base = Array('<strong>',RegExp.$2,'</strong>').join('');
this.elem = Array('<a href="',linkUrl,'">',RegExp.$1,'</a>', tmpCnt).join('');
}
return this;
}
function createTreeList(idName,option) { // version 2.2
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();
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 (linkList.length > 0) {
outText[outText.length] = '<ul>\n';
for (i=0;i<linkList.length;i++) {
outText[outText.length] = Array('<li>',linkList[i].base,option.top).join('');
if (linkList[i].length > 0 && option.sort) linkList[i].reverse();
for (j=0;j<linkList[i].length;j++) {
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'] = ''; /* ツリー本体の最後 */
createTreeList('newentrylist',gTreeOption); // 最新エントリリストのツリー化
createTreeList('entrylist',gTreeOption); // エントリリストのツリー化
createTreeList('commentlist',gTreeOption); // 最新コメントリストのツリー化
createTreeList('tblist',gTreeOption); // 最新トラックバックリストのツリー化
createTreeList('linklist',gTreeOption); // リンクリストのツリー化
createTreeList('categorylist',gTreeOption); // カテゴリリストのツリー化

// -->
</script>
<!--ツリー化スクリプトここまで-->


文字の部分が各リストに対してツリー化を実行している部分です。
ツリー化したくないリストがあれば、その部分を削除すればOK。

このページの先頭へ
| BLOG TOP |
このページの先頭へ


CALENDAR

09 | 2017 / 10 | 11
1234567
891011121314
15161718192021
22232425262728
293031----

PROFILE
    FF日記や日常日記ETC....
    当ブログはリンクフリーです。
    コメント&トラバお気軽に♪
    注(関係なさそうなアダルト系トラバは
    迷わず削除します)

    MASTER : RIEMU
    MY SITE :

    Profile
    >> 詳しくはコチラ


CATEGORY
ENTRIES

COMMENTS

TRACKBACKS

ARCHIVES

LINKS

SEARCH THIS SITE

ETC...

vol: 音量小 音量大 BGM【by Z!!! 様】





COPYRIGHTs

【FFXIオンライン】
(C) 2005 SQUARE ENIX CO., LTD. All Rights Reserved.

【大航海オンライン】
(C)2005KOEI Co.,Ltd.All rights reserved.
Copyright (C) 1999-2005 CCR Inc, All Rights Reserved. Published by SEGA

【FC2】

上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。