クリスマスツリーに肖ってツリー化の手引き
今日はクリスマス。なのでヒヨコサンタからささやかなクリスマスプレゼントです。
JUGEMで超有名なJUGEMカスタマイズ講座のツリー化スクリプト ver 2ですが、それをFC2テンプレートでも使用できる方法を書いておきます。コメントツリー化って何？って方は当ブログのサイドメニューRecent Comment等をご覧ください。
- 当方にはjavaスクリプトの知識などありませぬ。
- コメント欄にも皆さんが下さった情報が載っているので見てください。
- 質問がある場合、該当するブログアドレスがあると助かります。宜しく。
- スクリプト作者に質問を持ち込むような行為は控えてください
- スクリプト作者のページが閉鎖したかも。2008年8月6日NEW！
■ プラグイン対応テンプレートツリー化について
プラグインに対応したテンプレートをツリー化する場合の書き換えるタグは管理画面→プラグインの設定→ツリー化したいタイトルのHTML編集から行ってください。
■ ツリー化の手引きHTML版
半角文字列挙改行問題でこのページはFirefox等のブラウザで読みがたい状態になる場合があります。なので一応、HTML版を作っておきました。
※あ！ばらやっ* by ショコラ*様からリンクツリー方法の情報をいただきましたので載せておきました。ありがとう。
■ ツリー化の手引き簡易バージョン
ツリー簡易バージョンなるものも作りました。HTMLソースをすっきりさせたい人は下記リンクからどうぞ。
■ 最エントリ・カテゴリーのツリー化
NICOさんが最新エントリ・カテゴリーのツリー化を紹介しております。
■ ツリー化プラグインも公開されています
上記の方法が面倒と言う人は共有プラグインをツリー化で検索してみてください。結構な数のプラグインがヒットするはずです。面倒な書き換えはしなくていいのでお勧めかもです。
スポンサード リンク
■ コメント・トラックバックツリー化の手引き
★ Recent Comments
<ul>
<!--rcomment-->
<li><a href="<%rcomment_link>#comment<%rcomment_no>"><%rcomment_name>:<%rcomment_title></a><span>(<%rcomment_month>/<%rcomment_day>)</span></li> <!--/rcomment-->
</ul>
上記のソース部分を下記のように修正します。コピペでOKです。
<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>
★ Recent Trackbacks
<ul>
<!--rtrackback-->
<li><a href="<%rtrackback_link>#trackback<%rtrackback_no>" title="<%rtrackback_excerpt>"><%rtrackback_blog_name>:<%rtrackback_title></a>(<%rtrackback_month>/<%rtrackback_day>)</li>
<!--/rtrackback-->
</ul>
上記のソース部分を下記のように修正します。コピペでOKです。
<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>
★ Links 情報提供 あ！ばらやっ* by ショコラ*様
<ul>
<!--link-->
<li><a href="<%link_url>" title="<%link_name>"><%link_name></a></li>
<!--/link-->
</ul>
上記のソース部分を下記のように修正します。コピペでOKです。
<div id="linklist">
<ul>
<!--link-->
<li><a href="<%link_url>"><%link_name></a></li>
<!--/link-->
</ul>
</div>
リンクのツリー化をする場合はFC2ブログ管理画面のリンクの設定で全てのリンクを[親項目]リンク名のように書き直してください。
当ブログのリンクで例えれば
[FC2ブログ公式情報]FC2総合インフォメーション
[FC2ブログ公式情報]最新障害・メンテ情報
[FC2ブログヘルプ]FC2ブログ公式マニュアル
[FC2ブログヘルプ]FC2ブログ ユーザーフォーラム
こんな感じです。1つでも親項目が無いものが存在するとツリー化されないと思うので注意してください。
書き換えが終了したら下記スクリプトをHTMLの最後の方にある</body></html>の上に挿入してください。よくわかんない場合は当ブログのソースを見て挿入場所を確認してください。
<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('');
}
}
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); // リンクリストのツリー化
// -->
</script>
俺はクリスマスに何やってんだ・・・orz
■ SPECIALTHANKS
| FC2ブログカスタマイズ | Permalink | comments:180 | trackbacks:35 | TOP↑
ひよこ@管理人(06/20)
かれん(06/07)
ひよこ＠管理人(11/15)
カタヒチ(11/12)
ひよこ＠管理人(11/21)
ひよこ＠管理人(11/21)
viora(11/18)
アフィリブログ(11/14)
ひよこ＠管理人(11/13)
ひよこ＠管理人(11/13)