Next Home  Prev
No,135 comment 14
メニューがツリー化されていると
見やすくなりますね。
以前にやってみたのですが、改めてここに書いておきます。
参考にさせていただいたのは
scripts for livedoorさんです。ありがとうございます。

メニューのツリー化のためのscriptを</body>タグの直前に入れました。


<!--ここから下はメニューのツリー化のためのscriptです-->>

<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['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); // カテゴリリストのツリー化
createTreeList('archivelist',gTreeOption); // アーカイブリストのツリー化
// -->
</script>
<!--メニューのツリー化のためのscriptここまで-->

</body>
</html>

それから次の二つの画像をパソコンに保存してからBlog の管理ページ「ファイルアップロード 」からアップし、そのアドレスを調べます。

tate.gif


matu.gif


次にスタイルシートの一番後ろに次を書き足します。


ul.tree {
list-style: none;
margin: 0px;
padding: 0px;
}
ul.tree li {
margin: 0px;
padding: 0px 0px 0px 16px;
background-image: url(アップしたtate.gifのアドレス);
background-repeat: no-repeat;
}
ul.tree li.end {
background-image: url(アップしたmatu.gifのアドレス);
}

次にプラグインの設定 に行き
「最新コメント」の「詳細 」→【HTMLの編集】をクリック

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


同じくcategoryカテゴリーの「詳細 」→【HTMLの編集】をクリック


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





同じくlinkリンクの「詳細 」→【HTMLの編集】をクリック


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


同じく最新記事の「詳細 」→【HTMLの編集】をクリック


<div id="newentrylist">
<ul>
<!--recent-->
<li &align>
<a href="<%recent_link>" title="<%recent_title>" onMouseOver="runSound()"><%recent_title> (<%recent_month>/<%recent_day>)</a>
</li>
<!--/recent-->
</ul>
</div>

更に
リンクリスト、
カテゴリリストをグループ分けします。
[友達]○○
[友達]▼▼
[友達]□□
などですね。
カテゴリーでは
[生活]○○
[生活]▼▼
[生活]□□などです。


尚アーカイブについてはFC2では上手く行かないとの検索エンジンの噂・・・・・
なおも検索しているとプラグインに良い物があるとのこと
共有プラグイン追加で

プラグイン名 TreeArchive_PD と検索
名前:TreeArchive_PD 作者:daniel[pcafe] ▼他の作品 というところ
▼他の作品 をクリック
2ページ目の Tree-Arcive をダウンロードしました。

daniel[pcafe]さま、ありがとうございます。




リンクリスト、
カテゴリリストをグループ分けの場所です。
新しく記事を書く時にでているページのメニューで、↓環境設定の
2008-11-23-1.jpg
カテゴリの編集をクリックします。

記事を書く時に設定したカテゴリがありますね。

グループ分けしてない時は、金魚 いろいろ 手作りなどとなっていたものを
[ライフ]金魚 [ライフ]いろいろ [手作り]手作り  などのように書き加えて設定ボタンを押します。
2008-11-23-2.jpg
上の結果は2008-11-23-4.jpg


同じようにリンクも編集します。
2008-11-23-3.jpg

リンクのところの結果は2008-11-23-5.jpg

いかがでしょうか?

最近の記事、トラックバック、コメントは編集しなくていいです。っていうか編集する場所がないですね。


2008年11月21日17時25分39秒/カスタマイズ /コメント:14 /トラックバック:1/▲ページトップへ戻る

コメント


コメント index

どりーみーさん、おはようございます。
ツリー化挑戦しているのですが、ブラグインの設定のところでグループ分けをしてそれをどこに入れていいのか...躓いています。

noa
2008-11-22(22:33) : noa URL : 編集

noaさん

こんにちは
グループ分けの場所について追記に画像を載せて見ました。
上手くいくと良いですね。
2008-11-23(16:12) : どりーみー URL : 編集

どりーみーさん、こんばんわ。v-46

えーっと、ブラグインの設定のところで...HTMLをクリックした後、何かするんでしょうか?

noa
2008-11-30(12:27) : noa URL : 編集

noaさん

は~い。
これはカテゴリーのところですが初めは
<ul>
<!--category-->
<li &align><a href="<%category_link>" title="<%category_name>"><%category_name> (<%category_count>)</a></li>
<!--/category-->
</ul>
上記のようになっていると思いますがそれを
<div id="categorylist"> というdivで囲むんです。

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

同じように記事に書いてあるもので上書きしてみてくださいね。
いかがでしょうか?
2008-11-30(13:10) : どりーみー URL : 編集

知らない事だらけ

なるほど~、v-218そうなっていたんですね。
早速やってみまーす。
2008-12-01(00:14) : noa URL : 編集

noaさん

さっき覗いたらコメントのところがツリー化されていましたね。
良かったです・・・♪v-233
2008-12-01(20:19) : どりーみー URL : 編集

どりーみーさん

はい、コメントの所ツリー化出来ました!!v-14
カテゴリーはそれほどネタが無いので、もとに戻しコメントだけにしました。
ありがとうございました~。
2008-12-01(22:55) : noa URL : 編集

noaさん

v-10良かったですね。
おめでとうございます。計画通り11月の目標達成でしたね。v-344
e-461
2008-12-03(14:35) : どりーみー URL : 編集

どりーみーさんへ

カテゴリの量が増えて来たのでツリー化にしてみたのですが、上手く反映されませんe-259...。
問題点あれば教えてください。
前に教えていただいた記事を参考にしたのですが...もう一度見てみます。
2009-02-21(13:09) : noa URL : 編集

こんばんは

拝見してきました。
未分類(0)
という項目を削除してみてくださいね。
2009-02-22(21:17) : どりーみー URL : 編集

どりーみーさんへ

未分類(0)のところは実際に削除出来ないようになっていて、文字のところにマウスを合わせ消してみたのですが...。
どうなんでしょう?
2009-02-22(23:48) : noa URL : 編集

未分類(0)は、そういえばそうでしたね。
確か修正は出来たと思います。
未分類→「[○○▲■]なにがし」などのようにかっこ付きのものに変えてはいかがでしょうか?
[未分類]とかっこを付けるだけでもいいですよ。
2009-02-23(09:32) : どりーみー URL : 編集

どりーみーさんへ

v-233出来ました~、ありがとうございます!
でも未分類だけ何故削除出来ないんでしょうね?

2009-02-23(20:41) : のあ URL : 編集

のあさん

未分類(0)初めに設定して有るんですよね。
何でも良いけど、ひとつも無いのは困るのかもしれませんね。

うまくいったようでよかったですね。v-299v-291v-290
2009-02-24(17:13) : どりーみー URL : 編集
絵文字

非公開コメント

トラックバック:
トラックバック URL
→http://dreamy.blog2.fc2.com/tb.php/135-4cdd90c5

トラックバック
F2のコメントやカテゴリのツリー化
今回もお世話になったどりーみーさん、遅くなりましたが改めて、いつもありがとうございます。 またデンプレートや現在のものを変更する時に... ジャパ子とアメ男の海外生活日記2[2009/03/02 04:52]
Next Home  Prev

カテゴリー

どりーみー

recent comment

最新の記事

月別アーカイブ

recent trackback

ブログ内検索

RSSフィード

*最新記事のRSS
*最新コメントのRSS
*最新トラックバックのRSS

TB_People

カレンダー

10 | 2018/11 | 12
- - - - 1 2 3
4 5 6 7 8 9 10
11 12 13 14 15 16 17
18 19 20 21 22 23 24
25 26 27 28 29 30 -

iconカテゴリ

ブロとも一覧

ブロとも申請フォーム

この人とブロともになる

リンク

 

カテゴリー

recent comment

最新の記事

月別アーカイブ

recent trackback

ブログ内検索

RSSフィード

*最新記事のRSS
*最新コメントのRSS
*最新トラックバックのRSS

TB_People

カレンダー

10 | 2018/11 | 12
- - - - 1 2 3
4 5 6 7 8 9 10
11 12 13 14 15 16 17
18 19 20 21 22 23 24
25 26 27 28 29 30 -

iconカテゴリ

ブロとも一覧

ブロとも申請フォーム

この人とブロともになる

リンク