Ringo Juice

 多喝蘋果汁有益身心健康。
スポンサーサイト


* * *




在群組化部分插入圖片的方法(FC2適用)


適用者:已經成功在回應或連結、文章分類使用了群組化者

在原本的設定中,如果link或comment部分,標題太長,因為換行的關係,會使前面的樹枝部分被切斷,看起來不怎麼美觀,如下圖所示:

原本狀態:



使用圖片之後:


用了圖片之後看起來比較清爽吧!
想要這麼做的人請看下面步驟。

首先,如果還沒有完成初步群組化的朋友,請到小倩的網誌看設定方法
FC2中文教學-連結集及引用的群組化
同樣如果要設定回應及文章分類,小倩的網誌也有詳細介紹囉!

如果你已經完成初步設定,那就繼續看下去吧

步驟一
準備插入用的圖片。
我所使用的圖片是小粋空間的サイドメニューのツリー化スクリプト(改)文章裡面提供的
如果找不到的人就從這裡按右鍵另存新檔下載吧〜


實線:
tree_lst_solid.giftree_end_solid.gif

虛線:
tree_lst_dotted.giftree_end_dotted.gif


實線與虛線皆包含兩個圖片,分別是list部分及end部分。
只要下載一組就好了,我自己用的是虛線。

步驟二
進入「ファイルアップロード」界面,將剛剛下載好的兩張圖片上傳,記下檔案網址。


步驟三
要編輯網頁設定了!

進入「テンプレートの設定」,按下目前使用樣版後面的「修正」
看「スタイルシートの編集 」(CSS部分),拉到最底,在最後加入以下語法。

/************************************/
/* 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(圖片(list部)的網址);
background-repeat: no-repeat!important;
list-style: none!important;
}
ul.tree li.end {
background-image: url(圖片(end部)的網址);
}


步驟四
在上面「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>'; /* ツリー本体の最後 */


注意:
紅色部分的語法記得把所有的<>改成半形的<>



這樣就完成了。

注意:由於每個人初次設定時複製的語法會有些許不同,可能會沒有後面那一串日文字,因此主要是注意前面的

var gTreeOption = new Array;
gTreeOption['sort'] = false;
gTreeOption['list'] = '├ ';
gTreeOption['end'] = '└ ';
gTreeOption['leef'] = '<br />\n';
gTreeOption['top'] = '<br />\n';
gTreeOption['btm'] = '';

找到相對應的部分來做修改即可。

本文是照著ムーニン谷の気ままな日記ツリー部分に画像を使用する方法來做的。

[Blog]教學 * CM22 * TB0 *




COMMENT
2006/01/30 20:46  | URL | 小倩 #EGTCt1XI [edit]
嗚喔!是小倩的留言[15]
能成為妳文章中的延伸閱讀真是太榮幸了[79]
非常感謝妳的賞光XD
2006/01/30 21:17  | URL | kinchan #- [edit]
偶从小倩那里看到这个的~步骤3的语法偶已经贴好了..但偶没在HTML里找到步骤4的语法~~我用的是honey_as_love
可以劳驾kinchan帮我一下那个语法吗?谢谢~
2006/06/28 21:26  | URL | freya #- [edit]
>freya
我剛剛看了妳網頁的原始碼,有看到步驟四的那一串喔[15]
妳可能是不小心眼花沒看見他們吧[07]
他位於靠近整個html語法最下面的地方〜
要是真的還找不到
那就按crtl+F搜尋「var gTreeOption」看看
祝妳成功喔〜
2006/06/29 02:25  | URL | kinchan #- [edit]
谢谢..之前素因为我按小倩的那个把远HTML的那整段删除了..所以找不到了..
非常感谢kinchan~~
还有就素我非常喜欢kinchan mero下面可移动的名片一样的东西.那个超可爱的.想请教一下怎么弄的~~
2006/06/29 14:05  | URL | freya #- [edit]
謝謝拉[02]你不說我還不知道多了呢.我刪掉了.完全OK.[34]
那BO内地的看不到的...偶怨念很久拉~~一直一直打不開..可不可以大致告訴我一下那個種子列表列表怎麽弄得...
2006/06/29 16:50  | URL | freya #- [edit]
原來是打不開swingさん的網頁阿[80]
那我就在這裡簡單地說明一下好了[30]

創作者是日本的門松さん
先從這裡下載.swf檔
http://zakka4u.up.seesaa.net/image/itemList02.swf
接著使用H.Fujimotoさん製作的「導入page」是最簡單的方式
http://www.h-fj.com/blogtools/itemlist.php
簡易翻譯:
FlashのURL:剛剛那個flash檔先上傳,在這裡填上檔案的url
メロの種類:白水滴是第三個モフモフ
メロの名前:水滴的名字
メロの住所:水滴的門牌號碼
ひとこと:簡單說一句話
前世:沒有的話這個就不用更改
接下來是撿到的種字們,有撿到的請點到後面的選項「持っている」
かたつむり:蝸牛
紫かたつむり:紫色蝸牛
チューリップ:鬱金香(有藍紅白黃四種)
カラフルフラワー:彩色的花(設置之後草原上會開出三色的花朵)
三色チューリップ:三色鬱金香
ネギ:蔥
ひまわり:向日葵(撿到草帽)
たけ:竹子(撿到竹筍)
ハチ:蜜蜂
ちょうちょ:蝴蝶
椰子の実:椰子
ジョロジョウロ:灑水器(有53、54)
えのきサボテン:白色金針收膺余
サクラ:櫻花(撿到毛蟲(據說))
菜の花:菜的花(撿到黃色蝴蝶)
色:這個是當水滴進入青春期變色後才需要設定,妳目前應該是不用

全部填好之後按下送信就會出現一串語法了
把他複製之後取代原本的水滴語法即可〜
2006/06/29 19:42  | URL | kinchan #- [edit]
我弄好了。但是想問FC2的BO可不可以上傳Flash檔的。。。
前面的那個Flash還是用代理才下到的。。。
你是用什麽上傳到的。。
2006/07/15 19:39  | URL | freya #- [edit]
耶,我就是直接上傳到FC2的空間的說
你不能上傳嗎?
2006/07/16 00:55  | URL | kinchan #- [edit]
FC2的我不会上传.请问素在哪里上传的.我试过用图片上传的那个上传.但素不成功...
2006/07/16 17:11  | URL | freya #- [edit]
請從管理者page裡面,左邊那一排有一個「ツール」
第一個ファイルアップロード
從這邊上傳〜[79]
2006/07/16 19:21  | URL | kinchan #- [edit]
可以哎..谢谢..上次我去掉勾勾才上传不来.,麻烦你很久了.谢谢kinchan[11]
2006/07/18 15:21  | URL | freya #- [edit]
不好意思啊,我也没有找到第四步骤的语法呢。好像都没有啊,我换了好几个模板

我现在用的是natsu
2006/09/09 16:08  | URL | 刹那微光 #- [edit]
我有弄出原始的樹狀,可是要改成虛線時變不過去,而且在步驟四時也沒在HTML的語法裡看到那一段,是因為我照小倩說的是加在最底的外掛語法裡嗎?
2007/02/02 01:11  | URL | Noway #dqep2qyw [edit]
Noway你好〜
我剛剛去看了一下你的網頁原始碼,有看到那一段喔
你可以試試看按ctrl+f尋找gTreeOption['sort']
如果真的在html修改處找不到的話
就直接去你加在外掛底下的樹狀語法改吧!
祝妳成功[03]
2007/02/02 01:17  | URL | kinchan #- [edit]
哇哇哇
成功啦
我兩邊都加兩邊都改就成功了耶[33]
大開心[02]
謝謝
ps.我也牽了你的連結哦(羞)
2007/02/02 02:59  | URL | Noway #dqep2qyw [edit]
喔喔〜〜[08]恭喜[09]你成功了!!
被牽連結真害羞[03]
因為我教學文只有兩篇啊XD
現在完全是變成日記板了
而且最近為了養水滴們還每天亂更新[05]
無論如何,還是歡迎你過來玩,亂留言也沒關係XD
2007/02/02 23:09  | URL | kinchan #- [edit]
謝謝你....小倩介紹我來這看看....
我成功了....好開心....
不過爲什麽我的最一格都得別的明顯呢?....
是不是我漏掉什麽沒做了....
2007/08/14 01:08  | URL | copper #- [edit]
您好,
照著這篇的方法卻出了一點小問題,
個人選擇的樣板本身就有「├」這個符號的圖片,
不過也只有「├」而沒有↓這個

--




--


所以我就自行改了一個(圖:http://0rz.tw/264IV)
我按照這篇做完卻發現...拿分類來說好了,
分類和子分類前面都有「├」符號,
不知道該怎麼把分類前面的刪除或者更改?

子分類前面的「├」照著上述的改卻還是預設的「├」
而不是個人自行上傳的,跟CSS不熟所以想請求幫忙...

如果不麻煩的話,先感謝囉。

另外...那個驗證碼看到就囧了...
把塵封已久的五十音拿出來才看的懂(汗
2008/08/26 18:59  | URL | 想 #- [edit]
啊...剛剛研究了一下,
發現子分類前面的「├」確實已經變更為個人自行改的,
目前剩下的問題是該如何把主分類前面的「├」
更改為其他圖示或者乾脆直接刪掉?
目前這樣看起來有點怪怪的...
2008/08/26 19:32  | URL | 想 #- [edit]
>想

你好,這已經是我很久以前寫的文章了,有些我自己也不是很清楚,不知道能不能幫上妳的忙,總之我先試試看!

list跟end部分用的是不一樣的圖喔,你自己修改的圖似乎只有list?所以才造成end跟list一樣嗎?
2008/08/28 19:29  | URL | kin #J7S1TTU6 [edit]
痾...不是end 跟list一樣的問題Orz

我花了一個下午研究了CSS終於知道怎改了(汗
不好意思還麻煩到你...

請不用再理會上面兩篇@@
2008/08/28 20:33  | URL | 想 #- [edit]
Secret

この記事のトラックバックURL
http://kinchan066.blog46.fc2.com/tb.php/6-1d8e3059
trackback