懵懵懂懂的闖入部落格，欣喜見到痞客邦免費提供了現成樣式百百款，不用我費神設計。

如果你和我一樣，雖然對CSS語法一竅不通，卻一直很想要依照自己的意念修改部落格，

那麼，這篇力求語彙簡單、淺顯易懂的文章，就很適合如你我這般「電腦苦手」的程度。

繼續往下讀文章前，請先記住首圖那三個單字，我們會經常見到。  好了嗎？Let's Go！

 

 

2012年3月7日，是小白鯨開啟部落格生活的日子。

在此之前，我對電腦的硬體和軟體，只是有著基本的認知及粗淺的操作能力。

 

可以選擇合意版型，也可以在管理後台/樣式管理/自訂樣式進階版，改改字體或顏色。

 

然而，【CSS原始碼編輯】，雖看得懂少數單字，語法卻完全霧煞煞，簡直有如天書！

 

《初心小格》至今也600多個日子，目前套用的樣式，我很喜歡。

這個版型存在幾個瑕不掩瑜的小缺點，一直懶得理它們(其實是根本不知該如何解決)，

最近這幾天，我這個CSS初心者，終於決心跟CSS語法正面對決，跟它拼了啦！

 

一、我為什麼要認識基本的CSS語法，並懂得如何修改？

 

「部落格」：透過文字、圖畫、照片為媒介，傳達意念、分享美好事物，或分憂心情故事。

茫茫格海，大家有緣牽繫相會，能夠點進小白鯨文章瞧瞧，並願意駐足片刻，我心存感恩。

不論是照片或文字，甚至是部落格版面本身，如何讓它們有著基本的美感，我一直在努力。

 

請看看下圖，這是《初心小格》12月28日以前的「側欄」區，你發現了什麼？

 

「側欄」區的「熱門文章」，

有幾篇文章標題的句尾，被吃掉了！

 

哈！這確實只是微不足道的小疙瘩，

可以忽略漠視。

 

偏偏這兩天有夠冷，放假不敢出門，

櫻櫻美黛子，就在電腦前玩玩吧。

 

鼓起勇氣進入【CSS原始碼編輯】，

尋尋覓覓，嘗試可能的相關語法，

失敗了幾次，

終於讓被吃掉的句尾，亮相囉！

(設定步驟，後面會詳述。)

 

這般主動嘗試、幾經失敗、

最後成功的自我挑戰過程，

真的很爽！

 

 

 

二、知道自己需要的是什麼，不需要什麼。

 

即使我有了上述微不足道的小成功，可是，我對CSS語法依然囫圇吞棗。

我不想花太多時間與精神鑽研CSS語法，我更不想通盤徹底的跟它有多熟。

鼓勵大家認識基本的CSS語法，並懂得如何修改，是想要增進一些使用部落格的樂趣。

套用了現成的版型，我們還是可以依自己的意念，創造一個獨一無二的部落格。

 

咱們就先從刊頭、文章區塊、側欄及留言區這四方面，開始輕鬆的玩玩CSS吧！

 

 

<綱要>

(一)、刊頭(橫幅)(header)

(二)、文章區塊(content)

A、內文文字行距

B、內文與邊界的距離

C、內文段落間的距離

D、文章標題列

(三)、側欄(links)

A、側欄標題欄的寬度、字體大小及顏色、背景顏色

B、側欄寬度

C、側欄的文字欄位寬度

D、側欄的文字連結顏色

E、三欄式的側欄寬度

(四)、留言區

A、留言訪客資訊的標題列

B、留言標題列的流水號碼

C、每一個留言區的背景顏色

D、「訪客留言區」與「版主回覆區」

E、悄悄話

F、訪客留言者的頭像

 

 

 

(一)、刊頭(橫幅)(header)

 

1.進入【CSS原始碼編輯】。

2.找到　#header　這一段語法。(請善用　Ctrl+F　搜尋)

3.每個版型的CSS語法不盡相同，因此，刊頭的寬度及高度也各不同。

   認識自己的部落格刊頭的寬度及高度，才能適切選用自己的相片，做為美美的刊頭唷！

4.利用影像編修軟體，將相片裁切縮圖成適當大小，上傳至相簿。

   註：《初心小格》目前使用的版型，　header　是960X300px，

         小白鯨想要讓圖片滿版，所以把圖片裁切成975X397px。

5.可以直接在CSS這裡輸入相簿相片網址，或是透過「自訂樣式進階版」更為簡便。

 

 

(二)、文章區塊(content)

 

文章區塊，是我們嘔心瀝血的智慧結晶所在，也是我們與世界交流接軌的櫥窗。

我們可以在「自訂樣式進階版」，設定文章區塊的背景、內文文字、標題文字、超連結。

 

如果大家還想要進行細部調整設定，那就要修改CSS語法： 

 

A、內文文字行距

 

1.找到　.article-content　這一段語法。

 

2.找到　line-height　。

　(註：有的版型，可能如小白鯨上圖所示，沒有這句語法，大家可以放膽加入。)

 

3.請比較左右兩圖，文章文字行距的差別。

  　　
 

左圖是目前《初心小格》所見的文字行距(沒有　line-height，也就是0px) ；

右圖是我故意惡搞，把　line-height　設定成40px。

 

因此，要不要增列　line-height　？又要設定多少px？都可以隨我們高興。

 

 

B、內文與邊界的距離

 

1.首先讓我們認識這個語法　margin　：「邊界」，我會在後續文章經常提到。

 

 

2.請比較左右兩圖，文章標題與首圖間距的差別：

  　
 

 

3.左圖是目前格子所見的邊界上緣(margin 15px)；右圖是我惡搞把margin設定成50px。

 

4.如有必要，我們可以再精細的設定文章區塊與上下左右四個邊界之間的距離。

　margin-top：上邊界　　　margin-bottom：下邊界

　margin-left：左邊界　　　margin-right：右邊界

5.或是將四個邊界的距離，直接在同一行做設定。

　不過，必須要依照順時鐘方向的順序：上、右、下、左　進行設定喔！

 

6.嘿嘿～我們再來惡搞一下吧：

  　  

左圖是目前《初心小格》邊界設定：「margin 15px 0；」→上邊界15px，其他是0。

右圖：「margin 15px 0 0 30px；」→上邊界15，右邊界和下邊界0，左邊界30px，

明顯可見，30px對《初心小格》這個版型而言太寬了，原本的文章內文會被擠到下一行。

大家多玩幾次，便能找出讓你滿意的黃金比例！

 

 

C、內文段落間的距離

 

打文章，我們總會適當的按下Enter鍵分行或分段，讓文章清爽易讀。

 

如果想要依自己的意念，設定段落間(甚至是行與行之間)的間距，可以怎麼做呢？

1.找到　.article-content p 。

 

2.上圖第二行的　margin-bottom　原始設定是1em，我來試試看，改成3em。

 

4.修改後的段落間距，會不會太寬了些？似乎並不合我的意念，哈！

 

 

D、文章標題列

 

文章標題列的字體大小與顏色，可以在「自訂樣式進階版」，直覺設定。

 

既然勇敢闖進了【CSS原始碼編輯】，那就來瞧瞧有關文章標題列的語法，隱身何處？

1.找到　.article-head .title　這一段語法。

 

2.認識　width　的作用：

 　我這個版型，有關文章標題列的原始寬度是560px，所以大家見到的標題正常如下：

 

如果將　width　調整成300px，又會怎麼樣呢？

 

就會出現下圖很好笑的標題……

相反的，如果大家的文章標題通常比較長，可以適當的調整寬度，讓字都在同一行。

 

3.認識　font-size　的作用：

　調整標題列寬度後，如果字數太多，還是無法塞在同一行；或是本來就想要改字體大小。

 

 

上圖是目前《初心小格》標題設定的字體大小20px，下圖是調整成30px後的標題。

 　

 

如果要在CSS語法編輯文章標題的字體大小，必須同時在這兩段語法修改：

　.article-head .title　以及　.article-head .title a (滑鼠滑過超連結時的作用)。

     

 

4.調整　month　date

如果大家欲罷不能，還想再玩玩，那就對文章標題的發文日期下手吧！

在font-size改變字體大小，還可以在color改變顏色。(詳如後述)

  　  

 

 

(三)、側欄(links)

 

痞客邦提供了二欄式與三欄式的版型，除了某個小地方要注意，有關側欄的設定大同小異。

 

 

A、側欄標題欄的寬度、字體大小及顏色、背景顏色

 

在「自訂樣式進階版」，針對「側欄」可以調整的項目，少之又少。

 

如果想要細部做調整，只能硬著頭皮，勇闖【CSS原始碼編輯】了。

你滿意「側欄」的標題欄位的顏色與字體大小嗎？快來跟著小白鯨改～改～改！

1.找到　.box-title　這一段語法：

 

2.標題寬度：任意調整這裡的寬度數值，不可以超過　#link　的寬度數值，詳後述。

3.標題字體大小：隨你意，調整大小。

4.標題置中：請把這句　text-align:center;  加在　.box-title　這一段任一行。

5.標題背景顏色與字體顏色：請參考色碼表，輸入你喜歡的顏色。

　例如：小白鯨希望標題背景顏色是淺綠色，因而把原本版型預設顏色改成#99cc66。

 

 

B、側欄寬度

 

首先，我們要建立一個清楚的觀念：

部落格的總寬度＝文章區塊(content)+側欄（links）+左右邊界（margin）的寬度總和。

 

以小白鯨使用這個版型為例，找到　#container　這段語法，看到總寬度是970px。

 

 

接著，我們在　#content　找到「文章區塊」的寬度是640px。(#link　則是260px)

 

 

970的總寬度 - 640「文章區塊」的寬度=330，所以，剩下的330都通通給「側欄」？

 

因為「側欄」區的「熱門文章」，

有幾篇文章標題的句尾，被吃掉了！

 

我單純以為：

只要把「側欄」原本的寬度260px增加成330px，應該就能讓所有文字完整呈現，結果……

 

右方的「側欄」，全被擠到「文章區塊」結束末端的右下方了。

 

這究竟是怎麼一回事？

原來，我忘記了　#content　有　margin-left　與左邊邊界的距離25px，也要算進去。

 

舉一反三，我們當然也要考慮「側欄」到右邊邊界的距離25px。

現在來算一算：970-640-25X2=280，我的　#link　最多只能到280px，不是330px。

 

 

C、側欄的文字欄位寬度

 

在總寬度下，適度縮小「文章區塊」寬度，並放大「側欄」寬度，是可行卻很麻煩的法子！

我不想把文章區塊版面搞得七暈八素，於是試著就　box-text　側欄文字欄位，著手解決。

 

上圖是原始的CSS語法，文字欄位寬度240px，右邊界內縮10px，

這就是當我的標題文字長度稍微超過240px時，就會出現句尾被吃掉的原因所在。

於是，我做了如下圖的設定調整：讓文字欄位寬度增加，且讓右邊界距離變成 0，

同時為了版面美觀，讓文字的左端和「文章區塊」有適當間隔。

 

 

D、側欄的文字連結顏色

  

側欄文字連結的顏色，如果想要改變版型預設顏色(如下圖左方)，該怎麼修改呢？

 

 

請找到　.folder　這一大段語法，以及下一段有　a:hover　的語法：

 

 

然後，在這兩段各增列　color : # 想要顏色的色碼 ;　這句語法。

 

 

 

E、三欄式的側欄寬度

 

如果你使用的是三欄式的版型，請在CSS語法找到：#links-row-1、#links-row-2。

若要進行寬度調整時，請記得下列這個公式：

#links-row-1　+　#links-row-2　+　margin 　≦　#links　的寬度。

 

 

(四)、留言區

 

我們可以在「自訂樣式進階版」，簡易的調整「刊頭」、「文章區塊」和「側欄」，

但就是完全動不了「留言區」，唯一的辦法就是要我們進入CSS裡修改。

 

這是《初心小格》在2013.12.26以前的留言區：

 

如果增加了行距，字體大小也放大至16px，大家覺得有沒有比較"蘇湖"呢？

 

 

A、留言訪客資訊的標題列

 

1.找到　.post-info　這一段語法。

 

2.我將背景圖，直接移除；留言年月日的字體大小從10px，微微放大至12px。其餘不動。

 

 

B、留言標題列的流水號碼

 

1.找到　.post-photo .floor　這一段語法。

2.流水號碼的位置、顏色與字體，請按照下圖語法所述，隨興調整。

  

 

 

 

C、每一個留言區的背景顏色

 

1.找到　.single-post　這一段語法。

2.每一個留言區塊，包括了訪客留言區+版主回覆留言區。

3.我們可以隨意調整　background　背景圖的顏色，例如：我設成綠色#CCFFCC。

 

 

D、「訪客留言區」與「版主回覆區」

 

1.找到　.post-text　.reply-text　這兩段語法。

2.可以適度的調整　font-size　字型大小。

3.可以改變字體和背景圖的顏色。

4.本來我的版型沒有　line-height　，這次給它加進去，使行距增加，易於閱讀。

 

 

E、悄悄話

 

1.找到　.single-post .secret　這一段語法。

 

2.可以修改悄悄話的區塊背景顏色(例如：我設成綠色#CCFFCC)。

3.可以修改「悄悄話」這三個字的字體大小與顏色(例如：我設成藍色#330066)。

 

 

 

F、訪客留言者的頭像 

 

(感謝格友小無的指導) 

1.要調整訪客留言者頭像的尺寸大小，請找到　.post-photo　img　這一段語法。 

 

2.請在這段語法內，增列　width　與　height　這兩句語法。

 

3.若把　width　與　height　設定成50px，這樣是否ok呢？　大家就開心調整吧！

 

三、結語

 

我有幾點小提醒：

1.小白鯨這篇文章，只是初學CSS的習作記錄，應該有不少謬誤之處，請大家審慎參酌。

2.想要開始嘗試修改之前，請先把原始的CSS語法，複製貼在Word檔或是記事本。

3.每一次的修改，都是一場緊張刺激的冒險之旅，因為不知道效果會如何。

　修改前，請記住要儲存原本的語法；修改後，可按「預覽」觀察看看有沒有比較好。

　不過，有關「留言區」的修改，在預覽情況下，無法見到。

4.密密麻麻的CSS語法，總讓我們滑鼠滾上滾下滾呆掉！

　請善用Word或是記事本的【編輯/尋找】，快速找到你想要修改的地方。

5.能做多少就做多少，能改多少就改多少，讓我們快樂的享受每一個改變的過程與成果。

6.還有許多CSS標籤及語法，小白鯨也是一知半解，歡迎大家來討論，一起求進步唷！

 

最後......

 

 

我做到了！我居然利用這兩天假期，生出這篇文章了！

請容許我為自己小歡呼一下！YA！～　我這個CSS菜鳥，居然也可以…………

 

 

或許是班門弄斧，或許是野人獻曝，更或許是錯誤百出！

而這也是我鼓起勇氣發表這篇CSS習作的原因，我懇切需要高手們能不吝給我指正。

 

2012年，我自學攝影，初心者的熱血，讓我在blog嘗試寫了幾篇有關攝影的粗淺文章；

2013年，我自學CSS，雖然還是懵懂，我已驚喜自己有能力、有勇氣可以分享些什麼。

正因我是攝影初學者，我是CSS初學者，我更能將心比心，體悟大家的徬徨與需要。

 

歲末年終之際，能夠有自我學習的能力，能夠擁有與大家分享的能力，是小白鯨的小確幸～

呵呵～祝大家新年快樂～

 

 

 

文章標籤
全站熱搜
創作者介紹
創作者 小白鯨 的頭像
小白鯨

初心小格

小白鯨 發表在 痞客邦 留言(242) 人氣(43,442)