FC2 樣板設計教學(下篇) 2009-02-08 23:42

如果你還沒看過
FC2 樣板設計教學(上篇)
FC2 樣板設計教學(中篇)
希望你能先看這兩篇～

兩篇都看完後
我們就向前衝吧！！




～Step1～ 找一個比較喜歡的樣板

這樣可以省下不少事

也可以把我疏漏的但你卻在意的部份直接GET!

如何使用他人共享或fc2提供的樣板呢？

請參考fc2提供的說明 關於FC2樣板






～Step2～ 修改 三欄位式or二欄位式 <<不要改則直接看Step3

（這比較技術，害怕的話請避免Step2，回Step1依照你所希望的欄位式做選擇吧～）

萬一他的版面很好只是欄位數不是我要的怎麼辦？？

第一種類 想從二欄式改成三欄式：

1. 在CSS編輯器中找到下圖紅圈處（還記得上一篇嗎？”相近”）

（有可能sidemenu是用right取名，找不到的話請留意一下）

2. 把紅圈處複製並貼在紅圈下方 → 一個加上1一個加上2 → 把float分別改成right和left 成類似下圖


3. 在HTML中找下圖反白處（頭<div id="sidemenu"> 尾</div><!-- /sidemenu -->）

(1)把頭的sidemenu加1→sidemenu1 尾也一樣
(2)把反白的區域複製並貼到HTML中<div id="main">之前（不必在意版面好不好看，對電腦而言成對的指令它自己會讀懂，不管中間有多少空白）
(3)把剛剛貼上的頭的sidemenu1的1改成2 尾也一樣
(4)把<div id="sidemenu2">和</div><!-- /sidemenu2 -->中的<!--plugin--><!--plugin_first-->和<!--/plugin_first--> <!--/plugin-->包含的區塊刪掉
(5)把<div id="sidemenu1">和</div><!-- /sidemenu1 -->中的<!--plugin--><!--plugin_second-->和<!--/plugin_second--> <!--/plugin-->包含的區塊刪掉
（(4)(5)的first 和 second那區塊程式碼就是分別掌控外掛程式”類別一””類別二”）

4. 在CSS中找到下圖紅圈處

藍圈的數字就是三個欄位大約的寬度總和(sidemenu1中的width是右欄寬，sidemenu2的width是左欄寬， main中的width則是中間欄寬)

※ 原則上sidemenu1、sidemenu2和main這三個width的總和要比上圖中container的width少5~15個px(提供一個參考container 987 px main 515 px sidemenu1 230 px sidemenu2 230 px)
※ 試著調整這些width的值用下方的”預覽”觀看直到滿意
※ 每一次預覽後請把該預覽視窗關掉等調好再點開，不然可能你新輸入的值它沒有真實的預覽出來

5.如果你都按照我的步驟確實改好，以後外掛程式”類別1”在右邊，外掛程式”類別2”在左邊

（第一種類完）

第二種類 想從三欄式改成二欄式：
1. 在HTML編輯器中找到下圖紅圈處並把紅圈處刪除

（可能藏在密密麻麻的程式碼中）

2. 在CSS中找到下兩圖紅圈處


上上圖container藍圈的數字就是兩個欄位大約的寬度總和(上圖sidemenu1中的width是左欄寬， main中的width則是右欄寬)

※ 原則上sidemenu1和main這兩個width的總和要比上圖中container的width少5~15個px(提供一個參考container 950 px main 708 px sidemenu1 230 px )
※ 試著調整這些width的值用下方的”預覽”觀看直到滿意
※ 每一次預覽後請把該預覽視窗關掉等調好再點開，不然可能你新輸入的值它沒有真實的預覽出來

◎ 以上你如果用”第一種類”的方法改成三欄就不能用”第二種類”的方法改回來了，反之亦然～






～Step3～ 二欄式左右對調 <<不希望對調者或三欄式者請直接到Step4

在CSS中找到下圖紅圈處

紅底線的main是指文章內容的那個欄位，sidemenu則是外掛程式那欄

改法很簡單，把藍圈處float的left改成right，right改成left即可






～Step4～ 改變視窗左右兩旁留邊寬度與各個欄位的寬度

什麼是兩旁留邊和欄位寬度？


修改左右兩旁留邊寬度：

在CSS找到下圖紅圈處

把藍圈的width數字調大則兩旁邊留邊寬就會被壓小，數字越小則兩旁留邊寬越大

可以用預覽看一看再調一調直到滿意
※ 每一次預覽後請把該預覽視窗關掉等調好再點開，不然可能你新輸入的值它沒有真實的預覽出來


修改各個欄位的寬度：

在CSS找到下圖紅圈處

此例圖為三欄式，sidemenu1的width是右欄寬，sidemenu2的width是左欄寬， main的width則是中間欄寬

原則上sidemenu1、sidemenu2和main這三個width的總和要比下圖中container的width少5~15個px(提供一個參考container 987 px main 515 px sidemenu1 230 px sidemenu2 230 px)

可以用預覽看一看再調一調直到滿意
※ 每一次預覽後請把該預覽視窗關掉等調好再點開，不然可能你新輸入的值它沒有真實的預覽出來








上圖是Step5、Step6所要修改的地方

～Step5～ 改變網誌上方的圖片(海報)大小與圖片

在CSS找到下圖紅圈處

藍圈的width是設定寬度
　　　height是設定高度
紫圈的 網址是圖片的位置

※可以上傳自己喜歡的圖片後更改其網址為你上傳的圖片網址，這樣就會是你喜歡的海報了~






～Step6～ 海報上網誌標題與說明文字排版

這裡因為每個人的理想排版模式都不一樣

所以我在這裡告訴各位其掌控的程式碼在何處和有何效果

自己試出滿意的排版版面吧~

請在HTML找出下圖處

藍圈的<%blog_name>是你的網誌名稱，可以把它刪掉或是改成你想要的文字
紫圈的<%introduction>是你以前輸入的介紹文，可以把它刪掉或是改成你想要的文字

※ 這裡提供大家一個排版技巧，在HTML中如果用一般的空白是沒有用的，想要有空白的效果請用”全形空白”
※ 或是使用table(表格)來協助
※ 也可以參考本網誌的說明文，反白一下就可以知道我大概用了什麼方式




～Step7～ 修改網誌背景底色

在CSS中找到下圖紅圈處

此圖藍圈中的#003142即是某顏色的編碼

改成你要顏色的編碼即可

※ 顏色編碼表可以google關鍵字「色碼表」或是參考fc2發文、留言時上色的工具






～Step8～ 修改文章標題圖片和外掛程式標題圖片

參考下圖你會更了解


修改文章標題圖片：

在CSS中找出下圖紅圈處

藍圈的網址就是文章標題圖片的位置，自行修改吧~


修改外掛程式標題圖片：

在CSS中找出下圖紅圈處

藍圈的網址就是外掛程式標題圖片的位置，自行修改吧~






～Step9～ 增加或修改欄位隔線

所謂的欄位隔線請參考下圖


其修改的地方在CSS中下圖紅圈處

就是上圖藍色的兩行字掌控欄位隔線

left和right是在右方出現還是在左方出現
px的值是厚度
後方#705A29是顏色編碼 (Step7有提到更詳細的顏色編碼介紹)

自行修改成自己喜歡的樣子吧~

沒有隔線的就自己加上去吧~






～Step10～進階與補充

如果你走到這一步

還是覺得版面不滿意尚有改進地方

以我自己的經驗

我會找一個已經有的樣板有我所不足但我想要的部份

然後試著觀察出如何修改


至於許多的外掛程式裡面的樣子或外觀

你可以找找CSS裡面有記錄的地方研究一下

或是直接在外掛程式中的HTML修改也行~


＝＝＝＝＝＝教學Mission Complete＝＝＝＝＝＝

給點鼓勵或建議吧~~