スポンサーサイト

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

FC2Blogサイドメニューツリー化

メニューがツリー化されていると
見やすくなりますね。
以前にやってみたのですが、改めてここに書いておきます。
参考にさせていただいたのは
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

いかがでしょうか?

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


FC2Blogサイドメニューツリー化/2008/11/21 17:25/[Blog]カスタマイズ/ トラックバック(1)/ comment(14)

comment

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

noa

noa #vEzm.KPk/2008/11/22(土) 22:33:46/URL[ 編集]

noaさん

こんにちは
グループ分けの場所について追記に画像を載せて見ました。
上手くいくと良いですね。


どりーみー #JalddpaA/2008/11/23(日) 16:12:18/URL[ 編集]

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

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

noa

noa #vEzm.KPk/2008/11/30(日) 12:27:09/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>

同じように記事に書いてあるもので上書きしてみてくださいね。
いかがでしょうか?

どりーみー #JalddpaA/2008/11/30(日) 13:10:12/URL[ 編集]

知らない事だらけ

なるほど~、v-218そうなっていたんですね。
早速やってみまーす。

noa #vEzm.KPk/2008/12/01(月) 00:14:22/URL[ 編集]

noaさん

さっき覗いたらコメントのところがツリー化されていましたね。
良かったです・・・♪v-233

どりーみー #JalddpaA/2008/12/01(月) 20:19:16/URL[ 編集]

どりーみーさん

はい、コメントの所ツリー化出来ました!!v-14
カテゴリーはそれほどネタが無いので、もとに戻しコメントだけにしました。
ありがとうございました~。

noa #vEzm.KPk/2008/12/01(月) 22:55:09/URL[ 編集]

noaさん

v-10良かったですね。
おめでとうございます。計画通り11月の目標達成でしたね。v-344
e-461

どりーみー #JalddpaA/2008/12/03(水) 14:35:50/URL[ 編集]

どりーみーさんへ

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

noa #vEzm.KPk/2009/02/21(土) 13:09:37/URL[ 編集]

こんばんは

拝見してきました。
未分類(0)
という項目を削除してみてくださいね。

どりーみー #JalddpaA/2009/02/22(日) 21:17:18/URL[ 編集]

どりーみーさんへ

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

noa #vEzm.KPk/2009/02/22(日) 23:48:56/URL[ 編集]

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

どりーみー #JalddpaA/2009/02/23(月) 09:32:37/URL[ 編集]

どりーみーさんへ

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



のあ #vEzm.KPk/2009/02/23(月) 20:41:46/URL[ 編集]

のあさん

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

うまくいったようでよかったですね。v-299v-291v-290

どりーみー #JalddpaA/2009/02/24(火) 17:13:14/URL[ 編集]

投稿















管理者にだけ表示を許可する

trackback

trackback url ↓

http://dreamy.blog2.fc2.com/tb.php/135-4cdd90c5


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



| ホーム |

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