Html研究
気に入った事はとことんやってしまいます。
ほどほどにしたいものデス。ヾ(´▽`*)ゝ
recent comment

最新の記事

月別アーカイブ

recent trackback

 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

いかがでしょうか?

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


【2008/11/21 17:25】 カスタマイズ | トラックバック(1) |
コメント(14)
noa/ どりーみー/ noa/ どりーみー/ noa/ どりーみー/ noa/ どりーみー/ noa/ どりーみー/ noa/ どりーみー/ のあ/ どりーみー/ 

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

noa

【2008/11/22 22:33】 url[noa #vEzm.KPk] [ 編集]

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

【2008/11/23 16:12】 url[どりーみー #JalddpaA] [ 編集]

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

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

noa

【2008/11/30 12:27】 url[noa #vEzm.KPk] [ 編集]

♥  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[どりーみー #JalddpaA] [ 編集]

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

【2008/12/01 00:14】 url[noa #vEzm.KPk] [ 編集]

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

【2008/12/01 20:19】 url[どりーみー #JalddpaA] [ 編集]

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

【2008/12/01 22:55】 url[noa #vEzm.KPk] [ 編集]

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

【2008/12/03 14:35】 url[どりーみー #JalddpaA] [ 編集]

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

【2009/02/21 13:09】 url[noa #vEzm.KPk] [ 編集]

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

【2009/02/22 21:17】 url[どりーみー #JalddpaA] [ 編集]

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

【2009/02/22 23:48】 url[noa #vEzm.KPk] [ 編集]

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

【2009/02/23 09:32】 url[どりーみー #JalddpaA] [ 編集]

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


【2009/02/23 20:41】 url[のあ #vEzm.KPk] [ 編集]

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

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

【2009/02/24 17:13】 url[どりーみー #JalddpaA] [ 編集]

投稿













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




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

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



| ホーム |
ブログ内検索

RSSフィード

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

TB_People

カレンダー

05 | 2021/06 | 07
- - 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 - - -

ブロとも一覧

ブロとも申請フォーム

この人とブロともになる

リンク

author_name=Dreamy/album

気に入った事はとことんやってしまいます。
ほどほどにしたいものデス。ヾ(´▽`*)ゝ
recent comment

最新の記事

月別アーカイブ

recent trackback

ブログ内検索

RSSフィード

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

TB_People

カレンダー

05 | 2021/06 | 07
- - 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 - - -

ブロとも一覧

ブロとも申請フォーム

この人とブロともになる

リンク

Template production /preview