スポンサーサイト

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

在群組化部分插入圖片的方法(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'] = '';

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

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

スポンサーサイト

コメントの投稿

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

嗚喔!是小倩的留言[15]
能成為妳文章中的延伸閱讀真是太榮幸了[79]
非常感謝妳的賞光XD

NO SUBJECT

偶从小倩那里看到这个的~步骤3的语法偶已经贴好了..但偶没在HTML里找到步骤4的语法~~我用的是honey_as_love
可以劳驾kinchan帮我一下那个语法吗?谢谢~

NO SUBJECT

>freya
我剛剛看了妳網頁的原始碼,有看到步驟四的那一串喔[15]
妳可能是不小心眼花沒看見他們吧[07]
他位於靠近整個html語法最下面的地方~
要是真的還找不到
那就按crtl+F搜尋「var gTreeOption」看看
祝妳成功喔~

NO SUBJECT

谢谢..之前素因为我按小倩的那个把远HTML的那整段删除了..所以找不到了..
非常感谢kinchan~~
还有就素我非常喜欢kinchan mero下面可移动的名片一样的东西.那个超可爱的.想请教一下怎么弄的~~

NO SUBJECT

謝謝拉[02]你不說我還不知道多了呢.我刪掉了.完全OK.[34]
那BO内地的看不到的...偶怨念很久拉~~一直一直打不開..可不可以大致告訴我一下那個種子列表列表怎麽弄得...

NO SUBJECT

原來是打不開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)
えのきサボテン:白色金針仙人掌
サクラ:櫻花(撿到毛蟲(據說))
菜の花:菜的花(撿到黃色蝴蝶)
色:這個是當水滴進入青春期變色後才需要設定,妳目前應該是不用

全部填好之後按下送信就會出現一串語法了
把他複製之後取代原本的水滴語法即可~

NO SUBJECT

我弄好了。但是想問FC2的BO可不可以上傳Flash檔的。。。
前面的那個Flash還是用代理才下到的。。。
你是用什麽上傳到的。。

NO SUBJECT

耶,我就是直接上傳到FC2的空間的說
你不能上傳嗎?

NO SUBJECT

FC2的我不会上传.请问素在哪里上传的.我试过用图片上传的那个上传.但素不成功...

NO SUBJECT

請從管理者page裡面,左邊那一排有一個「ツール」
第一個ファイルアップロード
從這邊上傳~[79]

NO SUBJECT

可以哎..谢谢..上次我去掉勾勾才上传不来.,麻烦你很久了.谢谢kinchan[11]

NO SUBJECT

不好意思啊,我也没有找到第四步骤的语法呢。好像都没有啊,我换了好几个模板

我现在用的是natsu

求救

我有弄出原始的樹狀,可是要改成虛線時變不過去,而且在步驟四時也沒在HTML的語法裡看到那一段,是因為我照小倩說的是加在最底的外掛語法裡嗎?

Noway你好~
我剛剛去看了一下你的網頁原始碼,有看到那一段喔
你可以試試看按ctrl+f尋找gTreeOption['sort']
如果真的在html修改處找不到的話
就直接去你加在外掛底下的樹狀語法改吧!
祝妳成功[03]

哇哇哇
成功啦
我兩邊都加兩邊都改就成功了耶[33]
大開心[02]
謝謝
ps.我也牽了你的連結哦(羞)

喔喔~~[08]恭喜[09]你成功了!!
被牽連結真害羞[03]
因為我教學文只有兩篇啊XD
現在完全是變成日記板了
而且最近為了養水滴們還每天亂更新[05]
無論如何,還是歡迎你過來玩,亂留言也沒關係XD

謝謝你....小倩介紹我來這看看....
我成功了....好開心....
不過爲什麽我的最一格都得別的明顯呢?....
是不是我漏掉什麽沒做了....

您好,
照著這篇的方法卻出了一點小問題,
個人選擇的樣板本身就有「├」這個符號的圖片,
不過也只有「├」而沒有↓這個

--




--


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

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

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

另外...那個驗證碼看到就囧了...
把塵封已久的五十音拿出來才看的懂(汗

啊...剛剛研究了一下,
發現子分類前面的「├」確實已經變更為個人自行改的,
目前剩下的問題是該如何把主分類前面的「├」
更改為其他圖示或者乾脆直接刪掉?
目前這樣看起來有點怪怪的...

>想

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

list跟end部分用的是不一樣的圖喔,你自己修改的圖似乎只有list?所以才造成end跟list一樣嗎?

痾...不是end 跟list一樣的問題Orz

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

請不用再理會上面兩篇@@

-v-灰常感謝閣下的教程,搞了半天終于弄上去了,現在只剩下樹枝的顏色想改掉而已,3q
Profile

☆.;*。+゜

Author:☆.;*。+゜
Drink apple juice everyday keeps the anxiety away.

最新文章
最新回應
最新引用
文章彙集

分類
Link
管理者專用
ブログ内検索
全記事(数)表示
全タイトルを表示
meromero park

MLT by swing prev Randam Next *-Parthenon-*

ブロとも申請フォーム

この人とブロともになる

RSS
FC2カウンター
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。