ブログFC2ブログ
日本で一番使われているFC2ブログで あなたもブログをはじめよう!
FC2動画 FC2動画
自分で撮った動画を公開!共有!携帯でも利用できる!!
FC2プロフFC2プロフ
自己紹介ページをすぐに公開できるサービス。 今すぐプロフを作ってみんなに見てもらおう!
FC2アフィリエイト
FC2ブログを紹介してお金がもらえる
FC2アフィリエイトに登録しよう!

TOP > タグのお勉強 > title - カテゴリーのツリー化をつくりたい!

カテゴリーのツリー化をつくりたい!

カテゴリーを自分のまとめたいグループに分けて、ツリー化する事によってすっきりする方法を紹介します。
ツリー化
ツリー化をするとこの様になります。   testカテゴリーのツリー化の見本見本

カテゴリーのツリー化の方法

【参考記事】
ヒヨコ君増殖中 恋 FC2版」様:クリスマスツリーに肖ってツリー化の手引き  
JUGEMカスタマイズ講座」様;ツリー化スクリプト ver 2
まめの一言(JUGEM出張所)」様;ツリー化スクリプトのカテゴリ・アーカイブ対応   
ワンダと巨像と土と空」様;カテゴリーのツリー化の手順

最初にテンプレートの設定からHTMLの編集を開きます。そして一番下までスクロールさせていって下さい。すると一番下ぐらいに</body>というのが見つかると思います。見つからなかったら「Ctrl」+「F」を使って検索してみて下さい。

このブログでは・・・
</div>
<!-- **********mabody_ED********** -->

</body>
</html>
この様になっていました。見つかったらこの</body>のすぐ上に下記のものをコピーして張りつけます。

<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['sort'] = false; /* ツリー内の表示順 true:並び替える false:そのまま */
gTreeOption['list'] = '⇒ '; /* ツリー用マーク(通常) */
gTreeOption['end'] = '⇒ '; /* ツリー用マーク(末端) */
gTreeOption['leef'] = '<br />\n'; /* 各枝の末尾 */
gTreeOption['top'] = '<br />\n'; /* ツリー本体の最初 */
gTreeOption['btm'] = ''; /* ツリー本体の最後 */
createTreeList('newentrylist',gTreeOption); // 最新エントリリストのツリー化
createTreeList('entrylist',gTreeOption); // エントリリストのツリー化
createTreeList('commentlist',gTreeOption); // 最新コメントリストのツリー化
createTreeList('tblist',gTreeOption); // 最新トラックバックリストのツリー化
createTreeList('linklist',gTreeOption); // リンクリストのツリー化
createTreeList('categorylist',gTreeOption); // カテゴリリストのツリー化
// -->
</script>

このまま使うとツリーの部分が⇒になるのでこのブログの様にしたければ、下のほうにある、
gTreeOption['list'] = ' '; /* ツリー用マーク(通常) */
gTreeOption['end'] = ''; /* ツリー用マーク(末端) */
を通常の方をに末端の方をに張り替えて下さい。
※先にコメント・トラックバック・リンクのツリー化をした人で、後からカテゴリーもツリー化する場合、若干違うので、こちらのものに張り替えてください。

このブログを例にすると、
</div>
<!-- **********mabody_ED********** -->

<script type="text/javascript">
<!--
~~~~~~~~
// -->
</script>

</body>
</html>
この様に張りつけます。できたら保存を押して下さい。

次に[プラグインの設定]→[カテゴリー]の[HTMLの変更]をクリックします。
<ul>
<!--category-->
<li &align><a href="<%category_link>" title="<%category_name>"><%category_name> (<%category_count>)</a></li>
<!--/category-->
</ul>
すると、この様になっていますよね。

これを全部削除して下記のものに置き換えます。

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

張り替えましたら[変更]ボタンを押して下さい。

そして最後に管理画面の環境設定から[カテゴリーの編集]を開きます。

カテゴリ
このようになっていますよね。修正を選びます。

ここに記入
そして自分のグループ分けしたいグループ名を[グループ名]と記入して、カテゴリ名の前に入れます。

全部に

この様にします。順番はバラバラでもきっちりグループ分けしてくれるので、わざわざ直す必要はありません。

※全部のリンク名の前に[グループ名]を入れないとツリー化できないので気をつけて下さい。

     -具体例-

ツリー化

この様にツリー化してまとめられます。
全部できたら完成です。自分のブログを確認してみて下さい。できていると思います。
この方法はプラグイン対応のテンプレートの人が対象です。もしプラグイン非対応のテンプレートを使っている人はテンプレートの設定のHTMLの編集にあるカテゴリーの該当場所にプラグインに張るものと紹介した物に書き換えて下さい。
プラグインがよくわからない人はプラグインって何?を読んでみて下さい。

できたので「ワンダと巨像と土と空」のNICO(にこ)さんにお礼を言いに行く。

さらにカスタマイズ

[○○](←カテゴリーのグループ名)
 ├××
 └××
となっている[○○]の部分の太字を普通の太さにしたい人や、[ ]をなくしたい人は、一番最初に</body>の前に設置した・・・

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.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('');

この4つの部分の赤字の部分を削除すると普通の太さに、青字の部分を削除すれば[ ]はなくなります。

このブログの様に点線のツリー化にしたい人は、JUGEMカスタマイズ講座さんのツリー化カスタマイズ応用編にわかりやすく説明されています。



◆FC2ブログの事でどうしても疑問が解決しない人はFC2ブログ ユーザーフォーラムへ。
★アフィリエイト人気ランキング★  [アフィリエイトとは?]
リンクシェア
の詳細はこちら
エーハチネット
の詳細はこちら
バリューコマース
の詳細はこちら
アフィリエイト リンクシェア ブログ 携帯対応 成果報酬 広告 テンプレート ブログパーツ
コメント
教えてください
始めまして。
カテゴリをツリー化しようと思い、
参考にさせていただいたのですが、
うまくいきません。
原因もわからず・・・
ヒントをいただけたら幸いです。
シーサーブログは・・・
シーサーブログブログの事はわからないのでお力になれません。
一応タイトルにもある様にFC2ブログ専門なので・・・。
申し訳ないです。(゜人゜)(-人-)ゴメンネ
出来ました!
まったくの初心者ですが、るんぱぱさんの記載通りに実行していきました。
ちゃんとツリーになっていました。とってもうれしいです♪
まだわからないことだらけですが、じっくり勉強させていただきます。
ありがとうございました。
おめでとう!
お子さんが3人もいらっしゃるんですね!
少子化の時代だからお子さんがたくさんいる方は応援したくなっちゃいます!
ツリー化って見栄えがいいからすごく嬉しいですよね!
育児とお小遣い貯めがんばってくださいネ!!
うっつ
どうしてもならないのですが・・・何が悪いのでしょうか?
そのままの[お小遣いサイト]○○と出てきてしまいます・・。
アドバイス宜しくお願いします。
renaroさんへ
たぶん [旅行](4) の様に[カッコ]で囲ったものしかなく、名前がないのがダメなのかな?と思いました。なんでとりあえず全部のカテゴリーに一度ちゃんと名前をつけてみて下さい。
ありがとうございます☆☆☆
嬉しいです♪なりました!!
どうも、半角の[  と全角の[  と混じっていたのが悪かったみたいです☆
また1歩進歩した様で嬉しいです☆
早い返事本当にありがとうございました。心強かったです☆
renaroさん
無事にできてよかったですね!
はじめまして^^
まったくのブログ&パソコン初心者な者で度々るるんばさんの記事を参考にさせてもらってます♪

いきなりの質問で申し訳ないのですが、今まで共有プラグインのツリー化のやつを使ってたんですが、るるんばさんのブログサイドバーの『ブログづくりに役立つもの紹介』のところの「オススメ」とか「CHECK」のようなアイコンをどうしても付けたくなってしまいました泣) その場合はやはりこのコメントした所にある記事のような編集をしなければならないのでしょうか?その場合、るるんばさんのようなアイコンをつけるにはどのようにしたらいいのでしょうか?長くなって申し訳ございません。・゚・(*ノД`*)・゚・。
お時間の許すときにお返事くれたら幸いです♪

それでは失礼します^^応援ポチン☆


バーバリーさんへ
はじめまして!
うちの『ブログづくりに役立つもの紹介』はツリー化ではなくて、ただツリー化の様に見せかけて自分で並べているだけなのでツリー化をするとアイコンをつけられないと思います。
お役に立てずに申し訳ありません(ToT)
管理人のみ閲覧できます
このコメントは管理人のみ閲覧できます
できました!
すごく判りやすかったです。ありがとうございます!感謝!
あっぷさんさんへ
こちらこそ参考にしていただいてありがとうございます!
カテゴリーのツリー化できました!!\(T∀T)/

最後のカテゴリ名を入れる際に[ を全角で入力していたみたいで

ツリー化出来ずにいましたが、 renaroさんとのコメントのやりとりを見させていただいて

原因はこれか!と思い試したら

見事ツリー化できました

本当に超初心者にもわかりやすくて助かります

これからもよろしくお願いします!
どうして?
いつもお世話になっています。
どーしてもツリー化できません、コメントとかも見てやってみたんですが・・・
[・・・・・・]~~自分もこのようになってしまいます。
もしよければアドバイスお願いします。
なんとかできました!
自分ではできなかったけど、プラグインの方でできました。
今後ともよろしくおねがいします。
バニシュさんへ
ブログを見ることができなかったので返事が遅れてしまい申し訳ないです。
プラグインでツリー化ができたとの事でよかったです。
ちなみにバニシュさんのブログを見るとカテゴリーに未分類があったのでもしかしたら、未分類を[グループ名]で囲わずにそのままにしていたからできなかったのかな?と推測しました。
よくある失敗の1つのなので、もし違っていたらごめんなさい。
できません
上の通りにやったのですが、うまくいきません。コピーした物がそのままページの最後に表示されます。
テンプレートの設定からHTMLを変更して付け足すときHTMLに日本語がありましたが、そのままでいいのですか?
このまま使うとツリーの部分が⇒になるのでこのブログの様にしたければ…という部分がよく分からないのですが具体的にどこをどう変更するのですか?
初心者なんで、すいません
Kktoさんへ
HTMLに日本語があるのは問題ないですよ。うーん、どうしてできないのでしょうかね。
決してとても難しくないので、もう一度落ち着いて最初からやってみてはいかがでしょうか?もしそれでもダメならブログのURLを書いてくださるともう少し原因がわかるかも知れません。
⇒を…にするにはリンク先の「ツリー化カスタマイズ応用編」の順番通りにやればできますよ!
もう1回やってみたけど…
Kktoです。もう1回同じようにやってみたけどだめですね。
http://pccontinuestoevol.blog108.fc2.com/
↑このブログです。ご指摘いただけないでしょうか?
Kktoさんへ
返事が遅くなってしまって、共有プラグインでツリー化されたようですね。
お役に立てなくて申し訳ないです。
今ちょうどツリー化にチャレンジしているところですが、カテゴリを変更している途中で確認してもツリー化になっていません;
このまま続けてもならないのでしょうか?
貼り付けはできていると思うのですが・・・
教えて下さい!
さんからさんへ
26日19:00現在のさんからさんのブログのカテゴリを見たのですが、最初の3つしか[ ]で囲われていません。
全部のカテゴリの前に[グループ名]を入れないとツリー化されないのでとりあえず、全てのカテゴリに[ ]をつけてみてください!!
そうなんですね!
ありがとうございます!

カテゴリをグループ名して、記事のタイトルをツリー化するのが理想なんですが、それは無理ですよね?
すみません、うまく伝えられないです。
ツリー化にしたいものは全てカテゴリとして追加しないといけないですか?
どのようにまとめていくか悩んでいます。
うまくまとめてがんばってみます!
迅速な対応ありがとうございました。
できました!!
憧れのツリーが私にもできました~!
すごくうれしいです☆
ほんとにできるのか不安でしたが、「るんばば」さんの言うとおりにしたら、簡単にできちゃいました。
ほんとにほんとにありがとうございました。
さんからさんへ
カテゴリをグループ名して、記事のタイトルをツリー化するというのは、ちょっと無理ですね。
でもここで紹介しているツリー化は無事にできてよかったです。上手くまとまっていますね!
できました!!
7/17に質問させていただいたんですけど、自分もちょっとくじけていてパソコンに向かっていなかったので、今日見てすぐできました、ありがとうございました。
 で、せっかくできたんでどっちを使おうか迷ってます、管理人さんはどう思いますか?
バニシュさんへ
今は色々なツリー(全部ツリーにしなくても良い、アイコンがつけられるなど)が共有プラグインにあるので、自分の見せたい様に表示してくれるツリーがあれば共有プラグインの方がいいと思います。
るんばばさんへ
返信のコメントありがとうございました!
ちょっとしたことなのに感謝してます、今後ともよろしくお願いします。
バニシュさんへ
こちらこそよろしくお願いしますね。
ツリー化の記事について
はじめましてるんぱぱさん。SHUNと申します。
カテゴリーのツリー化うまくできましたw
すごくわかりやすい解説ありがとうございます。

それで、ツリー化の作業を自分のブログの記事に書こうと思うのですが
るんぱぱさんのサイトのご紹介をさせていただいてもよろしいでしょうか?
差し支えなければ宜しくお願いします。

ツリー化について
はじめましてるんぱぱさん^^ノ
ブログのこと全然分からない僕でもるんぱぱさんのおかげでツリー化
などいろんなことができました^^

よりよいブログつくりのためにこれからも参考にさせてもらいますね♪
SHUNさんへ
SHUNさん、はじめまして。
カテゴリーのツリー化おめでとうございます。
もちろん紹介OKです!!記事を書いていただいて逆にこちらがお礼をいいいたいです!!
マロンさんへ
マロンさん、はじめまして。
カテゴリーはできると嬉しいですよね!
まだまだつたないブログですが、参考になるところは参考にしてやってください(o*。_。)oペコッ
ご報告
SHUNです。

ツリー化の記事書かせていただきましたので、ご報告させていただきます。
ありがとうございましたw

記事中、「核になるタグは載せずに、るんぱぱさんのサイトからコピーさせていただいてください」としているのですが、何か不具合がありましたら、またご指摘ください^^
鉄板アフィリ管理人 SHUNさんへ
記事にしていただいてありがとうございました。感謝親します(^ー^)
ツリー化したい!!
 僕も参考にやってみましたができません。
テンプレートもプラグイン対応になっているし、
編集もコピーしてるのに・・・
どうしてでしょうか?
るかさんへ
実際にブログを見ていないのでなんともいえませんが、ツリー化で一番多い失敗はカテゴリーを全て[ ]カッコで囲うのを忘れていることなので一度確認してみてください。ゆっくり落ち着いてやればツリー化はできると思うので頑張ってみて下さい。
管理人のみ閲覧できます
このコメントは管理人のみ閲覧できます
管理人のみ閲覧できます
このコメントは管理人のみ閲覧できます
鍵コメさん。
かなりの期間があいての返信になってしまいお詫びいたします。
ツリー化でお困りのようでしたが、テンプレートを変えたらできたとの事でよかったです。
機能満載だったり、デザイン重視などのテンプレではなかなかカスタマイズが難しいものもあるのでカスタマイズしたい人は、簡単なテンプレにするのも1つですね!!
たびたびすいませんが・・・
そもそもカテゴリーの中のグループ名が設置されてなければツリー化表示されないんですかね・・・・?


カテゴリー
[○○](←カテゴリーの中のグループ名)
 ├××
 └××


今のところ、カテゴリーのグループ名が無い状況(どの設定画面で施すのかもイマイチ・・・)でツリー化しようとしてますが・・・。
現在、説明文の「そして自分のグループ分けしたいグループ名を[グループ名]と記入して、カテゴリ名の前に入れます。」・・・あたりで四苦八苦しております。

飲み込みの遅い禁煙挑戦者さんへ
この方法ですと、グループ名が設置されてなければツリー化表示されないです。
なので全てのカテゴリーにカッコで[グループ名]をつけなければならないです。
グループ名
記事のカテゴリ名に[グループ名]を表示させたくないのですが
方法が分からないので、教えていただけませんか?
sk8lionさんへ
ツリー化をこの方法を使ってでしたら、記事のカテゴリ名の[グループ名]を消す事はできないです。<%topentry_category>を使ってカテゴリー名を表示させているので、一部のみを表示させないということができないからです。
やっとできました・・・!!
なんとかツリー化に成功・・・有難うございます♪
禁煙挑戦者さんへ
ツリー化成功おめでとうございます!!
ありがとうございました
はじめまして
ツリー化で検索して辿り着き、無事手順通りでツリー化に成功致しました。
他のサイト様の説明では解り難く諦めかけていましたが、この記事のおかげで成功です!そもそもどこへどうHTMLを入れたら良いのか解りませんからね、物凄く親切で解り易かったです。ありがとうございました。
unihinさんへ
はじめまして。確かに慣れていないとカスタマイズは難しいです。自分も最初は結構苦労しました。なのでこのブログを作ったのですけどね(^^;)
ツリー化ができてよかったです。
この記事のトラックバックURL

http://rgrg.blog61.fc2.com/tb.php/165-7bd00331   

今日はカテゴリを変えてみた。
暇だったのでカテゴリを加工してみた。まぁ見てくれまだ未発達だけでねちなみにこのような改造の仕方は初心者でもできる簡単FC2ブログの作り方さんの記事を見て作成しました...

Template Designed by DW99