*All archives* |  *Admin*

スポンサーサイト
上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。

気が向いたら応援してください!(笑)
最新コメントのツリー化
   今までで 一番難しいカスタマイズでした。
   点線のツリー化方法を 紹介して下さっているサイトは 沢山あるんですが
   ド素人の私にはなかなか理解が出来なくて かなり苦しみました。(笑)
   私には 自分のブログの最新コメントが ちゃんとツリー化になっているように
   見えているので とりあえず満足です。
   とにかく カテゴリとおそろいの 点線にしたかったんです~。(笑)
   その方法を忘れないように 記事にしておこうと思います。
   テンプレートを選ぶ時は サイドメニューは白色の方が良いかも。

← ① 左の長い点線の画像を 右クリックして
  「名前をつけて画像を保存する」 を選び ファイル名を
  「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>

⑮ 「設定」 を選択。
  プレビューで 最新コメントの状態を見ても カテゴリーのツリー化の時のように
  なぜか プレビューでは 私は真ん中に見えてしまうんですが ブログのトップ
  ページでは ちゃんと左寄りになっています。

気が向いたら応援してください!(笑)

コメント

コメントの投稿

Secret
(非公開コメント受付中)

マニアック四柱推命

生年月日と出生時間
本人
相手
数字は半角で入力してください。 相手の情報を入れると相性診断も行います。

カテゴリ
最新コメント
コレ↓愛用してます

ヴェレダ
カレンドラベビーソープ
100g


ダイヤコーポレーション
丸型ランジェリーネット
24cm


ダイヤコーポレーション
丸型洗たくネット
33cm


セキスイ
ものほしスタンド
タオルが60枚干せる


パックスナチュロン
キッチンスポンジ


パックスナチュロン
ハンドソープ


エスケー
石けんハミガキ
ミント


アジュバン エミサリー
シャンプー300ml
トリートメント250g
送料無料


アルテ
オーガニック
クレンジング
150ml


マルティナ
シアーナ
クレンジングミルク
150ml


ネオナチュラル
ヒーリングローション
120ml


マルティナ
シアーナモイスチャーミルク
100ml


ネオナチュラル
UVホワイトプロ 30ml
SPF24 PA++


DHC
薬用リップクリーム
送料込み


ビオスリーH
1g×90包
お腹の調子がイイ

国産
本牛革底
ルームシューズ
ボアで暖かい

送料込
北海道南るもい産
ななつぼし
白米 2kg

海の精
やきしお
詰替用
60g

プロフィール

菌ちゃん

住人 : 菌ちゃん
今後の課題 : 洗い上がりのしっとり感
気になる事 : 石けん材料の善し悪し

合成界面活性剤入りの化粧品が 肌に及ぼす影響のことを全く知らずに使い続けた結果 超乾燥肌になってしまいました。
2006年から手作り石けんをはじめ 化粧品も日用品も出来るだけ 合成界面活性剤を使わないメーカー または使っていても肌へのダメージが少ないメーカーの製品を選んで使っています。

10歳のボタンインコを飼っています。
http://agapornis.blog40.fc2.com/

どうぞよろしくお願いします。

石けん材料のお店
ちょっぴりおすすめ
A&D
デジタル
ホームスケール
0.1g単位


お風呂の愉しみ
ホワイトパーム油
700ml


お風呂の愉しみ
ココナッツ油
700ml

牛乳パックや
お手持ちのモールドの
底に敷けば
ハニカムが作れる
テクスチャーシート

アクリルモールド
ミルクハーフセット
押出板付き

アクリルモールド
ミルクハーフセット
押出板なし

アクリルモールド
ロールショートセット
押出板付き

くまのプーさん
野菜抜き型
スタンプ用にも
コンフェ用にも◎


絵文字+
アルファベット
スタンプセット

アルファベット
スタンプセット
大特価

アルファベット
スタンプセット
期間限定特価


オリーブ石けん、
マルセイユ石けん
を作る


肌に髪に
「優しい石けん」
手作りレシピ32


美肌になろう!
手作りの
リキッドソープと
クレイ

リンク
[油脂] ↓植物油に関することは



[園芸・漢方]
素人園芸解説 -私はこう育てる-
自然と健康を化学する 漢方のツムラ
釜屋もぐさ本舗
化粧品成分ガイド.WEB


[コミュニティ]




[ブログ素材]


メールフォーム

名前:
メール:
件名:
本文:

ブログ内検索
QRコード
QR
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。