FC2ブログのテンプレート工房

カスタマイズが簡単な共有テンプレートを配布しています。テンプレートをカスタマイズして自分だけのオリジナルブログを作りませんか?

スポンサーサイト

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

アイコン付きツリー化カテゴリーをグループで折りたたむ

以前に共有プラグイン『アイコン付きツリー化カテゴリー』を紹介しましたが、このアイコン付きツリー化カテゴリーをグループで折りたたみ可能にする方法を紹介します。


プラグインHTMLを編集します。

<style type="text/css" media="all">
<!--
#ICA p {
margin: 4px 0 2px;
}
#ICA ul {
margin:2px 0 4px;
padding:0;
}
#ICA li {
background-repeat: no-repeat;
list-style-type:none;
list-style-image: none;
margin:0;
padding:2px 0;
}
#ICA li.branch {
background-image: url(http://blog-imgs-19.fc2.com/1/0/p/10plate/branch.gif); /*ツリー画像 */
padding-left:20px;
}
#ICA li.branch_end {
background-image: url(http://blog-imgs-19.fc2.com/1/0/p/10plate/branch_end.gif); /*ツリー画像(最後尾) */
padding-left:20px;
}
//-->
</style>

<div class="tree" id="ICA"><ul>
<!--category--><li>
<a href="<%category_link>" title=""><%category_name>&nbsp;(<%category_count>)</a>
</li><!--/category-->
</ul></div>

<script type="text/javascript"><!--
function icw(num) {
if(document.getElementById) {
if (document.getElementById('icu'+ num ).style.display=='block') {
document.getElementById('icu'+ num ).style.display='none';} else {
document.getElementById('icu'+ num ).style.display='block';}}}
--></script>


<script type="text/javascript"><!--
var A=document.getElementById('ICA').getElementsByTagName('A');
var C=new Array(); var icon=new Array(); var n=1; I="";

/* ■ツリー化設定 */
C[1]="グループA,1,2";
C[2]="グループB,3,4";

/* ■アイコン画像URL */
icon[1] = "http://blog44.fc2.com/image/e/180.gif";
icon[2] = "http://blog44.fc2.com/image/e/181.gif";
icon[3] = "http://blog44.fc2.com/image/e/182.gif";
icon[4] = "http://blog44.fc2.com/image/e/183.gif";
icon[5] = "http://blog44.fc2.com/image/e/184.gif";
icon[6] = "http://blog44.fc2.com/image/e/185.gif";
icon[7] = "http://blog44.fc2.com/image/e/186.gif";
icon[8] = "http://blog44.fc2.com/image/e/187.gif";
icon[9] = "http://blog44.fc2.com/image/e/188.gif";

for (i=1;i<C.length;i++){ p=C[i].split(','); l=p.length; if(l>1){
I=I+'<p><img src='+icon[n++]+' align="absmiddle" border="0"> <b><a href="javascript:onclick=icw('+i+')">'+p[0]+'</a></b></p>';
I=I+'<ul id="icu'+i+'" style="display:none">';
for (k=1;k<l;k++){ q=p[k]-1;
if(k==l-1) {I+='<li class="branch_end"><a href="'+A[q].href+'" title="'+A[q].innerHTML+'">'+A[q].innerHTML+'</a></li>'; A[q].title="-";}
else {I+='<li class="branch"><a href="'+A[q].href+'" title="'+A[q].innerHTML+'">'+A[q].innerHTML+'</a></li>'; A[q].title="-";}
} I+='</ul>';
} }
for (i=0;i<A.length;i++){if (A[i].title!="-") {
p= A[i].innerHTML.split('&nbsp;');
I+='<ul><li><img src='+icon[n++]+' align="absmiddle" border="0"> <a href="'+A[i].href+'" title="'+p[0]+'">'+p[0]+'</a></li></ul>';
} }
document.getElementById('ICA').innerHTML=I;
--></script>


赤い記述がオリジナルから新たに加わった部分です。
初期状態で展開した状態にしておきたい場合は noneblock としてください。
関連記事
[ 2007/02/21 00:08 ] 共有プラグイン | TB(0) | CM(41)
[ 1262 ] 参考にさせて頂いてます<(_ _)>
こんばんは、はじめてコメント致します。

カスタマイズ方法について、判り易く解説されていて
参考にさせて頂いてます。

大変、助かっています。<(_ _)>

ps.
 別途トラックバック突然入れまして、失礼致しました。
[ 2007/02/21 02:56 ] [ 編集 ]
[ 1263 ] 管理人のみ閲覧できます
このコメントは管理人のみ閲覧できます
[ 2007/02/21 11:23 ] [ 編集 ]
[ 1264 ] ありがとうございます!
こんなに早く要望に答えて頂けて感謝!ですe-68
イメージ通りi-189使わせていただきます!
[ 2007/02/21 11:26 ] [ 編集 ]
[ 1267 ] > ひーろーさん
こんばんは、ひーろーさん。
トラバ有難う御座いました。
これからも参考になる記事を書けるように頑張ります^^
[ 2007/02/22 01:47 ] [ 編集 ]
[ 1268 ] > Sakaさん
こんばんは、Sakaさん。
イメージ通りでよかったです。カテゴリが多い方には有効なカスタマイズですね。どうぞご利用ください^^
[ 2007/02/22 01:51 ] [ 編集 ]
[ 1270 ] ありがとう!
出来ました!!
ブログにくわしくない私に、的確に教えていただき、ホントにありがとうございました(*^^)v
とっても親切ですぐお返事ももらえて本当に感謝しています☆
また、色々勉強させてもらいにきますね♪
[ 2007/02/22 08:46 ] [ 編集 ]
[ 1272 ] > ももちんさん
こんばんは、ももちんさん。
記事中の画像の枠を消すことが出来ましたね^^
ただ後からこの作者さんの利用規約を読んだのですが、「カスタマイズは文字色の変更のみOKです。」とありました。あとはそのまま使ってください。
[ 2007/02/22 23:32 ] [ 編集 ]
[ 1278 ] 了解です☆
あとゎ変更しないで使っていこうと思います♪
ありがとうございました!!
[ 2007/02/23 09:09 ] [ 編集 ]
[ 1285 ] > ももちんさん
こんばんは、ももちんさん。
どういたしまして。ブログがんばってくださいね^^
[ 2007/02/24 01:40 ] [ 編集 ]
[ 1591 ] はじめまして
とても使いやすくて気に入ってます。
これからカテゴリーを増やそうと思って、折りたたむようにしたいのですが出来ませんでした。
何度か挑戦したのですが、初心者なのでどこが間違ってるのか分かりません。

それと、文字の大きさはどこで変更したら出来るのでしょうか?
いろいろとやってみたのですが、どうしても分からなかったので、お忙しいのに申し訳ないのですが教えていただけますでしょうか?

簡単な質問ばかりと思いますが、よろしくお願いいたします。
[ 2007/03/29 11:43 ] [ 編集 ]
[ 1594 ] こんばんはー^^
いたおさま
こんばんは~^^
この前は丁寧に教えていただき有難う御座いました。
今回は・・・こちらのカスタマイズに挑戦。
無事に出来ました(^O^)

今からまた別のカスタマイズにも挑戦してみますね~^^
ありがとうございましたm(__)m
[ 2007/03/30 00:02 ] [ 編集 ]
[ 1619 ] > みぃさん
みぃさんのブログを拝見したところ、この記事の赤い部分がありませんでした、この部分を加えてみてください。
[ 2007/04/03 01:08 ] [ 編集 ]
[ 1622 ] > ちぃさん
カテゴリのグループか折りたたみが出来ましたね^^
是非いろんなカスタマイズにチャレンジしてみてください。自分で何かを作り出すことはとても楽しいですよ。
[ 2007/04/03 01:36 ] [ 編集 ]
[ 1758 ] はじめまして。
「アイコン付きツリー化カテゴリー」をダウンロードさせて頂きましたi-237
まだブログが完成していないのでURLを載せるコトは出来ないのですが・・・。
グループのところにカテゴリー名を入れて、分かれてるところに細かくカテゴリーの記事を入れることはできますか?
・・・うまく伝わっていればうれしいのですが。

忙しいところ申し訳ありませんが、よろしくお願いします。m(_ _)m
[ 2007/04/22 22:00 ] [ 編集 ]
[ 1791 ] > ゆぅさん
残念ながらFC2の仕様でトップページに全記事表示をすることはできないのでそのように表示することはできません。

ですがトップページでなければそのように表示させることはできます。

ブログのサイトマップの作り方
http://10plate.blog44.fc2.com/blog-entry-119.html
[ 2007/04/29 22:59 ] [ 編集 ]
[ 1925 ]
はじめまして、kisara と申します。
多すぎるカテゴリーを「ツリー化カテゴリー」にして、スッキリしました。
ありがとうございます。
[ 2007/05/17 23:12 ] [ 編集 ]
[ 1949 ] > kisaraさん
やはりツリー化したグループを折りたたみにするとかなりコンパクトになりますね。
[ 2007/05/22 00:04 ] [ 編集 ]
[ 2995 ]
はじめまして、
ことわざライフともうします。
『ツリーかカテゴリー』を大変便利に使わせてもらってます。
ありがとうございました。

[ 2007/12/13 05:08 ] [ 編集 ]
[ 3111 ] はじめまして
はじめまして。
いつもHP拝見させて頂いております。
とてもわかりやすく 大変便利に使用させて頂いております。

カテゴリのグループ毎にプルダウンにする方法は
ありませんでしょうか?><;
色々ぐぐってみたのですが、わからず。。。;

忙しいところ申し訳ありませんが、よろしくお願いします
[ 2008/02/11 18:59 ] [ 編集 ]
[ 3258 ] 承認待ちコメント
このコメントは管理者の承認待ちです
[ 2008/05/05 09:34 ] [ 編集 ]
[ 3351 ]
やっと、
カテゴリをツリー表示+折りたたみ+target=""でフレーム内に表示できました。
ありがとうございました。。。
[ 2008/05/31 17:57 ] [ 編集 ]
[ 4428 ]
お世話になります。
2点質問させてください。

1点目は
カテゴリーの順番では
1、自己紹介(1)
2、料理全般(3)
3、卵を使った料理(3)
4、肉を使った料理(3)
5、仕事(5)

をグループ分けする際、2,3,4をグループAにすると、自己紹介がグループAの下に来てしまいます。
1、グループA
   料理全般(3)
   卵を使った料理(3)
   肉を使った料理(3)
2、自己紹介(1)
3、仕事(5)
こうなります。
これを
1、自己紹介(1)
2、グループA(9)
   料理全般(3)
   卵を使った料理(3)
   肉を使った料理(3)
3、仕事(5)
としたい。

2点目は
そのようにした際、自己紹介や仕事と言ったグループ分けしていないカテゴリーについては記事数が出ません。
これを見るようにすることはできますか?
またグループAに属しているTotalの記事数を表示できますか?
イメージとしては共有プラグインの「Tree-Category」や公式の親子関係のような感じです。
(ただこちらは折りたたむ方法がわからない)

理想像は
1、自己紹介(1)
2、グループA(9)
   料理全般(3)
   卵を使った料理(3)
   肉を使った料理(3)
3、仕事(5)
こうしたいです。

どうぞよろしくお願いします。
[ 2009/05/24 19:47 ] [ 編集 ]
[ 4431 ]
連投すいません。

今の私が使っている公式の親子カテゴリーのグループごとで折りたたむができれば私の理想通りになります。
ただその方法がわからないので、上記のようなややこしいことを質問しました。
またそれを是非サイトマップにも反映させたいです。

お時間あれば検討ください。
よろしくお願いします。
[ 2009/05/24 19:59 ] [ 編集 ]
[ 4452 ] > にしむさん
アイコン付きツリー化カテゴリーはそのような仕様で作っているので変更が難しいのですが、公式プラグインの親子カテゴリーの折りたたみは現在調査中ですのでもう少しお待ちください。
[ 2009/05/24 23:58 ] [ 編集 ]
[ 4465 ]
>いたおさん
お世話になります。
ありがとうございます。
楽しみにしています。
[ 2009/05/25 21:24 ] [ 編集 ]
[ 4496 ] お世話になってます
お世話になります。
ブログをはじめて2ヶ月程の素人ですが
アイコン付きツリー化カテゴリーは、
描いてたイメージのレイアウトに
出来そうでスゴクうれしいです。
ありがとうございます。

一つ質問なのですが、折りたたみに変更して
いるのですが、ページを移動するとさっき
開いたツリーが閉じてしまうのですがこれを
一度開いたものをそのまま開いた状態にに
することはできないのでしょうか?

お忙しい所申し訳ありませんが、よろしくお願いします

[ 2009/05/28 10:56 ] [ 編集 ]
[ 4504 ] > muuさん
折りたたみ状態を記憶させる方法は、「小粋空間」さんが公開されています。

サイドメニュー折りたたみスクリプト(cookie等改善版)
http://www.koikikukan.com/archives/2004/12/06-020033.php

私はまだこのスクリプトを使用したことはないのですが、多くのFC2ユーザーの導入実績があるようです。

例えば「yozoの気が向いたと記2.0」さん

FC2ブログ用サイドメニューの折りたたみの設定
http://yozoblog2.blog63.fc2.com/blog-entry-483.html

少々複雑なカスタマイズなので、バックアップをとってから挑戦することをお勧めします。
[ 2009/05/28 23:05 ] [ 編集 ]
[ 4510 ] はじめまして
シームレスやツリー化など、ちょくちょく利用させて頂いてます。
今回わからないことがあってコメさせて頂きました。

今までリンクツリーはプラグインごとの折り畳みにしていたのですが
ツリー化したリンクを見出しのグループごとに折りたたむ場合は
どのように記述を変更すれば良いのでしょうか?

お手数かと思いますが、教えて頂けると助かります。
[ 2009/05/29 14:34 ] [ 編集 ]
[ 4518 ] > keroさん
「アイコン付きツリー化カテゴリー」ならばこの記事に書かれている通りなのですが、「ツリー化したリンク」とはなにか別のプラグインなのでしょうか。またはご自分でツリー化カスタマイズを行ったのでしょうか?

ちなみに親子カテゴリを折り畳む方法ならば現在調査中です。
[ 2009/05/30 23:07 ] [ 編集 ]
[ 4530 ]
>いたおさん
説明不足で申し訳ありません;;

こちらでアイコン付きツリー化カテゴリーのリンク版である
アイコン付きツリー化リンクがあったと思うのですが

http://10plate.blog44.fc2.com/blog-entry-168.html

この記事のカテゴリーをグループで折りたたむ方法を
上記のリンク版の方でも流用できないかと思いまして。

これも親子カテゴリの折りたたみと同じと捉えて良いのでしょうか?
滅茶苦茶な説明で申し訳ないです;;
[ 2009/05/31 01:49 ] [ 編集 ]
[ 4540 ] > keroさん
了解しました。後日記事にするのでもう少しお待ちください。
[ 2009/05/31 20:15 ] [ 編集 ]
[ 4551 ]
お手数をおかけして申し訳ありません。
本当に有難うございます orz
[ 2009/05/31 22:44 ] [ 編集 ]
[ 4553 ] > keroさん
他に掲載予定の記事が結構溜まってしまったので、気を長くしてお待ちください^^;
[ 2009/05/31 23:37 ] [ 編集 ]
[ 4578 ] > keroさん
記事を掲載したのでこちらを参考にしてください。

アイコン付きツリー化リンクをグループで折りたたむ
http://10plate.blog44.fc2.com/blog-entry-219.html
[ 2009/06/04 00:04 ] [ 編集 ]
[ 5490 ]
はじめまして。
いきなりで申し訳ないのですが、1つ質問をさせて頂きます。
とりあえず、この記事では下のようになると思います。

■グループA
 ┣カテゴリ1
 ┗カテゴリ2
■グループB
 ┣カテゴリ3
 ┗カテゴリ4
ですが、
グループの下にもうひとつのグループをいれることは可能でしょうか。
言葉にしずらいのですが、

■グループA
 ┣カテゴリ1
 ┗グループB
   ├カテゴリ2
   └カテゴリ3

上のような感じにできないものでしょうか。
3段階にわけられると便利な気がしまして・・・。

不可能ならそれでいいのですが、お答え頂けたら嬉しいです。
よろしくお願いします。
[ 2009/08/16 22:32 ] [ 編集 ]
[ 5491 ] > 間宮さん
申しわけありません。それはかなり難しいです。
ですが調べてみるとこんな記事がありました。

FC2共有プラグイン:カテゴリーのツリー化比較
http://ameblo.jp/mannerkagra/entry-10048222377.html

この比較によると、「Lc.ツリーカテゴリー」が親子にも折り畳みにもアイコンにも対応していて良さそうです。

他にも「カテゴリーツリーV1.1」という共有プラグインが親子ツリーで折り畳みができるようです。

力及ばず他の共有プラグインを薦めることになって申しわけありませんが、これらのプラグインを検討してみてください。
[ 2009/08/17 00:52 ] [ 編集 ]
[ 5495 ]
お早い対応に感激です。
ろくに調べもせずに申し訳ありません。
ありがとうございました。
[ 2009/08/17 23:39 ] [ 編集 ]
[ 5496 ] > 間宮さん
こちらこそ親子ツリー化に対応できずに申しわけありません。
共有プラグインは種類が多くて探すのが大変かも知れませんが、是非希望に添うものを見つけてください。
[ 2009/08/18 00:51 ] [ 編集 ]
[ 6404 ] 再びお邪魔します
またまたお世話になります。
Tree-CATEGORY(こちらで紹介のあったものです)をグループで折りたたみたいのですがアイコン付カテゴリーを折りたたむを参考にしていたら上の赤い部分はわかるんですが下の部分が若干違っていてどこにいれたらいいのかわかりませんでした。
どうしたらいいのでしょうか。
よろしくお願いします。
ulが見当たらないので困ってます。

for (i=1;i<t.length;i++){if(t[i]!="" && t[i]!=undefined){A[i-1].title=t[i]}}
for (i=1;i<C.length;i++){ p=C[i].split(','); l=p.length; if(l>1){
I=I+'<p><b>'+p[0]+'</b><br />';
for (k=1;k<l;k++){ q=p[k]-1;
if(k==l-1) {I+=" └ "} else {I+=" ├ "}
I+='<a href="'+A[q].href+'" title="'+A[q].title+'">'+A[q].innerHTML+'</a><br />'; A[q].title="-";
} I+='</p>';
} }
for (i=0;i<A.length;i++){if (A[i].title!="-") {
p= A[i].innerHTML.split(' ');
I+='<a href="'+A[i].href+'" title="'+A[i].title+'"><b>'+p[0]+'</b> '+p[1]+'</a><br />';
} }
document.getElementById('CA').innerHTML=I;
--></script>
[ 2009/10/08 18:13 ] [ 編集 ]
[ 6407 ] > るなのんさん
Tree-CATEGORYはリスト構造でないので、この折り畳みはつかえません。共有プラグインには折り畳み可能なツリー化カテゴリがいくつかあるので、そちらで代用してください。

マナーサイト座談会楽屋 カテゴリーのツリー化プラグインを比較
http://mannerback.blog101.fc2.com/blog-entry-54.html

[ 2009/10/08 20:14 ] [ 編集 ]
[ 8446 ]
はじめまして。

質問なんですが、
■グループA
 ┣カテゴリ1
 ┗カテゴリ2
■グループB
 ┣カテゴリ3
 ┗カテゴリ4
と表示した場合、グループとカテゴリの間の隙間が気になるんですが、この隙間は詰まらないですか?
カテゴリ同士の隙間はマージン等の設定で詰まりますが・・・
[ 2010/02/18 10:54 ] [ 編集 ]
コメントの投稿









管理者にだけ表示
※現在カスタマイズに関するサポートを休止中です。
表示が崩れる場合は表示が崩れる原因の調査手順をお試しください。
その他の問題はFC2ユーザーフォーラムにお問い合わせください。
トラックバック
この記事のトラックバックURL

ブログ内検索1
プロフィール

Author:いたお
更新は非常にマイペースです
現在休止中です

当サイトはリンクフリーです。

いたおの他の運営サイト
カレンダー
11 | 2016/12 | 01
- - - - 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 31
なんでもスクロール
このように
縦に長く伸びた
プラグインを
スクロールバーによって
一定の長さに
抑えることが
出来ます。

※スクロールさせる文字やプラグインのHTMLをここに
今日の日付入りカレンダー

11 | 2016/12 | 01
- - - - 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 31
ユーザータグ


△ ページトップへ戻る
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。