《備份》プラグインのツリー化

我是根據少爺B的世界裡的「樹狀分類說明 & 語法 (一)」、「樹狀分類說明 & 語法 (二)」這二篇教學來修改Blog。

１．將分類欄位（如：分類目錄、最新文章、最新回覆、最新引用、Link）的HTMLを編集完全改成以下語法：

(1).最新コメント（=最新回覆）
＜div class="plugin_data" id="commentlist"＞
＜ul＞
＜!--plugin_comment--＞
＜li＞
＜!--$plugin_comment_entry_title--＞＜br＞
＜span class="plugin_cm＜!--if_comment_res--＞_with_res＜!--/if_comment_res--＞"＞＜a href="＜!--$plugin_comment_link--＞"＞＜!--$plugin_comment_title--＞＜/a＞
＜!--if_comment_res--＞ +Re＜!--/if_comment_res--＞＜/span＞ (＜!--$plugin_comment_mon--＞/＜!--$plugin_comment_day--＞)
＜/li＞
＜!--/plugin_comment--＞
＜/ul＞
＜/div＞

(2).最新トラックバック（=最新引用）
＜div class="plugin_data" id="tblist"＞
＜ul＞
＜!--plugin_trackback--＞
＜li＞
＜!--$plugin_trackback_entry_title--＞＜br＞
＜a href="＜!--$plugin_trackback_link--＞"＞＜!--$plugin_trackback_blog_title--＞＜/a＞ (＜!--$plugin_trackback_mon--＞/＜!--$plugin_trackback_day--＞)
＜/li＞
＜!--/plugin_trackback--＞
＜/ul＞
＜/div＞

(3).最新記事（=最新文章）
＜div class="plugin_data" id="entrylist"＞
＜ul＞
＜!--plugin_entry--＞
＜li＞＜a href="＜!--$plugin_entry_link--＞"＞＜!--$plugin_entry_title--＞＜/a＞ (＜!--$plugin_entry_mon--＞月＜!--$plugin_entry_day--＞日)＜ /li＞
＜!--/plugin_entry--＞
＜/ul＞
＜/div＞

(4).アーカイブ（=文章彙集）
＜div class="plugin_data" id="archivelist"＞
＜ul＞
＜!--plugin_archive--＞
＜li＞＜a href="＜!--$plugin_archive_link--＞"＞[＜!--$plugin_archive_year- -＞年]＜!--$plugin_archive_mon--＞月＜/a＞ (＜!--$plugin_archive_num--＞)
＜/li＞
＜!--/plugin_archive--＞
＜/ul＞
＜/div＞

(5).カテゴリー（=分類目錄）
＜div class="plugin_data" id="categorylist"＞
＜ul＞
＜!--plugin_category--＞
＜li＞＜a href="＜!--$plugin_category_link--＞"＞＜!--$plugin_category_title--＞ (＜!--$plugin_category_num--＞)＜/a＞＜/li＞
＜!--/plugin_category--＞
＜/ul＞

(6).リンク（=Link）
＜div class="plugin_data" id="linklist"＞
＜ul＞
＜!--plugin_link--＞
＜!--if_not_link_img--＞
＜li＞＜a href="＜!--$plugin_link_link--＞" target="＜!--$plugin_link_target--＞"＞＜!--$plugin_link_title--＞＜/a＞＜/li＞
＜!--/if_not_link_img--＞
＜!--/plugin_link--＞
＜/ul＞
＜/div＞
＜br＞
＜!--plugin_link--＞
＜!--if_link_img--＞
＜div class="plugin_data"＞
＜a href="＜!--$plugin_link_link--＞" target="＜!--$plugin_link_target--＞"＞＜img src="＜!--$plugin_link_img_link--＞" width="＜!--$plugin_link_img_width--＞" height="＜!--$plugin_link_img_height--＞" alt="＜!--$plugin_link_title--＞"＞＜/a＞
＜/div＞
＜!--/if_link_img--＞
＜!--/plugin_link--＞
＜/div＞

２．再到「環境設定」→「カテゴリーの編集」，將分類名稱寫成[大分類]小分類。

３．再將以下語法貼在＜/body＞前，而我是放在「プラグインの設定」裡的最後一個分類欄位裡，這樣子就可以方便帶著走 XD
＜script type="text/javascript"＞
＜!--
// JavaScript based on : JUGEMカスタマイズ講座(http://nz.jugemers.net/log/eid31.html)
// customize by : まめの一言（JUGEM出張所）(http://mamejiro.jugem.cc/?eid=179)
// customize by : ニンブロラボ.(http://shinobibloglab.blog.shinobi.jp/Entry/2/)
// customize by : playground(http://mannequin.blog.shinobi.jp/Entry/45/)
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 tmplinkUrl = linkUrl.split("#");
var tmpText = objList.innerHTML.split("⇒");
tmpText[0] = tmpText[0].slice(0,tmpText[0].search(/＜BR/i));
this.base = Array('＜a href="',tmplinkUrl[0],'"＞',tmpText[0],'＜/a＞').join('');
this.elem = tmpText[1];
} else if (idName.indexOf('entry') ＞ -1) {
var tmpText = objList.innerHTML;
tmpText.match(/\((\d{2}.+)\)/);
this.base = RegExp.$1;
this.elem = Array('＜a href="',linkUrl,'"＞',objLink.innerHTML,'＜/a＞').join('');
} else if (idName.indexOf('link') ＞ -1) {
var tmpTarget = objLink.getAttribute('target');
var tmpText = objList.innerHTML;
if ( tmpText.match(/\[(.+)\](.+)/) ) {
this.base = RegExp.$1;
this.elem = Array('＜a href="',linkUrl,'" target="',tmpTarget,'"＞',RegExp.$2,'＜/a＞').join('');
}
} else if (idName.indexOf('category') ＞ -1) {
var tmpText = objList.innerHTML;
if ( tmpText.match(/\[(.+)\](.+)/) ) {
this.base = RegExp.$1;
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(/\[(.+)\](.+)/);
this.base = RegExp.$1;
this.elem = Array('＜a href="',linkUrl,'"＞',RegExp.$2,'＜/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('entrylist',gTreeOption); // 最新記事リストのツリー化
createTreeList('linklist',gTreeOption); // リンクリストのツリー化
createTreeList('categorylist',gTreeOption); // カテゴリーリストのツリー化
createTreeList('archivelist',gTreeOption); // アーカイブリストのツリー化
/* ツリーオプションここから 最新コメント、最新トラックバック以下方法顯示 */
gTreeOption['sort'] = false; /* ツリー内の表示順 true:並び替える false:そのまま */
gTreeOption['list'] = '┣'; /* ツリー用マーク(通常) */
gTreeOption['end'] = '┗'; /* ツリー用マーク(末端) */
gTreeOption['leef'] = '＜br＞\n'; /* 各枝の末尾 */
gTreeOption['top'] = '＜br＞\n'; /* ツリー本体の最初 */
gTreeOption['btm'] = ''; /* ツリー本体の最後 */
/* ツリーオプションここまで */
createTreeList('commentlist',gTreeOption); // 最新コメントリストのツリー化
createTreeList('tblist',gTreeOption); // 最新トラックバックリストのツリー化
// --＞
＜/script＞


再參考Ringo Juice」裡的「在群組化部分插入圖片的方法(FC2適用)」及JUGEMカスタマイズ講座」裡的「ツリー化スクリプト ver 2」、「ツリー化カスタマイズ応用編」這三篇教學，將樹狀以圖片的方法取代之前的├、└，使畫面變的更好看。不過這要用到css部份，css對我來說是謎樣的程式，有看沒懂啊～其實在這不懂沒關係，因為只要照著做就可以嘍！

１．先將虛線lst,end這二個檔案，存入網頁空間，並將網址記下。
２．把下列的語法加入css語法的最底下。
　　url(****)，請依照下面說明，把剛才記下的網址打上去。
/************************************/
/* list群組化 */
ul.tree {
margin: 0px!important;
padding: 0px!important;
list-style: none!important;
}
ul.tree li{
margin: 0px!important;
padding: 0px 0px 0px 16px!important;
background-image: url(輸入lst.gif網址);
background-repeat: no-repeat!important;
list-style: none!important;
}
ul.tree li.end {
background-image: url(輸入end.gif網址);
}

３．在「HTMLの編集」找到最先的樹狀語法，如下：
/* ツリーオプションここから 最新記事、リンク、カテゴリー、アーカイブ以下方法顯示 */
var gTreeOption = new Array;
gTreeOption['sort'] = false; /* ツリー内の表示順 true:並び替える false:そのまま */
gTreeOption['list'] = '├ '; /* ツリー用マーク(通常) */
gTreeOption['end'] = '└ '; /* ツリー用マーク(末端) */
gTreeOption['leef'] = '＜br /＞\n'; /* 各枝の末尾 */
gTreeOption['top'] = '＜br /＞\n'; /* ツリー本体の最初 */
gTreeOption['btm'] = ''; /* ツリー本体の最後 */
/* ツリーオプションここまで */

　　將它們取代為：
/* ツリーオプションここから 最新記事、リンク、カテゴリー、アーカイブ以下方法顯示*/
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＞'; /* ツリー本体の最後 */
/* ツリーオプションここまで */

４．這樣子就全部完成囉！

這篇文章，有很多都是從上述連結的人的文章裡拷貝過來的，而我略修改成我自己的版本罷了，所以這不是教學唷！

close

《備份》追記折疊

會寫這一系列的備份文完全是為我自己，因為很愛換樣版，可是有些東西換樣版又不能帶著走，一切都要重新來過。重新來過的大麻煩是還要再找一次教學，並將之前該補的都補上去；有鑑於本人的腦笨目珠花的功力，寫下來做自己的專屬備份，下次換樣版時比較輕鬆。

所以這不是教學、不是教學、不是教學。

本篇文之內容，源自於泠水榭忍者Blog教學，我今天要來做備份的資料是從她那邊來的唷！有興趣的人可以去看一看這篇『[翻譯]追記折疊教學』。

接下來是我的備份資料（下列語法已將<>改為＜＞）：
１．先將「樣式原始碼」複製至記事本，一份為備份檔，一份為修改檔

２．將下列語法貼在修改檔記事本裡＜head＞和＜/head＞之間
＜!--Begin 追記折疊--＞
＜script language="javascript" type="text/javascript"＞
＜!--
function showMore(varA1, varB1){
var123 = ('varXYZ' + (varA1));
varABC = ('varP' + (varA1));
if( document.getElementById ) {
if( document.getElementById(var123).style.display ) {
if( varB1 != 0 ) {
document.getElementById(var123).style.display = "block";
document.getElementById(varABC).style.display = "none";
} else {
document.getElementById(var123).style.display = "none";
document.getElementById(varABC).style.display = "block"; }
} else {
location.href = varB1;
return true;
}
} else {
location.href = varB1;
return true;
}
}
//--＞
＜/script＞
＜!--End 追記折疊--＞

３．在修改檔記事本上按「編輯」→「尋找」，尋找下述區塊
＜!--if_not_entry--＞
＜!--if_ps_text--＞
*****************
*****************
*****************
*****************
*****************
＜!--/if_ps_text--＞
＜!--/if_not_entry--＞

４．將全部***替換成以下二擇一的語法
＜div id="varP＜!--$entry_no--＞" class="EntryPsText"＞
＜a title="閱讀追記" href="＜!--$entry_link--＞#＜!--$entry_no--＞" style="border: none;" onclick="showMore(＜!--$entry_no--＞,'＜!--$entry_link--＞#＜!--$entry_no--＞');return false;"＞閱讀追記＜/a＞
＜/div＞
＜div id="varXYZ＜!--$entry_no--＞" style="display: none" class="EntryText"＞
＜!--$entry_ps_text--＞
＜div class="EntryPsText"＞＜a title="隱藏追記" href="#＜!--$entry_no--＞" style="border:none;" onclick="showMore(＜!--$entry_no--＞,0);return true;"＞隱藏追記＜/a＞＜/div＞
＜/div＞
或
＜div class="EntryPsText"＞
＜span id="varP＜!--$entry_no--＞" class="more"＞
＜a title="続きを読む" href="＜!--$entry_link--＞#＜!--$entry_no--＞" style="border: none;" onclick="showMore(＜!--$entry_no--＞,'＜!--$entry_link--＞#＜!--$entry_no--＞');return false;"＞閱讀追記＜/a＞＜/span＞
＜/div＞
＜div id="varXYZ＜!--$entry_no--＞" style="display: none"＞
＜div class="EntryText"＞
＜!--$entry_ps_text--＞
＜div class="EntryPsText"＞＜span class="more"＞＜a title="続きを隠す" href="#＜!--$entry_no--＞" style="border:none;" onclick="showMore(＜!--$entry_no--＞,0);return true;"＞隱藏追記＜/a＞＜/span＞＜/div＞
＜/div＞
＜/div＞
※【閱讀追記、隱藏追記、続きを読む、続きを隠す】都是可以更改成自己想要的名稱唷！

５．再做一次尋找的動作，尋找＜a href="＜!--$entry_link--＞"＞
將這一行完全替換成＜a href="＜!--$entry_link--＞" id="＜!--$entry_no--＞" name="＜!--$entry_no--＞"＞
這第5個步驟做不做都可以，不過我太愛這個《按隱藏追記後，畫面回到標題》，不管如何這是一定要的啦～

６．將修改檔記事本的樣式原始碼全部複製後，貼回去並存檔，這個就大功告成嘍。

close

shiseido扮粧娃娃

愛逛Blog的我，最大的致命傷是「有可愛的東西，就想要擺上Blog」，但外語實在不行，都是等到有人以中文說明後，才申請來玩。即使有些慢，但…Blog也陸陸續續的加入新血，朋友也抱怨開我的Blog都很慢，可是我還是想放啊！
最近的新成員我稱他為「shiseido扮粧娃娃」，於上週在～☆星辰的網誌☆～看見她有寫一篇Beauty Voltage可愛化妝娃娃的教學；實際申請時才發現，這是不用寫什麼e-mail或資料就可以得到的娃娃。

記得在申請時，某一畫面會出現一組亂碼組成的code，這code會在語法裡出現，但是卻沒有其他的用處，因為我發現只要在甲電腦以IE申請，就只能用甲電腦IE開啟使用。若用甲電腦以其他的瀏覽器的話，就要重新申請一個娃娃，這是怎樣？還規定只能在同一電腦、同一瀏覽器開啟才能升級？害我多申請了一組。

就在昨天，娃娃終於與カレ零距離接觸，等級數值1000vol，還收到小禮物，且畫面也加入有與カレ間的親密度升級會得到什麼的說明。

看見沒？在左下角有個「カレを表示」，按下去視窗就會出現男娃娃唷。但在今天，我做了件很白痴的事，回答錯問題，與カレ的零距離沒了，嗚……早知道就做做保養、看看廣告就好了。


上圖畫面解說：
1．黑色方框：
每天一次，用滑鼠拉到娃娃身上，一項產品升級10vol，共可得90vol。
2．紫色圓框：
達到什麼級數可使用什麼。「着替える」替換服飾；「美容院」更換髮形、髮色；「小物」髮飾、小包包等；「エトセトラ」更改背景（小狗小貓也是背景喲）
3．綠色方框：
可以升級的選單，除了「マイキャラクター」、「ユアボイス」無法得到vol，共可得250vol。
※在「スキンケア」觀看產品使用方法、回答對問題，共可得180vol。答錯要扣20vol，真貴！
※在「キレイ情報」可在秘密升級10vol唷。在看見按下「start」，接下來會問二個問題，都給它按「×」即可。還有另一個秘密升級唷！男娃娃會向女娃娃問日常生活問題，回答「はい」就有30vol，回答「いいえ」有什麼結果，我沒有試過。目前為止，我碰過二次。
4．咖啡色框：顯示目前狀況。

如果在產品區答題都對的話，一天就可得到340vol，很快吧！答錯會很慘，就像我一樣。可以選擇不答，這樣一天下來也有250vol。

今天的vol都用完了，沒有カレ的日子真難過，明天也要加油。
如果我的想法沒有錯的話，親蜜度的升級應該是以一天5％來升級才對；不知道會不會碰見什麼對話視窗，如果有的話，應該也會增加親蜜度吧！

明天要升級，接著就要持續增加親蜜度………

close