2009-09-09(Wed)
今までで 一番難しいカスタマイズでした。点線のツリー化方法を 紹介して下さっているサイトは 沢山あるんですが
ド素人の私にはなかなか理解が出来なくて かなり苦しみました。（笑）
私には 自分のブログの最新コメントが ちゃんとツリー化になっているように
見えているので とりあえず満足です。
とにかく カテゴリとおそろいの 点線にしたかったんです〜。（笑）
その方法を忘れないように 記事にしておこうと思います。
テンプレートを選ぶ時は サイドメニューは白色の方が良いかも。
← � 〆犬猟垢づ誓�の画像を 右クリックして
「名前をつけて画像を保存する」 を選び ファイル名を
「tree_a.gif」 に変えて 画像を保存。
← �◆〆犬�L字の点線の画像を 右クリックして「名前をつけて画像を保存する」 を選び ファイル名を
「tree_b.gif」 に変えて 画像を保存。
�� ブログの管理画面にログインします。
�ぁ〆限Ε瓮縫紂爾痢 屮侫．ぅ襪離▲奪廛蹇璽鼻廖，鯀�択。
先ほどの 二つの画像「tree_a.gif」 と 「tree_b.gif」 をアップロードして
その画像のアドレスを メモ帳などにコピーペイストしておく。
たぶん… http://blog-imgs-○.fc2.com/○/○/○/ユーザー名/tree_a.gif
こんな感じ↑のアドレスになります。
�ァ〆限Ε瓮縫紂爾痢 屮謄鵐廛譟璽箸寮瀋蝓廖，鯀�択。
�Α仝什濕�分が使っている テンプレート名の 「編集」 を選択。
�А �テンプレート名 の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'] = '<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); // リンクリストのツリー化
// -->
</script>
�─ 峭洪掘廖，鯀�択。
�� 同じ画面の下の方に 「テンプレート名のスタイルシート編集」 の
文字がたくさんある中の 一番下の行に ↓ をコピーペイストする。
赤い部分は ファイルのアップロードした 「tree_a.gif」 と 「tree_b.gif」 の
アドレスに書き換える。
文字の大きさが大きい場合は 12を11とか10に 書き換える。
/* -------------------------------------------------
ツリー
------------------------------------------------- */
ul.tree {
font-size: 12px;
margin-left: 3px;
padding: 0;
list-style: none;
}
ul.tree li.lst {
background-image: url(http://blog-imgs-○.fc2.com/○/○/○/ユーザー名/tree_a.gif);
background-repeat: no-repeat;
background-position: left top;
list-style-type: none;
list-style-image: none;
margin-left: 0px;
padding-left: 18px;
padding-bottom: 0px;
}
ul.tree li.end {
background-image: url(http://blog-imgs-○.fc2.com/○/○/○/ユーザー名/tree_b.gif);
background-repeat: no-repeat;
background-position: left top;
list-style-type: none;
list-style-image: none;
margin-left: 0px;
padding-left: 18px;
padding-bottom: 0px;
}
�� 「更新」 を選択。
�� 左側メニューの 「プラグインの設定」 を選択。
�� プラグインカテゴリから 「最新コメント」 の 「詳細」 を選択。
�� プラグインの改造の 「【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>
�� 「設定」 を選択。
プレビューで 最新コメントの状態を見ても カテゴリーのツリー化の時のように
なぜか プレビューでは 私は真ん中に見えてしまうんですが ブログのトップ
ページでは ちゃんと左寄りになっています。
ツリー化というのは こんな感じです。
�ぁヾ浜�画面の 左側メニューの「カテゴリの編集」にて 親子にしたいカテゴリを設定します。
�ァ〆限Ε瓮縫紂爾痢屮廛薀哀ぅ鵑寮瀋蝓廚砲董 屮張蝓漆道劵�テゴリB」の詳細から 「プレビュー」でどんな状態になっているか確認すると 私のブログでは真ん中に文字が集まって 変な状態になってますが トップページではちゃんと 左寄りになってます。
ホントに消えるかな？
FC2の管理画面左の 環境設定から
← ファビコンって こういうのです。
← この画面って
菌ちゃん(11/07)
キャン姫(11/07)
菌ちゃん(11/07)
菌ちゃん(11/07)
nipo(11/07)
菌ちゃん(11/07)
キャン姫(11/07)
美月♪(11/07)
菌ちゃん(11/07)
菌ちゃん(11/07)