06.jpg

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

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

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

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

 

25

 

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

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

59.jpg

 

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

07.jpg

 

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

00.jpg

 

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

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

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

00

 

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

 

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

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

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

 

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

01.jpg  

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

有幾篇文章標題的句尾,被吃掉了!

 

哈!這確實只是微不足道的小疙瘩,

可以忽略漠視。

 

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

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

 

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

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

失敗了幾次,

終於讓被吃掉的句尾,亮相囉!

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

 

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

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

真的很爽!309

 

02.jpg  

 

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

 

即使我有了上述微不足道的小成功,可是,我對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 搜尋)

09.jpg

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

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

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

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

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

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

08.jpg

 

 

(二)、文章區塊(content)

 

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

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

10.jpg

 

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

 

A、內文文字行距

 

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

11.jpg

 

2.找到 line-height 。

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

12.jpg

 

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

13.jpg     14.jpg
 

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

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

 

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

 

 

B、內文與邊界的距離

 

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

16.jpg  

 

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

17.jpg    18.jpg
 

 

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

19.jpg

 

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

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

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

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

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

22.jpg

 

6.嘿嘿~我們再來惡搞一下吧:

20.jpg    21.jpg  

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

右圖:「margin 15px 0 0 30px;」→上邊界15,右邊界和下邊界0,左邊界30px,

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

大家多玩幾次,便能找出讓你滿意的黃金比例!80

 

 

C、內文段落間的距離

 

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

23.jpg

 

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

1.找到 .article-content p

26.jpg

 

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

25.jpg

 

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

24.jpg

 

 

D、文章標題列

 

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

10.jpg

 

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

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

29.jpg

 

2.認識 width 的作用:

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

31.jpg

 

如果將 width 調整成300px,又會怎麼樣呢?

32.jpg

 

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

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

30.jpg

 

3.認識 font-size 的作用:

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

28.jpg  

 

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

27.jpg   

 

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

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

33.jpg    34.jpg  

 

4.調整 month date

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

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

35.jpg    36.jpg  

 

 

(三)、側欄(links)

 

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

05.jpg

 

 

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

 

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

46.jpg

 

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

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

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

47.jpg

 

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

3.標題字體大小:隨你意,調整大小。

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

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

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

48.jpg

 

 

B、側欄寬度

 

首先,我們要建立一個清楚的觀念:

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

 

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

37.jpg  

 

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

38.jpg  

 

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

40.jpg

 

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

有幾篇文章標題的句尾,被吃掉了!

01.jpg

 

我單純以為:

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

41.jpg

 

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

42.jpg

 

這究竟是怎麼一回事?

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

39.jpg

 

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

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

43.jpg

 

 

C、側欄的文字欄位寬度

 

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

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

44.jpg

 

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

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

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

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

45.jpg

 

 

D、側欄的文字連結顏色

  

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

01.gif  

 

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

02.gif  

 

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

03.gif  

 

 

E、三欄式的側欄寬度

 

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

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

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

 

 

(四)、留言區

 

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

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

 

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

50.jpg

 

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

51.jpg  

 

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

 

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

53.jpg

 

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

52.jpg

 

 

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

 

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

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

54.jpg   

 

 

 

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

 

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

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

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

55.jpg

 

 

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

 

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

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

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

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

56.jpg

 

 

E、悄悄話

 

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

49.jpg

 

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

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

57.jpg

 

 

 

F、訪客留言者的頭像 

 

(感謝格友小無的指導) 

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

58.jpg

 

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

60.jpg

 

3.若把 width  height 設定成50px,這樣是否ok呢? 大家就開心調整吧!

61.jpg

 

三、結語

 

我有幾點小提醒:

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

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

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

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

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

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

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

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

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

 

最後......

 

 

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

請容許我為自己小歡呼一下!YA!~ 我這個CSS菜鳥,居然也可以…………356

 

 

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

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

 

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

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

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

 

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

呵呵~祝大家新年快樂~359

 

 

 

    小白鯨 發表在 痞客邦 留言(211) 人氣()