《初心小格》文章精選:

 

z99064.jpg  z73.jpg  z76.jpg  

 

z66.jpg  z77.jpg  z04.jpg  

 

z81.jpg  z99145.png  z80.jpg  

 

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

 

 

 

文章標籤
創作者介紹

初心小格

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


留言列表 (205)

發表留言
  • sun
  • 小白 鯨偷跑,被抓到了~~~==

  • 什麼?我這樣偷跑,還是被大象抓個正著?嗚嗚~~

    以後,我要凌晨三點發文,看妳怎麼抓!嘿嘿嘿~

    小白鯨 於 2013/12/30 10:58 回覆

  • sun
  • 我看到這麼多程式碼,
    都會自動放空進入呆滯狀態,
    小白鯨居然可以把這些語法搞懂,
    太厲害了啦!

    一開始用痞客的時候,
    因為本阿Sun以前作過網頁,
    覺得css應該是小事一樁,
    就很「假會」的進去改,
    沒想到其實網頁軟體的css跟部落格內建的css使用邏輯根本是兩回事,
    搞得我頭都快炸開 了,後來直接放棄,
    小白鯨居然這麼有耐性的把它搞懂,
    除了讚之外,我還能說什麼呢~~~^^b

  • 以前做過網頁的阿sun,怎麼可以進入呆滯狀態?
    快醒醒~~快醒醒~~不然我就拿一桶冰水,潑妳喔^^v


    攝影,對我來說,很簡單,也很困難。
    如果只是傻瓜按按快門,我拍得不漂亮,但是拍得很快樂。
    去年學攝影後,越鑽進去,越覺得攝影是一門博大精深的學問,學也學不完。

    可是,面對這個CSS語法,我完全沒轍!過去的舊經驗,完全派不上用場。
    妳至少還有用過CSS編修網頁的經驗,我卻只懂得HTML基礎語法,唉~~
    明明有些英文單字還看得懂,
    可是,那一堆標籤?語法?宣告?天啊~~早就把小白鯨的小笨腦,爆過不知多少次哪!

    要不是前幾天,已經凍未條了,下定決心把它搞懂,才生出這篇文章吧。


    阿sun~~新年快樂!真的很開心能夠認識妳這位攝影才女以及妳的真面目!哈!
    妳讓小白鯨的部落格生活,有了許多璀璨光彩呢!謝謝妳喔~
    ^_^

    說著說著,不禁讓我懷念那位小如麻豆了,嗚嗚嗚~~~她飛走了,掰掰~~
    ^+++^

    小白鯨 於 2013/12/30 11:07 回覆

  • 小馬達
  • 好專業
    看得我眼好花花
    自動跳過裝呆(本來就呆)
    看小白鯨寫的好專業
    我看的好迷網
    要是我照著小白鯨的說法去做應該還是會被我弄得一團糟啊
    我可以請你吃飯
    你來幫我用嗎
    XDD
    女人的腦子容不下一點程市問題啊(指的是我)

    推推

  • 好啊!妳以為裝呆,就可以把小白鯨拐出門,想要跟小白鯨吃飯?

    哼!小白鯨雖然不怎麼聰明,但也不傻!
    妳嘴裡說是要請我弄一弄,
    暗地裡,早就和老爺處心積慮的要把小白鯨拖去魚市場秤斤論兩!對不對?

    我才不會上當呢!小馬達!!!

    小白鯨 於 2013/12/30 11:10 回覆

  • lulu咪
  • 看來痞客該頒個獎給你了

    會不會太認真啦(但還是很感謝唷)

    新年心想事成~平安快樂^^

  • 那該頒個什麼獎給小白鯨呢?妳說說~妳說說~我好期待唷^^

    這都是天氣惹的禍!
    天氣冷吱吱,不敢出門透風哈啾哈啾,又不敢吃吃喝喝變肥肥,所以才會這樣這樣,哈!

    新年快樂~~lulu咪~~抱~~~~

    小白鯨 於 2013/12/30 11:13 回覆

  • 盈盈

  • 語法這麼多,很用心的整理喔~推

    2014 新年快樂 平安如意 ^^

  • 那,盈盈有沒有看懂啦?小白鯨好緊張喔~~

    嘻嘻^^

    小白鯨 於 2013/12/30 11:13 回覆

  • Ivy
  • 你就是這麼貼心,
    原想找時間問你版面怎麼變漂亮,
    想不到你就寫出教導篇,
    真是太讚了!

  • 這版面,也是一點一滴,偶爾想玩玩就玩玩。

    能夠讓妳覺得漂亮,小白鯨開心轉圈圈呢!^^v

    如果有我任何可以出出主意的地方,Ivy可別客氣喔!

    小白鯨 於 2013/12/30 11:15 回覆

  • 吳子希
  • 當初在無名常駐的原因,就是用習慣它的css,換來這裡發覺,雖然同樣是css,但兩者還是有差別,害我用了點時間搞懂它XD

    小白鯨超認真、超仔細的教學,Good:)

  • 啊?原來無名的CSS,和痞客邦的CSS,還有不同呀?
    我以為CSS語法,不是應該同理走遍天下嗎?

    你常駐無名許多年,對CSS應該很熟稔,
    可以拜託你嗎?幫我檢查這篇文章,有沒有錯誤的地方?

    拜託~~拜託~~Orz

    小白鯨 於 2013/12/30 11:19 回覆

  • YSL
  • 這不是禮拜三!這不是禮拜三! 這不是禮拜三啦.........
    小白鯨你這樣偷跑令人髮指啦

    不過念在你這篇對全人類有偉大的貢獻
    還是不跟你計較了
    一直以還就覺得你的版面設計好棒
    先放著, 有空再來好好拜讀一下這篇大作
    謝謝!

  • 喔~~No!我不要髮指!
    小白鯨就已經沒有頭髮了,妳這位大嬸兒就行行好,別指我!別指我!

    您也不想想:這禮拜三,是啥日子呀?可是舉國歡騰的元旦!
    禮拜三,誰還要發文、看文?當然是要去包粽子、划龍船啊!


    對全人類有偉大的貢獻?喔~~No!!!
    小白鯨的肉肉不好吃,澀澀老老的,不好咬。
    我才不要犧牲自己青春的肉體,對你們人類有啥偉大的貢獻!(逃~~~

    小白鯨 於 2013/12/30 15:26 回覆

  • 盈盈
  • 老實說~ 語法我僅有youtube的影片上傳
    還有一次在格友介紹去掉側欄廣告的方法上用過

    你的步驟有秀出來,其實看的懂啦 ^^
    日後有哪個項目要修改的話,會來看你這篇喔


  • 聽盈盈這麼說,小白鯨就放心了。

    以後,有小白鯨需要使力的地方,甭客氣~^^v

    小白鯨 於 2013/12/30 15:27 回覆

  • C &amp; J
  • 正看文章看的起勁…
    U know… 看這種內容要很專心才看得懂…
    突然被小J 自已的頭像嚇了一大跳… 冏!

    想說怎麼會出現小J 的頭像…
    難道是小J 得罪了小白鯨,正被小白鯨公諸於世懲罰…
    厚… 小J 的細胞因此死掉了好多啦… 真是的!

    雖是如此,小J 還是不得不誇讚一下…
    小白鯨真是厲害,竟然可以自己研究出這麼多…
    這CCS語法真的好複雜,小J 每次為了更改一個小地方…
    就要上網查資料查很久,然後也得研究好久才看得懂…
    可是只要一改過後沒幾天,就全都忘光光了呀… @ @

  • 哈哈哈!妳會不會在半夜起床時,見到鏡中的妳,也突然被嚇了一跳呢?

    哪有這款事啊!被自己的頭像嚇一跳?
    妳唷~~一定是這些年來,總是欺負小白鯨,虧心事做太多,才會這般心虛,哼!^^

    C 哥啊!您要評評理!
    小白鯨對您景仰已久,卻被這個小J從中作梗,硬是不讓我們相會,嗚嗚~


    雖是如此,小白鯨還是不得不誇讚一下......
    小J真是賢淑得體,每天讓C哥龍心大悅,事業有成,幸福美滿呢!


    看在賢伉儷鶼鰈情深的份兒上,小J要是日後又要研究好久的時候,就來call 小白鯨!
    我會竭盡所能的幫妳!
    只要能讓小J 開心,我的C哥就會幸福^^v

    小白鯨 於 2013/12/30 15:36 回覆

  • 歐~凱倫
  • 小白鯨你是我們的"鯨神領袖…連我們搞不搞css你都知道…厲害

  • 嗚嗚~妳說的那位"鯨"神領袖,這幾天,發神"鯨"了!
    唉~~~~

    小白鯨 於 2013/12/30 15:38 回覆

  • 小風
  • 介紹的好詳細唷~感謝^^
    可以請問初心小格精選文章的語法嗎^^?

  • 《精選文章》,我放在

    部落格 »部落格管理 »側邊欄位設定 »側欄元件管理/內容欄/公告區塊

    小白鯨 於 2013/12/30 20:44 回覆

  • 小司麥@u@&quot;
  • 給小白鯨一百個讚
    真的幫許多人
    上了寶貴的一課喔!!

  • 我可不可以把小司麥這一百個讚,拿去小七,換一百個關東煮?

    天氣好冷喔~~~想吃吃吃~~~~
    ^o^

    小白鯨 於 2013/12/30 15:40 回覆

  • 阿玲
  • 要改稱呼你小白鯨老師了~這一篇實在太用心了,寫得好仔細喔~
    痞客邦應該要買你這一篇當教材了~哈~哈~

    這些ccs真的讓我們看了望之卻步,不過透過你這樣解說,我好像也半知半懂~
    我最想問的是:如何像你那樣在圖片側邊,可以放入文章在中間呢~(一般設定只在最下列~)
    請教教我吧小白鯨老師~

  • 真的嗎?可以賣了嗎?那我可以請妳當我的經紀人嗎?
    妳一定要幫我賣個好價錢喔,至少能讓我明年秋天也去日本賞楓^^v


    阿玲是不是想問我:文章裡,圖片如何擺左或擺右嗎?

    我們在後台打文章的工作區,上頭有好幾行工具列。
    其中有一個選項:[插入新表格]。點進去後,會看到[欄]、[列]。
    依據妳想要的排版,就可以隨心所欲的插入照片或打字了。

    照片要依據妳的版型寬度,適當縮小喔!

    小白鯨 於 2013/12/30 15:49 回覆

  • PupU
  • 我部落格是土法煉鋼弄出來的!!!哈哈
    改過一次又都忘光光了!!!
    小白鯨的CSS懶人包...收下了:D

  • 哇!神力女超人!土法煉鋼,那才威呢!

    教教我~~我想學!如何可以煉成鋼?^^

    小白鯨 於 2013/12/30 15:50 回覆

  • gemmylin
  • 真的太厲害了!!!小白鯨~好有研究精神喔!!
    非~~~常的佩服啊!感謝分享~真的是很不簡單啊!
    挑戰成功耶!
    新年快樂喔~小白鯨!

  • 呵呵~~這篇文章的研究精神,和妳精湛絕妙的廚藝點心相比,只是小巫見大巫,嘻嘻^^

    好久不見,妳那兒冷嗎?台灣真的冷了,不過,心兒可不能冷^^

    小白鯨 於 2013/12/30 15:53 回覆

  • ♥166&amp;jimmy地圖
  • 挖~~
    小白鯨你好 "大心" 唷
    太開心了~
    你更本就是送新年禮物給我了嘛~~
    (轉圈)
    晚點來修修我的版面
    2014來換新衣!! 耶

  • 呵呵!我不僅要送新年禮物,更要送新婚禮物給妳唷!

    來~~小傻~忍一下就過了!
    妳把眼睛輕輕閉起來,小白鯨輕輕的...輕輕的...親一下新娘子!啵~^3^

    唉唷~~好害羞喔!親到了~親到了!
    (換小白鯨開心轉圈兒~~~~)

    小白鯨 於 2013/12/30 15:57 回覆

  • 文哲
  • 小白鯨太棒了! 好認真的研究及經營

    你一定會成為痞克第一的

    不過上面的解釋我是有看沒有懂.XD

    你要南下來敎我啦!

  • 謝謝大哥美言,小白鯨謝謝您啦~

    不過,從未想過第一或什麼的。

    或許來到部落格,讓我學習成長許多,也讓我懂得[分享]。
    能夠有機會讓我把成長些許心得,與大家分享,是小白鯨的榮幸^^

    小白鯨 於 2013/12/30 15:59 回覆

  • Cindy
  • 話說..小白鯨好久沒游來我家晃晃...
    原來...原來都是在研究這個有如天書的CSS語法啊!!!

    我對這種東西也是一看到就頭暈眼花...
    所以很多細節都得過且過...
    小白鯨這篇一定很可幫助很多人耶!!

    我...我...我還是..默默的套用痞客的面版了....
    CSS對我來說..還是好像天書啊!!

    小白鯨真的好有研究精神~~還寫的那麼仔細跟大家分享!!


  • 哼!妳還好意思說!是妳好久沒來了!
    小白鯨還以為妳眼裡只有小黑,不要小白了啦!
    嗚嗚嗚~~嗚嗚嗚~~~

    哈~咱們就握手言和吧^^

    這段時日,偶爾爬文碰觸CSS語法,總是碰了一鼻子灰!
    挫折感好沉重,但又覺得不能這樣下去。
    因此,綁上頭巾,發憤圖強,決心報效國家,這樣才能世界大同。

    (唉~~~小白鯨一定是研究這個什麼CSS的,精神狀況似乎怪怪的@@)

    小白鯨 於 2013/12/30 16:04 回覆

  • KK
  • 我的部落格有救了,
    最近版面跑來跑去,
    有了這帖救命丹~~~~搞定,謝啦!小白鯨

  • 太好了!謝謝你!好想立刻鑽進電腦螢幕,拉著你又叫又跳!

    能夠及時幫上你,小白鯨超開心^^v

    小白鯨 於 2013/12/30 16:05 回覆

  • Jackie &amp; Leucy
  • 推推~
    謝謝小白鯨分享和細細說明

    祝你 新年快樂

  • 謝謝妳的祝福,大家要繼續幸福喔^^

    小白鯨 於 2013/12/30 17:42 回覆

  • angeline
  • 哇~~老闆這兩天冷冷沒出門
    果然交出來一篇有模有樣的好文!!
    話說以前上課時老師教ccs語法,我都沒興趣聽
    所以之前來到痞客後台也是搞得灰頭土臉呀@@"
    (不過我至少有把刊頭上的照片給換成功...呵呵)
    現在鯨老闆生出這篇文剛好又讓我惡補!!
    但我看了看還是有點頭昏昏
    不知道以後格子如果想挑戰改造..

    可不可以..
    直接請鯨老闆出手就好~~~

    最後祝福鯨老闆一家人新年快樂喔!!!!

  • 蝦密?原來妳以前還有學過CSS?

    不過,換做是那時候的我,
    我也會沒興趣聽,因為根本不知道學了這個CSS,有啥用處?
    如今,是遇到了些小困難,讓我有動力想要認識它們。


    Dear小員工:
    不要惡補,不要頭昏昏,妳已經很棒了!
    會把刊頭成功換成讓我懷念的迪士尼,這麼讚的小員工,哪裡找得到啊!^^b

    以後,需要鯨老闆出手的地方,小員工不用客氣!
    儘管放馬、放牛、放雙寶過來!!!

    我也要祝福小員工一家五口感情永遠黏答答,永遠愛來愛去不分離^^v


    小白鯨 於 2013/12/30 17:50 回覆

  • piecece
  • 皮斯實在太佩服小白鯨了!!
    小白鯨真的很用心,認真研究而且寫得很詳細耶~~
    不像皮斯看到一堆程式語言就謝謝再聯絡((冏))....
    請接受皮斯一拜~真的太強大了~~~
    ps先祝親愛的白鯨兒新年快樂唷:)

  • 哇哇!皮斯大美女跟小白鯨說好多話喔!
    小白鯨驚喜萬分!開心~開心~YA!^^v


    如果不曾來部落格,
    小白鯨不會那麼認真學習攝影,不會那麼用心學習CSS,更不會遇到這麼棒的皮斯^^
    真的好謝謝老天爺的安排,讓小白鯨可以這般精采走過blog~~~
    ^_^


    小白鯨也要祝福親愛的皮斯大美女:新年黑皮!天天都很黑皮的皮斯!

    ps:以後,我可以喚妳「黑皮斯」嗎?聽起來應該比「皮老媽」好聽多了,哈哈哈!

    小白鯨 於 2013/12/30 20:51 回覆

  • 吳子希
  • 所以剛到這裡的時候,有點嚇到了這樣。
    我是不知道哪裡不一樣啦,但有些無名可以用的,痞克邦不行~

    我覺得小白鯨的教學超清楚的啊,而且我也有照著做,沒有問題唷:)
    總覺得不用多久,小白鯨就可以出師了XDDD

  • 痞客邦是小白鯨第一個blog的家,
    我從不認為有一天我會有自己的blog,甚至還會研究啥CSS@@


    真的?你今天就有照著做?喔~~YA!
    快!快!快告訴我,你今天嘗試做了什麼改變?
    小白鯨好想分享你的改變與快樂唷^^

    小白鯨 於 2013/12/30 20:55 回覆

  • 塔咪
  • 鯨老師~您這實在是太佛心啦~
    這CCS語法教學也太實用強大啦!!!
    找時間也來try一try^^
    (不如找時間趕緊把欠了許久郵寄趕緊寫一寫>///<)

  • 嘿嘿嘿!小白鯨最善良了啦!
    其實呢,塔咪老木只要把什麼雪球啦,草莓啦,百香果啦,乖乖的獻給小白鯨,
    我一定會盡力的幫妳搞定!

    怎麼樣?我超善良的吧?^^v

    小白鯨 於 2013/12/30 20:57 回覆

  • Leo
  • 小白鯨真的十分有研究精神啊,讚!

  • 天氣十分寒冷,小白鯨十分抓狂,哈!

    小白鯨 於 2013/12/30 20:58 回覆

  • 莎莉
  • 哇~妳好熱心耶!
    講解真詳細.還一一附圖.

    初到痞客時有許多格友發文指導,自己又在圖書館借一本CSS語法的書,
    就胡亂給它改了. 只改二個部位,留言及回覆字大小,側欄字大小.
    最近經一位格友熱心協助,才又改了留言回覆列高及字元間距.

    目前最困擾的是打留言時,這區的字太小.
    後台回覆區字也太小.

  • 呵呵~太棒了!原來妳也曾經摸索嘗試這個CSS,還曾經借書呀!
    小白鯨興奮的要跟莎莉握握手~~~~


    難怪上回到妳的格子,妳的留言區風格,清新宜人!

    打留言的區?後台回覆區?妳知道標籤嗎?我也好想來玩玩看唷^^

    字元間距的標籤是哪個?

    小白鯨 於 2013/12/30 21:03 回覆

  • 莎莉
  • 請參考這個網站
    http://www.1keydata.com/css-tutorial/tw/
    我也是看這裏.
    還沒找到打留言,及後台回覆的語法.
    不同樣式有差別,妳說的和我的不完全一樣.
    所以先把CSS語法認識.選哪個樣式都懂.

  • 妳推薦的這個網站,我許久以前爬文時,曾經恰巧點進瞧瞧呢!
    當時,我完全進不了狀況,就默默離開……
    如今我又可以好好的來挖寶囉!謝謝妳~


    那兩個地方的語法,以後我會多注意,
    到時候,咱們再互相報馬仔唷^^

    小白鯨 於 2013/12/30 21:20 回覆

  • 莎莉
  • ltter-spacing.....字元間距

  • 莎莉:
    妳可以再幫我把這篇文章看一遍嗎?

    請妳幫我抓錯,才不會害到朋友@@

    小白鯨 於 2013/12/30 21:23 回覆

  • 莎莉
  • 對不起,打錯字
    letter-spacing

  • 剛才立刻在我的版型語法搜尋,沒有letter-spacing 呀!

    不過,我目前的文章區和留言區的字元間距似乎還ok,
    就放過letter-spacing吧!哈!

    小白鯨 於 2013/12/30 21:27 回覆

  • Yvonne
  • 雖然我是位文盲等級的電腦使用者..可還是對小白鯨詳盡介紹這禧ㄟ斯ㄟ斯是吧很有興趣!
    可我還是看不懂捏><"
    等我去換副老花眼鏡在重新拜讀小白鯨這篇文^^
    可以推10次這篇文嗎^^

  • 呵呵~能夠讓妳產生興趣,小白鯨好開心!

    為了鼓勵妳,為了替妳加油打氣,如果有一天,妳能夠看得比較懂了,
    我就請妳吃上等的鯨肉沙西米!!!

    等妳喔~~~~
    ^_^

    小白鯨 於 2013/12/30 22:51 回覆

  • Sherry
  • 平常都好羨慕可以放大圖的朋友...
    謝謝小白鯨捏~~
    是說我們可以修改總寬度嗎?

  • 總寬度,應該是沒法兒修改,
    我們只能在總寬度給的數值,這邊加加,那邊減減@@

    放大圖,妳是指??

    小白鯨 於 2013/12/30 22:52 回覆

  • 莎莉
  • 我的樣式也沒有字元間距和列高,自己加上.

    由於版本不同,真的不一樣.
    例如妳在意的側欄文章標題被吃掉,我的會自動到下一列.

    另外留言和回覆背景色,預設都是無. 而自動顯現大底色.(兩側露出的色)

    主文區設太大的...會有幾字跑到下一列,我的也不會.在WORD打字時不按Enter它就會自動連續, 太長也會下來. 按Enter表示另一段不管長短都到下一列.

    我剛才在自己的CSS裏找到迴響輸入區,但無文字的相關語法.
    改天再研究了.晚安!

  • 呵呵~原來如此!字元間距,是妳自己加上去的呀!

    找到了!找到迴響輸入區,太好了!期待妳的研究成果唷!

    今天真是開心~能夠與妳這般討論著^^

    小白鯨 於 2013/12/30 22:56 回覆

  • 皮皮君
  • 想當初皮皮君也是自己胡搞蝦搞
    試出一個還可以接受的版面
    就沒勇氣再變動它和研究它
    但常常有格友問我怎麼改版面
    說實話,皮皮君對CSS語法完全外行
    無法回答格友的提問,一直很內疚
    真佩服小白鯨那麼有研究的精神
    把CSS解釋得那麼詳盡
    皮皮君給你100個讚加一個愛的抱抱
    並祝小白鯨2014新年快樂~ XD

  • 我一直以為對CSS外行的人只有小白鯨耶,
    今天才知道:原來大家都很有障礙,唉唉~
    不知道為什麼要弄得那麼複雜呢?難道就不能更簡單易懂?


    謝謝皮皮君的100個讚!
    可是,我更哈你的…愛的抱抱!
    喔~~~來抱!快來抱!抱緊點兒!快把皮皮君的溫度,傳給小白鯨~~~

    (小白鯨本來不是這樣的,一定是認識壞壞的皮皮君,才變皮的XD)

    小白鯨 於 2013/12/30 23:34 回覆

  • 蝦蝦
  • 小白鯨真是我們的王
    之前我為了改css後台還熬夜了 因為沒成功很美送 = =

    新年快樂!!

  • 這兩天,蝦蝦也來改改,你一定會成功^^b

    小白鯨 於 2013/12/31 16:04 回覆

  • ✬語の花禮^‿^
  • 鯨老師~好詳細的解說,謝謝喔~(。^‿^。)
    祝您元旦愉快 吉祥如意喔~ღ(◕‿◠) ღ¸.•✿◊•*""*•.☆♫ ♪★

  • 呵呵~~你留言的那串煙火,是怎麼弄的呀?

    教教我~~教教我~~~

    小白鯨 於 2013/12/31 16:14 回覆

  • 糊塗宅媽
  • 哇, 怎麼這麼巧!!
    早上想新的一年要換換版面, 用自己拍的照片, 結果一頭霧水放棄了.
    然後發現小白鯨師傅的這篇實在太好了. 感恩.
    新年快樂.


  • 哈哈!妳是不是想說:心有靈犀一點通?

    雖然天南地北如此遙遠,都無法阻擋我們心意相通呢!

    等妳換新版面成功時,要邀請小白鯨去新家坐坐喔^^

    小白鯨 於 2013/12/31 16:06 回覆

  • Evie
  • 我真的要稱呼小白鯨為大師了~~~
    ㄧ直想更改留言板塊的顏色但無從下手,
    現在整個豁然開朗~~~
    你根本是全能的嘛!!!!
    也預祝小白鯨大師2014新年快樂囉

  • 留言板塊的顏色,還真得從那個討厭的CSS語法下手@@

    小小一個改變,來年會快樂幸福一整年!哈哈!

    小白鯨 於 2013/12/31 16:07 回覆

  • 悄悄話
  • 悄悄話
  • 悄悄話
  • 曉芬
  • 非常實用的篇文
    對我這種啥都不懂的人
    真的是超級實用的
    感謝小白鯨的不藏私分享
    有時間時在來好好研究

  • 曉芬:謝謝妳的肯定。

    這東東,一定要慢慢來。不要急喔~

    有啥我可以幫忙的,妳儘管吩咐!^^

    小白鯨 於 2013/12/31 16:12 回覆

  • 搗蛋鬼小艾琳
  • 艾琳推推 (39)
    超級實用的啦,謝謝你的仔細分享啦~~

  • 有空的時候,妳也要把CSS給它小搗蛋喔!

    小白鯨 於 2013/12/31 16:13 回覆

  • 搗蛋鬼小艾琳
  • 我之前就有小搗蛋過,我把寬度加寬、還拿掉了背景,哈哈~~

  • 蝦密?這哪是小搗蛋?
    這根本就是大搗蛋!搗大蛋了啦!

    小白鯨 於 2013/12/31 16:22 回覆

  • 克里斯汀的大聲公

  • 謝謝小白鯨~~這篇超仔細~我之前有為我的格子換了一下版面,只是真的是ccs的"不懂者"很多都還是搞不定~我也要找個時間~研究一下^^
    另外~小白鯨呀~~我想學你那個右側欄位,點選圖文就可以文章連結的方法啦~是與法嗎?
    可以敎我嗎~(pls~~~~^0^)

  • 小白鯨快遞公司,立刻游去妳家^^

    小白鯨 於 2014/01/01 16:44 回覆

  • 筠心
  • 2014 年

    祝大家新年快樂

    馬年大吉

    馬年財順

    馬年行大運

    駿馬奔騰來報喜,萬事順新又如意,家家戶戶平安又開喜!

  • 謝謝你帶給小白鯨這麼溫暖的祝福喔^^

    小白鯨 於 2014/01/01 16:56 回覆

  • 藍色起士
  • 天阿~我也不懂
    真的要好好的來研究一下了@@

  • 如果有遇到不瞭的地方,儘管問小白鯨就對了^^

    小白鯨 於 2014/01/01 16:58 回覆

  • apple mary
  • 不會吧...你又偷跑了@@"

  • 小白鯨沒有腳,不會跑,我都是偷游^^v

    小白鯨 於 2014/01/01 19:42 回覆

  • apple mary
  • 好想哭哦.你偷跑啦..明明今天有看你Y....沒有發文...為何會這樣啦

    重點....還是要祝你新年快樂.. 一切順心如意..心想事成喲
    這篇好實用哦~有空時...再來好好研究 一番囉~
    謝謝分享
    ^^

  • 妳什麼時候有空?妳可忙得很!
    又是吃吃喝喝,又是到處瞎拼,還要上瑜珈,學鋼琴呢!
    哈哈~

    小白鯨 於 2014/01/01 19:50 回覆

  • KK
  • 這技巧我受惠了,來此還願!!
    新年快樂啊!!!~~~~鯨魚兄

  • 嗚嗚~你怎麼可以說我鯨魚兇?

    我明明是很溫柔的?^^

    小白鯨 於 2014/01/01 19:53 回覆

  • 玫瑰小丸子
  • 超感動的哩

    不過我可以再厚臉皮一些嗎??
    我的帳密都給你 你幫我裝潢後在還我 可以嗎??
    人家有閱讀障礙啦XDDDD

  • 厚臉皮的玫瑰小姐您好:
    我是厚肚皮的小白鯨。

    我非常樂意收到您的帳密,不過,是否可以買一送一?
    順便將您的銀行帳密也給我?
    我幫您裝潢後,會一併還給您的!
    嘿嘿^^v

    小白鯨 於 2014/01/01 20:00 回覆

  • Gini
  • 我之前也是搞這個搞到頭很大!
    不過就先告一段落了...
    現在看到你這更細部的,說實在還真是有感動的~
    非常感謝! 改天再來看看我的還有哪裡可以改進的! XD

  • 妳給我老實說,是Q澤難搞?還是CSS難搞?@@

    咱們是麻吉了,無須客氣!如果覺得合用,妳儘管拿去試試!
    順便也把小白鯨拿去用吧^^v

    小白鯨 於 2014/01/01 20:10 回覆

  • 悄悄話
  • 肥布丁
  • 天啊,看到這篇真是太好了,謝謝小白鯨^^

  • 有適合妳的需要嗎?

    如果有適合的地方,那就更好了!呵呵~

    小白鯨 於 2014/01/01 20:21 回覆

  • 寶寶
  • 雖然天書在前,有看沒有懂,
    但仍然給小白拍拍手,豎起大拇指說讚!
    寶寶年幼,智商發育不全,
    頭好痛,等我長大吧!

  • 寶寶小姐妳好:
    我是小白鯨出版社,現在這裡有一本天書,想要請您試讀。
    不用寫書摘,不用寫格文,妳只需要讀完以後,能夠即時幫上妳的忙,
    本出版社就會覺得感激不盡了!

    小白鯨 於 2014/01/01 23:29 回覆

  • 悄悄話
  • 藍色憂鬱
  • 天氣冷熱不定,記得要加一件衣服,要好好保重身體,不要感冒了!

  • 有你的貼心關懷,小白鯨頭好壯壯,絕對不會感冒的!

    (哈啾~~~~~拍謝拍謝~

    小白鯨 於 2014/01/01 23:35 回覆

  • 阿撇
  • 推推,這真是佛心來著啊,小白鯨
    在這2014年開頭,你就讓我感動了啊啊啊,真是用心^^

  • 你可不可以把這樣開頭的感動,一直持續到年底?

    讓你每天都可以心暖呼呼的?哈!

    小白鯨 於 2014/01/01 23:46 回覆

  • 璇璇
  • 留個言吧 ...謝謝小白鯨,等我有空再來整頓一下
    祝你新年快樂,心想事成~^^

  • 老天爺疼惜小白鯨的痴痴盼望,終於盼到璇璇來留言了。

    2014有了這麼美好的開始,YA!!!^^v

    璇璇~~~好久不見!

    小白鯨 於 2014/01/02 14:29 回覆

  • yaya
  • 哇塞~小白鯨你太用功了!!!!給你一百個讚啦!!!!

    這篇我有用,
    YSL曾客訴我的留言版字體太小,
    客人再說,我們都有記在心上
    無奈實在不會改~哈哈

    現在沒藉口了,立馬來改,感恩阿~~

  • 什麼?是誰?是哪位?有人?有人居然敢說小白鯨的貴人yaya的閒話?
    她大概是不想看到2015年的曙光齁!

    我來去給她一點顏色!哼!

    小白鯨 於 2014/01/02 20:20 回覆

  • yaya
  • 改好了耶!!!!!!開心^^Y

  • 立刻去瞧~~~~

    小白鯨 於 2014/01/02 20:25 回覆

  • 梅子麻麻
  • 我一直都沒注意耶...
    也沒去修改,原來還有這麼多祕辛啊(搖搖頭~)

  • 沒注意,也很好啊,本來我們就該開心自在玩部落格嘛,哈!

    小白鯨 於 2014/01/02 21:08 回覆

  • 悄悄話
  • 悄悄話
  • 悄悄話
  • 棕櫚與太陽
  • 白鯨兄你真的太棒了吧!!有辦法寫出這麼淺顯易懂的入門文...
    而且你切進的角度真的很棒喔!!!
    哈!!以前玩奇摩時有瘋一陣子!!狂改語法要顯現自己的特色!!
    不過現在只要看起來舒服好用就好了....
    哈!!變懶惰蟲了...XDDDDDDD

  • 能夠得到你這位從奇摩搬來的老前輩的歐囉,
    小白鯨真的超開心的!

    正因為你也曾經狂改語法,更能體會小白鯨突然發瘋的原因了,哈!

    謝謝你囉^^v

    小白鯨 於 2014/01/06 00:03 回覆

  • kkschool
  • kk推~
    這篇真的是很實用呢,您寫得淺顯易懂,讓人一目瞭然呢O(∩_∩)O

  • 懂了嗎?懂了嗎?YA~~小白鯨開心開心!

    小白鯨 於 2014/01/06 14:39 回覆

  • 思思
  • 思推50
    找個時間~我也要來好好整修我的版面ㄌ
    這篇對我這個苦手~真的是有大大幫助哩~

  • 思思小美女有特權:有任何不瞭的地方,可以隨時CALL小白鯨^^v

    小白鯨 於 2014/01/06 14:51 回覆

  • ~雲。淡。風。輕~
  • 沒想到小白鯨居然偷跑啊?
    趁著我這一兩個禮拜沒有上來看看你居然就偷跑?
    現在網頁改的好美啊~ 還加上了 TOP 和 Home的可愛圖示? 這樣方便許多呢~
    不過真的很佩服你, 要介紹這些還得加入圖片, 真的很搞剛耶!
    之前我也會玩一些網頁語法...不過太久沒有碰實在真的都忘光光了~
    你這篇可以幫玫瑰小丸子之前想要更改留言字體顏色有幫助呢~
    沒想到難搞的CSS語法也被你征服了 .....讚!!*100
    我也要來搞搞我的網頁, 這樣子才有自己的特色咩XDDDD

    p.s 是說你一開始是選擇哪個版樣? 再去一一更改表頭的圖片和欄位的顏色呢?

  • 對吼!我現在才熊熊發現:小薇已經一兩個禮拜沒有上來了!
    唉呀呀~我的鯨腦袋一直停留在墾丁沙灘那位背影殺手的美好記憶啊……

    妳是出國玩?還是......


    哈哈!原來妳一開始也有嘗試網頁語法呀?
    這東西久久不碰,真的很快就忘光光@@

    如果難搞的CSS,都可以被小白鯨征服了,
    那麼,還有什麼不能征服的嗎?
    我決定了!2014年,小白鯨登玉山啦!!!

    (ㄟ?拍謝拍謝~~~打錯了,應該是「小白鯨登入玉山銀行啦」XDD)

    小薇也心動了嗎?YA~~~
    當妳開始要動手搞搞自己的特色,
    別忘了可以讓小白鯨湊個熱鬧,在妳旁邊喊燒、加油、幫忙唷!

    ps:我本來的版型是「紅色絲綢」^^

    小白鯨 於 2014/01/06 23:36 回覆

  • 盈盈
  • 想請問小白鯨,我改了版面樣式後側欄廣告又跑出來
    links中margin-top 寫入數字後往上拉,在上個樣式中
    我成功去掉廣告欄位,可是這次卻無效怎會如此呢?
    你有其他方式教教我嗎

  • 當我們換了版型,那個廣告就會跑回來。

    我現在去妳家瞧瞧^^

    小白鯨 於 2014/01/07 14:05 回覆

  • saliha
  • 實用推!
    之前我為了微調我的部落格,也研究了好久,
    但調完又忘記了XDDD
    小白鯨好貼心喔

  • 大家好像都會摸很久,研究很久,然後又忘掉很久了,哈哈!

    我才要逼自己趕快發這篇文章,把這幾天調整的過程記錄下來,不然的話,我很快就會忘光光@@

    小白鯨 於 2014/01/07 19:30 回覆

  • Evie
  • 師傅~~~我成功更改留言回覆顏色了!!!!
    請受徒兒ㄧ拜~~~~

  • 免禮~免禮!

    小白鯨看到了!看到了!
    雖然只是小小的改變,那可是大大的成就,對吧?^^b

    小白鯨 於 2014/01/19 16:14 回覆

  • 人類
  • 真是太實用了!!!

  • 有修改成功嗎?^^

    小白鯨 於 2014/01/24 19:54 回覆

  • 悄悄話
  • 悄悄話
  • 悄悄話
  • 悄悄話
  • 悄悄話
  • junhua
  • 不能複製語法!
    現在廣告跑到在左欄下方?
    請問該修改哪裡?
    感恩

  • 1.進到管理後台。
    2.部落格»部落格管理»側邊欄位設定»側欄元件管理
    3.右邊有[新增版位],新增。
    4.把語法貼上。
    5.將此欄位,移至[側欄1]
    6.儲存版面。

    請再試試看。^^

    小白鯨 於 2014/02/12 11:07 回覆

  • 文旦小姐林淑芬
  • 謝謝你的教學,獲益良多喔~~

  • 能夠有機會幫助到你,是我的榮幸^^

    小白鯨 於 2014/02/13 19:39 回覆

  • junhua
  • 剛用把不要的拖到右欄刪除,可以了,感謝妳

  • 太棒了!恭喜你如願解決啦^^

    小白鯨 於 2014/02/13 19:46 回覆

  • junhua
  • 又來問了!

    刊頭下面的4個英文選項該如何刪除或修改成中文?
    arhua56.pixnet.net/blog
    還有你部落格首頁刊頭下的<初心小格>文章精選,要怎麼設定成像你一樣的6格樣式?
    我覺得這樣排版很棒......

  • 那四個英文選項,我不知該如何修改成中文。

    文章精選,設定過程有些複雜,我無法利用留言方式,與你細說分明XD

    小白鯨 於 2014/02/14 23:48 回覆

  • 悄悄話
  • 偽日人歪嘴May
  • 謝謝你
    想請教如何用圖片做成連結
    就像你網誌上面那六個圖片....
    如果有時間的話 請麻煩你再回覆了。謝謝

  • 先請問妳:了解Html語法嗎?

    如果妳不明瞭Html語法,我就無法與妳詳細說清楚了@@

    小白鯨 於 2014/03/08 16:47 回覆

  • 悄悄話
  • 悄悄話
  • 悄悄話
  • 悄悄話
  • 悄悄話
  • 琳達go
  • 這文章太棒了! 讓我這個新手也能照著步驟修改自己的blog:)拭淚~

  • 呵呵~很開心能夠與琳達分享小小心得,
    有任何問題,歡迎再與小白鯨一起討論唷^^

    小白鯨 於 2014/04/20 20:28 回覆

  • 雪若林 愛分享
  • 好實用, 感謝分享

  • 能與妳分享,是小白鯨的榮幸^^

    小白鯨 於 2014/05/17 12:54 回覆

  • Jun
  • 推!!
    真的超實用的!!
    謝謝你的分享:)

  • 有啥小白鯨可以幫忙的地方,妳儘管與我說^^

    小白鯨 於 2014/05/19 23:17 回覆

  • jih0717
  • 就在我對CSS語法感到無力的時候,看到這篇文章。深入淺出的文字和淺顯易懂的圖片,真的讓我收穫良多欸:D 太感謝小白鯨了~~~ 大推!
    [:emotion1336493425-1567962756.gif]

  • 能夠因為這篇文章,與妳結緣,小白鯨也好開心哪!

    有任何可以幫忙的地方,妳儘管抓著小白鯨問唷^^v

    小白鯨 於 2014/06/03 09:26 回覆

  • 麻糬公主
  • 好厲害!!!謝謝~~~~

  • 謝謝妳的鼓勵^^

    小白鯨 於 2014/06/05 10:39 回覆

  • DouYA
  • 你好 ^~^
    我想请问 如何改动侧栏标题的位置?
    我想把标题改到中间

  • 呵呵~請再來看文章唷^^
    特地為了妳,加在二(三)A4 的敘述裡。

    小白鯨 於 2014/06/09 15:34 回覆

  • DouYA
  • 我改到了。謝謝你呀![:emotion1336493450-224373070.gif]

  • 呵呵~~開心轉圈圈囉~

    小白鯨 於 2014/06/10 22:53 回覆

  • joycelyn
  • 大推呀...
    這簡直就是css白痴的我的救星呢...
    我要分享啦...真的很棒...
    謝謝您的分享,辛苦啦

    joycelyn

  • 我也要謝謝妳!
    妳讓我知道:小白鯨對這個世界,還是有小小貢獻的!哈哈!

    小白鯨 於 2014/06/21 17:36 回覆

  • 揚弦
  • 這篇大幫助! 感謝至極!![:emotion1357460512-79418086.gif]
    推呀~~[:emotion1336493453-3657433785.gif]

  • 能夠幫上您的忙,是小白鯨的榮幸^^

    小白鯨 於 2014/07/09 07:52 回覆

  • Scarlett♡史嘉蕾
  • 小白鯨真的太愛你了^^
    我也常研究css研究到抓狂
    沒辦法我真的市電腦白痴 有了你這篇
    真是救了我 感恩 請受小女一拜

  • 唉唷~好害羞喔!
    能夠讓大美女史嘉蕾愛上小白鯨,那是小白鯨要累積幾百年才能修得的福報耶!
    YA~~~~

    如果還有啥不明瞭的地方,妳儘管問小白鯨!
    讓我有機會轉一轉最近有些頓頓的「鯨腦袋」^^

    我不要小女一拜啦,我……我……我可以要小女一抱嗎?
    (小白鯨臉紅紅的游走了......)

    小白鯨 於 2014/07/09 07:57 回覆

  • 悄悄話
1 23
找更多相關文章與討論