2005年08月14日

ツリー化スクリプト ver 0.2 for livedoor

なんか出力される内容が変わってしまって、ツリー化されなくなったようですので、バージョンアップしました。以前のものを以下の内容に差し替えて下さい。

<script type="text/javascript">
<!--
function makeTreeElements (treeType,objList) {
	if (!objList.innerHTML) return;
	if (treeType.indexOf('com') > -1) {
		var objLink = objList.getElementsByTagName('a')[0];
		var linkUrl = objLink.getAttribute('href');
		var tmpText = objList.innerHTML;
		tmpText.match(/\((.*)\)/);
		this.elem = RegExp.$1;
		if (this.elem == null) this.elem = 'anonymouse';
		this.base = Array('<a href="',linkUrl,'">',objLink.innerHTML,'</a>').join('');
	} else if (treeType.indexOf('tb') > -1) {
		var objLink = objList.getElementsByTagName('a')[1];
		var linkUrl = objLink.getAttribute('href');
		var elemUrl = objList.getElementsByTagName('a')[0].getAttribute('href');
		var elemTxt = objList.getElementsByTagName('a')[0].innerHTML;
		var tmpText = objList.innerHTML.split('&nbsp;')[0];
		tmpText.match(/\((.*)\)/);
		this.elem = Array('<a href="',elemUrl,'">',elemTxt,'</a>(',RegExp.$1,')').join('');;
		this.base = Array('<a href="',linkUrl,'#trackback">',objLink.innerHTML,'</a>').join('');
	}
	return this;
}
function createTreeList(treeName,treeType,treeOpt) {
	var objFocus = this.document.getElementById('links');
	if (!objFocus) return;
	if (!objFocus.innerHTML) return;
	var objLists = objFocus.getElementsByTagName('div');
	var linkList = new Array();
	var outText  = new Array();
	if (objLists.length > 0) {
		for (var i=0;i<objLists.length;i++) {
			if (objLists[i].className == 'sidetitle' && objLists[i].innerHTML == treeName) {
				var num = i;
				if (objLists[i + 1] && objLists[i + 1].className == 'side') num = i + 1;
				else if (objLists[i + 2] && objLists[i + 2].className == 'side') num = i + 2;
				if (num > i) {
					var objTreeElems = objLists[num].getElementsByTagName('div');
					for (var j=0;j<objTreeElems.length;j++) {
						var chckFlag = true;
						var elemText = new makeTreeElements(treeType,objTreeElems[j]);
						if (!elemText.base || !elemText.elem) return;
						for (var k=0;k<linkList.length;k++) {
							if ( linkList[k].base.indexOf(elemText.base) > -1 ) {
								chckFlag = false;
								linkList[k][linkList[k].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 (var j=0;j<linkList.length;j++) {
							outText[outText.length] = Array('<li>',linkList[j].base,treeOpt.top).join('');
							if (linkList[j].length > 0 && treeOpt.sort) linkList[j].reverse();
							for (var k=0;k<linkList[j].length;k++) {
								outText[outText.length] = (k == linkList[j].length - 1) ? treeOpt.end : treeOpt.list;
								outText[outText.length] = Array(linkList[j][k],treeOpt.leaf).join('');
							}
							outText[outText.length] = Array(treeOpt.btm,'</li>').join('');
						}
						outText[outText.length] = '</ul>\n';
						objLists[num].innerHTML = outText.join('');
					}
				} // end of if (num > i)
			} // end of if (objLists[i].className == 'sidetitle' && objLists[i].innerHTML == 'treeName')
		} // end of for (var i=0;i<objLists.length;i++)
	} // end of if (objLists.length > 0)
}
function initSequel(tagName,className) {
	if (!document.body.innerHTML) return;
	var viewMode = window.location.search;
	var objDiv = document.getElementsByTagName(tagName);
	for (var i=0;i<objDiv.length;i++) {
		if ( objDiv[i].className == className && objDiv[i].getElementsByTagName('hr').length > 0 ) {
			var tmp = gTextSequel.length;
			var linkText = Array('<a class="toggleSequel" href="#" onclick="return toggleSequel(',tmp,')" onkeypress="return toggleSequel(',tmp,')">',gTextVisible,'</a>').join('');
			gTextSequel[tmp] = new Array();
			gTextSequel[tmp].text = objDiv[i].innerHTML.replace(/<hr \/>/i,'<HR>');
			gTextSequel[tmp].flag = false;
			objDiv[i].setAttribute('id',Array('livedoorEntryBody',tmp).join(''));
			objDiv[i].innerHTML = Array(gTextSequel[tmp].text.split(/<HR\/?>/i)[0],linkText).join('');
		}
	}
}
function toggleSequel(idNum) {
	if (!document.body.innerHTML) return false;
	var idName = Array('livedoorEntryBody',idNum).join('');
	var objFocus = document.getElementById(idName);
	if (objFocus) {
		var tmpText = new Array();
		var bodyText = '';
		var linkText = (gTextSequel[idNum].flag) ? gTextVisible : gTextHidden;
		linkText = Array('<a class="toggleSequel" href="#" onclick="return toggleSequel(',idNum,')" onkeypress="return toggleSequel(',idNum,')">',linkText,'</a>').join('');
		if (gTextSequel[idNum].flag) {
			bodyText = Array(gTextSequel[idNum].text.split(/<HR\/?>/i)[0],linkText).join('');
		} else {
			switch (gTextPosition) {
			case 0:
				bodyText = gTextSequel[idNum].text.split(/<HR\/?>/i).join(linkText);
				break;
			case 1:
				bodyText = Array(gTextSequel[idNum].text,linkText).join('<br />');
				break;
			case 2:
				bodyText = gTextSequel[idNum].text.split(/<HR\/?>/i).join(linkText);
				bodyText = Array(bodyText,linkText).join('<br />');
				break;
			}
		}
		gTextSequel[idNum].flag = (gTextSequel[idNum].flag) ? false : true;
		objFocus.innerHTML = bodyText;
	}
	return false;
}
/* 「続きを隠す」設定 */
gTextVisible = '↓[続きを表示]'; /* 「続き」を表示するためリンク */
gTextHidden = '↑[続きを隠す]'; /* 「続き」を隠すためのリンク */
gTextPosition = 0; /* 「続きを隠す」を表示する位置 0:「続き]の前 1:「続き」の後ろ 2:両方 */
gTextSequel = new Array();
initSequel('div','main');
/* ツリー設定 */
var gTreeOption = new Array;
gTreeOption['sort'] = false;               /* ツリー内の表示順 true:並び替える false:そのまま */
gTreeOption['list'] = '<li class="lst">';  /* ツリー用マーク(通常) */
gTreeOption['end']  = '<li class="end">';  /* ツリー用マーク(末端) */
gTreeOption['leaf'] = '</li>\n';           /* 各枝の末尾 */
gTreeOption['top']  = '<ul class="tree">'; /* ツリー本体の最初 */
gTreeOption['btm']  = '</ul>';             /* ツリー本体の最後 */
createTreeList('Comments','com',gTreeOption); // コメントリストのツリー化
createTreeList('Trackbacks','tb',gTreeOption); // トラックバックリストのツリー化
/* 著作表記 */
document.write('<address style="font-style:normal;text-align:center;">scripted by <a href="http://blog.livedoor.jp/simpleboxes/">takkyun</a></address>');
// -->
</script>

プラグインの設定やスタイルを変更したら、ブログの再構築を忘れずに。後、確認時にはブラウザのリロード操作が必要になるでしょう。

[参考]動作確認済みブラウザ

  • Internet Explorer 6 for Windows
  • Firefox 1.0 for Windows
  • Internet Explorer for Mac OS X
  • Safari
  • Firefox 1.0 for Mac OS X
  • Opera 7/7.5 for Windows

もし、この本文にスクリプトソースが見えない場合は、続きの方にも念のため同じソースを貼り付けておきますので、ご参考に。

  続きを読む

Posted by simpleboxes at 05:45Comments(7)TrackBack(5)カスタマイズ

2005年03月08日

記事の一部を隠す for livedoor

記事の一部を隠すスクリプトです。本文に<hr />を記述しておくと、それ以降の内容をデフォルトで非表示します。

記事を個別表示した際に、サイドバーがないことが前提です。

ツリー化スクリプトも一緒になってしまっているので、もしツリー化は利用しないという場合、ソースの中の赤字で強調した部分を削除してください。

フリーエリアのプラグインを追加します。もしツリー化スクリプトをすでに置かれている方はその内容を以下で置き換えてください。内容は下記の通り。

<script type="text/javascript">
<!--
function makeTreeElements (treeType,objList) {
  if (!objList.innerHTML) return;
  if (treeType.indexOf('com') > -1) {
    var objLink = objList.getElementsByTagName('a')[0];
    var linkUrl = objLink.getAttribute('href');
    var tmpText = objList.innerHTML;
    tmpText.match(/\((.*)\)/);
    this.elem = RegExp.$1;
    if (this.elem == null) this.elem = 'anonymouse';
    this.base = Array('<a href="',linkUrl,'">',objLink.innerHTML,'</a>').join('');
  } else if (treeType.indexOf('tb') > -1) {
    var objLink = objList.getElementsByTagName('a')[1];
    var linkUrl = objLink.getAttribute('href');
    var elemUrl = objList.getElementsByTagName('a')[0].getAttribute('href');
    var elemTxt = objList.getElementsByTagName('a')[0].innerHTML;
    var tmpText = objList.innerHTML.split('&nbsp;')[0];
    tmpText.match(/\((.*)\)/);
    this.elem = Array('<a href="',elemUrl,'">',elemTxt,'</a>(',RegExp.$1,')').join('');;
    this.base = Array('<a href="',linkUrl,'#trackback">',objLink.innerHTML,'</a>').join('');
  }
  return this;
}
function createTreeList(treeName,treeType,treeOpt) {
  var objFocus = this.document.getElementById('links');
  if (!objFocus) return;
  if (!objFocus.innerHTML) return;
  var objLists = objFocus.getElementsByTagName('div');
  var linkList = new Array();
  var outText  = new Array();
  if (objLists.length > 0) {
    for (var i=0;i<objLists.length;i++) {
      if (objLists[i].className == 'sidetitle' && objLists[i].innerHTML == treeName) {
        if (objLists[i+1] && objLists[i+1].className == 'side') {
          var objTreeElems = objLists[i+1].getElementsByTagName('div');
          for (var j=0;j<objTreeElems.length;j++) {
            var chckFlag = true;
            var elemText = new makeTreeElements(treeType,objTreeElems[j]);
            if (!elemText.base || !elemText.elem) return;
            for (var k=0;k<linkList.length;k++) {
              if ( linkList[k].base.indexOf(elemText.base) > -1 ) {
                chckFlag = false;
                linkList[k][linkList[k].length] = elemText.elem;
              }
            }
            if (chckFlag) {
              var tmpNum = linkList.length;
              linkList[tmpNum] = new Array();
              linkList[tmpNum][0] = elemText.elem;
              linkList[tmpNum].base = elemText.base;
            }
          }
        } // end of if (objLists[i+1] && objLists[i+1].className == 'side')
        if (linkList.length > 0) {
          outText[outText.length] = '<ul>\n';
          for (var j=0;j<linkList.length;j++) {
            outText[outText.length] = Array('<li>',linkList[j].base,treeOpt.top).join('');
            if (linkList[j].length > 0 && treeOpt.sort) linkList[j].reverse();
            for (var k=0;k<linkList[j].length;k++) {
              outText[outText.length] = (k == linkList[j].length - 1) ? treeOpt.end : treeOpt.list;
              outText[outText.length] = Array(linkList[j][k],treeOpt.leaf).join('');
            }
            outText[outText.length] = Array(treeOpt.btm,'</li>').join('');
          }
          outText[outText.length] = '</ul>\n';
          objLists[i+1].innerHTML = outText.join('');
        }
      } // end of if (objLists[i].className == 'sidetitle' && objLists[i].innerHTML == 'treeName')
    } // end of for (var i=0;i<objLists.length;i++)
  } // end of if (objLists.length > 0)
}
function initSequel(tagName,className) {
  if (!document.body.innerHTML) return;
  var viewMode = window.location.search;
  var objDiv = document.getElementsByTagName(tagName);
  for (var i=0;i<objDiv.length;i++) {
    if ( objDiv[i].className == className && objDiv[i].getElementsByTagName('hr').length > 0 ) {
      var tmp = gTextSequel.length;
      var linkText = Array('<a class="toggleSequel" href="#" onclick="return toggleSequel(',tmp,')" onkeypress="return toggleSequel(',tmp,')">',gTextVisible,'</a>').join('');
      gTextSequel[tmp] = new Array();
      gTextSequel[tmp].text = objDiv[i].innerHTML.replace(/<hr \/>/i,'<HR>');
      gTextSequel[tmp].flag = false;
      objDiv[i].setAttribute('id',Array('livedoorEntryBody',tmp).join(''));
      objDiv[i].innerHTML = Array(gTextSequel[tmp].text.split(/<HR\/?>/i)[0],linkText).join('');
    }
  }
}
function toggleSequel(idNum) {
  if (!document.body.innerHTML) return false;
  var idName = Array('livedoorEntryBody',idNum).join('');
  var objFocus = document.getElementById(idName);
  if (objFocus) {
    var tmpText = new Array();
    var bodyText = '';
    var linkText = (gTextSequel[idNum].flag) ? gTextVisible : gTextHidden;
    linkText = Array('<a class="toggleSequel" href="#" onclick="return toggleSequel(',idNum,')" onkeypress="return toggleSequel(',idNum,')">',linkText,'</a>').join('');
    if (gTextSequel[idNum].flag) {
      bodyText = Array(gTextSequel[idNum].text.split(/<HR\/?>/i)[0],linkText).join('');
    } else {
      switch (gTextPosition) {
      case 0:
        bodyText = gTextSequel[idNum].text.split(/<HR\/?>/i).join(linkText);
        break;
      case 1:
        bodyText = Array(gTextSequel[idNum].text,linkText).join('<br />');
        break;
      case 2:
        bodyText = gTextSequel[idNum].text.split(/<HR\/?>/i).join(linkText);
        bodyText = Array(bodyText,linkText).join('<br />');
        break;
      }
    }
    gTextSequel[idNum].flag = (gTextSequel[idNum].flag) ? false : true;
    objFocus.innerHTML = bodyText;
  }
  return false;
}
/* 「続きを隠す」設定 */
gTextVisible = '↓[続きを表示]'; /* 「続き」を表示するためリンク */
gTextHidden = '↑[続きを隠す]'; /* 「続き」を隠すためのリンク */
gTextPosition = 0; /* 「続きを隠す」を表示する位置 0:「続き]の前 1:「続き」の後ろ 2:両方 */
gTextSequel = new Array();
initSequel('div','main');
/* ツリー設定 */
var gTreeOption = new Array;
gTreeOption['sort'] = false;               /* ツリー内の表示順 true:並び替える false:そのまま */
gTreeOption['list'] = '<li class="lst">';  /* ツリー用マーク(通常) */
gTreeOption['end']  = '<li class="end">';  /* ツリー用マーク(末端) */
gTreeOption['leaf'] = '</li>\n';           /* 各枝の末尾 */
gTreeOption['top']  = '<ul class="tree">'; /* ツリー本体の最初 */
gTreeOption['btm']  = '</ul>';             /* ツリー本体の最後 */
createTreeList('Comments','com',gTreeOption); // コメントリストのツリー化
createTreeList('Trackbacks','tb',gTreeOption); // トラックバックリストのツリー化
/* 著作表記 */
document.write('<address style="font-style:normal;text-align:center;">scripted by <a href="http://blog.livedoor.jp/simpleboxes/">takkyun</a></address>');
// -->
</script>

強調表示した部分はツリー化のon/offになります。ツリー化を無効にしたい場合は、削除してください。

フォーマットは「変換しない」を選んでください。タイトルは別に何でも良いんですが、後で分かりやすくするため「Scripts」とでもつけておいてください。

もし正しく動作しない場合は、本文が記述されている部分のタグの確認が必要です。

上記スクリプトの中にinitSequel('div','main');という部分がありますが、ここが本文のタグを指定している部分にあたり、<div class="main">〜</div>で囲まれていると想定されています。

その他、設定や利用方法に関しては、JUGEMカスタマイズ講座 | 「記事の内容」の一部を隠すを参考にしてください。

もし、この本文にスクリプトソースが見えない場合は、続きの方にも念のため同じソースを貼り付けておきますので、ご参考に。

  続きを読む
Posted by simpleboxes at 07:17Comments(2501)TrackBack(3)カスタマイズ

2004年12月31日

時間ができたので……

出来るかどうかやってみないとわかんないんですが。

自分のところでもやってみたいという奇特な方、いらっしゃいましたら、お知らせ下さい。

あ、ただ、livedoorは個別記事表示の仕様がJUGEMとはまるで違うので、個別記事でサイドバーを表示するようにしている方には動作の保障しません。あしからず。


ほぃ。こんな感じ。

まんまJUGEMと同様ですね。

なんだ、できるんじゃん。デザインを変更した場合、有効にならないようなきがしますけど。要確認ですね。

  
Posted by simpleboxes at 06:20Comments(47)TrackBack(0)カスタマイズ

2004年12月29日

あ゛っ

ここまでやっておいて、弱小エンジニアの小言さんのサイトの存在に気付く。

私のよりも良いような気がするんですが……。

関連スクリプトはここら辺。

  
Posted by simpleboxes at 10:17Comments(2)TrackBack(1)

ツリー化スクリプト for livedoor

というわけで出来ました。サンプルはトップページにて。

行き当たりばったりの設計なので、ちゃんと動作するかは分かりませんけど、とりあえず、Firefox 1.0とInternet Explorer for Windowsでは動作している様子。

特に難しいことはしていませんが、設置に際してはそれなりに知識が必要です。

まずは下準備。

デザインは「カスタマイズ」を原則としていますが、htmlテンプレートの修正は必要ないはずです。とりあえず、ここではhtmlテンプレートは「デフォルト」に戻しています。

スタイルシートにツリー用のスタイル設定の記述を追加します。ただし、これは画像によるツリー化をしなければ、必要ありません。

続いて、プラグインの設定を確認します。ポイントは以下の通り。

  • 最新コメントの表示があること。そのタイトルを記録しておく。
  • 最新トラックバックの表示があること。そのタイトルを記録しておく。

フリーエリアのプラグインを追加してください。内容は下記の通り。

<script type="text/javascript">
<!--
function makeTreeElements (treeType,objList) {
  if (!objList.innerHTML) return;
  if (treeType.indexOf('com') > -1) {
    var objLink = objList.getElementsByTagName('a')[0];
    var linkUrl = objLink.getAttribute('href');
    var tmpText = objList.innerHTML;
    tmpText.match(/\((.*)\)/);
    this.elem = RegExp.$1;
    if (this.elem == null) this.elem = 'anonymouse';
    this.base = Array('<a href="',linkUrl,'">',objLink.innerHTML,'</a>').join('');
  } else if (treeType.indexOf('tb') > -1) {
    var objLink = objList.getElementsByTagName('a')[1];
    var linkUrl = objLink.getAttribute('href');
    var elemUrl = objList.getElementsByTagName('a')[0].getAttribute('href');
    var elemTxt = objList.getElementsByTagName('a')[0].innerHTML;
    var tmpText = objList.innerHTML.split('&nbsp;')[0];
    tmpText.match(/\((.*)\)/);
    this.elem = Array('<a href="',elemUrl,'">',elemTxt,'</a>(',RegExp.$1,')').join('');;
    this.base = Array('<a href="',linkUrl,'#trackback">',objLink.innerHTML,'</a>').join('');
    
  }
  return this;
}
function createTreeList(treeName,treeType,treeOpt) {
  var objFocus = this.document.getElementById('links');
  if (!objFocus) return;
  if (!objFocus.innerHTML) return;
  var objLists = objFocus.getElementsByTagName('div');
  var linkList = new Array();
  var outText  = new Array();
  if (objLists.length > 0) {
    for (var i=0;i<objLists.length;i++) {
      if (objLists[i].className == 'sidetitle' && objLists[i].innerHTML == treeName) {
        if (objLists[i+1] && objLists[i+1].className == 'side') {
          var objTreeElems = objLists[i+1].getElementsByTagName('div');
          for (var j=0;j<objTreeElems.length;j++) {
            var chckFlag = true;
            var elemText = new makeTreeElements(treeType,objTreeElems[j]);
            if (!elemText.base || !elemText.elem) return;
            for (var k=0;k<linkList.length;k++) {
              if ( linkList[k].base.indexOf(elemText.base) > -1 ) {
                chckFlag = false;
                linkList[k][linkList[k].length] = elemText.elem;
              }
            }
            if (chckFlag) {
              var tmpNum = linkList.length;
              linkList[tmpNum] = new Array();
              linkList[tmpNum][0] = elemText.elem;
              linkList[tmpNum].base = elemText.base;
            }
          }
        } // end of if (objLists[i+1] && objLists[i+1].className == 'side')
        if (linkList.length > 0) {
          outText[outText.length] = '<ul>\n';
          for (var j=0;j<linkList.length;j++) {
            outText[outText.length] = Array('<li>',linkList[j].base,treeOpt.top).join('');
            if (linkList[j].length > 0 && treeOpt.sort) linkList[j].reverse();
            for (var k=0;k<linkList[j].length;k++) {
              outText[outText.length] = (k == linkList[j].length - 1) ? treeOpt.end : treeOpt.list;
              outText[outText.length] = Array(linkList[j][k],treeOpt.leaf).join('');
            }
            outText[outText.length] = Array(treeOpt.btm,'</li>').join('');
          }
          outText[outText.length] = '</ul>\n';
          objLists[i+1].innerHTML = outText.join('');
        }
      } // end of if (objLists[i].className == 'sidetitle' && objLists[i].innerHTML == 'treeName')
    } // end of for (var i=0;i<objLists.length;i++)
  } // end of if (objLists.length > 0)
}
/* ツリー設定 */
var gTreeOption = new Array;
gTreeOption['sort'] = false;               /* ツリー内の表示順 true:並び替える false:そのまま */
gTreeOption['list'] = '<li class="lst">';  /* ツリー用マーク(通常) */
gTreeOption['end']  = '<li class="end">';  /* ツリー用マーク(末端) */
gTreeOption['leaf'] = '</li>\n';           /* 各枝の末尾 */
gTreeOption['top']  = '<ul class="tree">'; /* ツリー本体の最初 */
gTreeOption['btm']  = '</ul>';             /* ツリー本体の最後 */
createTreeList('Comments','com',gTreeOption); // コメントリストのツリー化
createTreeList('Trackbacks','tb',gTreeOption); // トラックバックリストのツリー化
/* 著作表記 */
document.write('<address style="font-style:normal;text-align:center;">scripted by <a href="http://blog.livedoor.jp/simpleboxes/">takkyun</a></address>');
// -->
</script>

強調表示した部分は、先の「プラグインの設定」で確認しておいたそれぞれのプラグインの名前を記述します。

フォーマットは「変換しない」を選んでください。タイトルは別に何でも良いんですが、後で分かりやすくするため「Scripts」とでもつけておいてください。

「ツリー設定」の部分でそれなりにカスタマイズ可能ですが、詳細は省略します。

詳しい設定内容などは「JUGEMカスタマイズ講座 | ツリー化スクリプト ver 2」もしくは「JUGEMカスタマイズ講座 | ツリー化カスタマイズ応用編」を参照してください。唯一の違いはgTreeOption['leef']gTreeOption['leaf']になっていることぐらいです。

プラグインの設定やスタイルを変更したら、ブログの再構築を忘れずに。後、確認時にはブラウザのリロード操作が必要になるでしょう。

[参考]動作確認済みブラウザ

  • Internet Explorer 6 for Windows
  • Firefox 1.0 for Windows
  • Internet Explorer for Mac OS X
  • Safari
  • Firefox 1.0 for Mac OS X
  • Opera 7/7.5 for Windows

もし、この本文にスクリプトソースが見えない場合は、続きの方にも念のため同じソースを貼り付けておきますので、ご参考に。

  続きを読む
Posted by simpleboxes at 08:40Comments(15)TrackBack(15)カスタマイズ

スクリプトの作成

さて。いよいよスクリプトの作成に入るわけですが。

スクリプトをどこに挿入するかを決めておかないといけません。

つーか、私livedoorのプラグインの仕様がまるで分からないんですが、いいんでしょうか?

とりあえず、プラグインを眺めてみると、Javascriptというのが目に付きます……が、これ外部Javascriptの呼び出しなんですね。

今回はlivedoor内で完結というのを目標にしているので、パス。外部スクリプトの呼出しでももちろんできるとは思いますが。

続いて……「フリーエリア」というのを見てみます。お、htmlも自由に書けるということ。

試しにごく簡単なスクリプトを書いてみましたが、スクリプトとして動作する様子。

ん、ではこれで行きましょう。サイドに余計なリストが追加されてしまいますが、ご愛嬌と言うことで。

  
Posted by simpleboxes at 07:35Comments(1)TrackBack(1)カスタマイズ

ツリー用のスタイル設定

スクリプトを作成する前にツリー用のスタイルをさっさと設定します。

これは私が以前から利用しているスタイルシートの移植なので、簡単簡単。

div.side ul {
  list-style: none;
  margin: 0px;
  padding: 0px;
}
ul.tree {
  list-style: none;
  margin: 0px;
  padding: 0px!important;
}
ul.tree li {
  margin: 0px;
  padding: 0px 0px 0px 16px;
  font-size: 100%;
  background-image: url(http://livedoor.blogimg.jp/simpleboxes/383c3d0e.gif);
  background-repeat: no-repeat;
}
ul.tree li.end {
  background-image: url(http://livedoor.blogimg.jp/simpleboxes/0459e47d.gif);
}

こんな感じですね。画像は前から利用しているツリー用画像をアップロードしました。

[2004/12/31追記] ちょっとだけ変更しました。

もし、この本文にCSSのソースが見えない場合は、続きの方にも念のため同じソースを貼り付けておきますので、ご参考に。

  続きを読む
Posted by simpleboxes at 07:27Comments(0)TrackBack(0)カスタマイズ

トラックバックリストの解析

ん?トラックバックリストは若干フォーマットが異なるようです。

<div class="sidebody"><a href="http://(中略)">コメントリストの解析</a>(in livedoor)&nbsp;
<br/>&nbsp;<a class="aside" href="http://(中略)">ツリー化スクリプト</a> </div>

若干複雑。念のため、もう一度トラックバックして複数のトラックバックを受信した場合も確認しておきます。

  
Posted by simpleboxes at 07:16Comments(0)TrackBack(0)カスタマイズ

コメントリストの解析

さて。まずはコメントリストの解析です。

デフォルトで出力される内容は以下の通り。

<div class="sidebody"><a class="aside" href="http://(中略)#comments">ツリー化スクリプト</a> (takkyun)</div>
<div class="sidebody"><a class="aside" href="http://(中略)#comments">ツリー化スクリプト</a> (takkyun)</div>
<div class="sidebody"><a class="aside" href="http://(中略)#comments">ツリー化スクリプト</a> (takkyun)</div>

ちょっとあんまりな内容ですが、まぁよしとしましょう。

構造自体は単純だし、必要な情報も揃っているようです。

ついでにこの記事から前の記事にトラックバックを送って、トラックバックリストの方も確認しておきます。

  
Posted by simpleboxes at 07:03Comments(0)TrackBack(0)カスタマイズ

ツリー化スクリプト

のためのテストです。

以前、ここに記事書いたことがあったような気がしたんですけど、消したのかな?

管理画面でなくなっているように見えるちゅーことは消したんでしょうけど。

ふむふむ。

  
Posted by simpleboxes at 06:45Comments(7)TrackBack(2)