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

TOP > カスタマイズをしよう! > title - リンクのツリー化をつくりたい!

リンクのツリー化をつくりたい!

リンクを自分のまとめたいグループに分けて、ツリー化する事によってすっきりする方法を紹介します。
リンクのツリー化見本
ちなみに出来上がりはこの様になります。

リンクのツリー化の方法

【参考記事】 「ヒヨコ君増殖中 恋 FC2版」様:クリスマスツリーに肖ってツリー化の手引き  
         「JUGEMカスタマイズ講座」様;ツリー化スクリプト ver 2

最初にテンプレートの設定から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('');
}
}
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); // リンクリストのツリー化
// -->
</script>

このまま使うとツリーの部分が⇒になるのでこのブログの様にしたければ、下のほうにある、
gTreeOption['list'] = ' '; /* ツリー用マーク(通常) */
gTreeOption['end'] = ''; /* ツリー用マーク(末端) */
を通常の方をに末端の方をに張り替えて下さい。

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

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

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

次に管理画面の[プラグインの設定]→[リンク]の[HTMLの変更]をクリックします。
<ul>
<!--link-->
<li &align><a href="<%link_url>" title="<%link_name>" target="_blank"><%link_name></a></li>
<!--/link-->
<li><a href="./?admin">管理者ページ</a></li>
</ul>
すると、この様になっていますよね。

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

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

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

そして最後に管理画面の[環境設定]→[リンクの編集]を開きます。

ツリー化前
このようになっていますよね。

そして自分のグループ分けしたいグループ名を[グループ名]と記入して、リンクのサイト名の前に入れます。

ツリー化前
この様にします。順番はバラバラでもきっちりグループ分けしてくれるので、わざわざ直す必要はありません。1つずづしか変更できないので注意して下さい。
※全部のリンク名の前に[グループ名]を入れないとツリー化できないので気をつけて下さい。

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

できたので「ヒヨコ君増殖中 恋 FC2版」のひよこさんにお礼を言に行く。

さらにカスタマイズ

[○○](←リンクのグループ名)
 ├××
 └××
となっている[○○]の部分の太字を普通の太さにしたい人や、[ ]をなくしたい人は、一番最初に</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('');

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

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



◆FC2ブログの事でどうしても疑問が解決しない人はFC2ブログ ユーザーフォーラムへ。
★アフィリエイト人気ランキング★  [アフィリエイトとは?]
リンクシェア
の詳細はこちら
エーハチネット
の詳細はこちら
バリューコマース
の詳細はこちら
アフィリエイト リンクシェア ブログ 携帯対応 成果報酬 広告 テンプレート ブログパーツ
コメント
この記事のトラックバックURL

http://rgrg.blog61.fc2.com/tb.php/170-9bfb378d   

リンクツリー化
今日は学校から帰ってきてリンクツリー化を 勉強してました。 そんな勉強してる暇があったらそんな勉強より宿題しろってかww ずっとグ...

Template Designed by DW99