2008年9月17日 星期三

blogger模版CSS語法細部介紹(上)


上次在Blogger template模板教學課程---CSS外觀解說一文,已經大致說過CSS的結構,大概有body、header、post(Main)、sidebar、comment等區的css碼要定義,以下分別來說明細部的規則。

【body部分】
這是最主要整個模板的配置,但是這只是基礎的,你在分別的區位,例如post或是sidebar,還是可以定義其他的顏色或是字體大小,越後面定義的就會更新前面所定義的樣子。

通常body裡定義的重要因子有下列,
body {
background:#ffffff; 背景顏色,整個模板的背景顏色,你也可以用圖片代替,語法變成
background: #ffffff url("圖片網址") no-repeat;

no-repeat:表示圖片不重複,也可用以下代替。
repeat-x:表示橫向重複
repeat-y:表示縱向重複

margin:0; 距離邊界為0
color:$textcolor;
通常在這裡我們不會定義版面大小,這在以前的文章已經提過,就不再重複。

這有個$符號的元素,表示前面已經有定義這個文字的顏色或大小,就是
/* Variable definitions這段的定義,如果這裡有定義,我們在後台的字型和顏色這個選項就可以發揮作用,只要在字型和顏色變更,在前台就能出現效果,這是較正規的blogger設計方式,但有些模版並沒有這個定義,譬如我現在使用的模板就沒有這部份,所以每個定義值要改顏色就要找到相對應的語法敘述來改,會比較不方便,而且應該也是不符合CSS精簡的原則。

font: (或是font-size),字型大小,可以用px或pt來顯示,如果你覺得IE和Firefox呈現的文字差異太大,可以參考我的解決方法,如何讓Firefox的字和IE一樣大?但我想這應該不是正規的方式,我曾經在書上讀到應該採用em來設定文字大小,再透過百分比來控制你想呈現的大小。

font-family: arial,verdana,helvetica,tahoma,Sans-serif; 採用的字型樣式,通常以arial│Helvetica│Sans-serif為常用的樣式。
font-weight:字型粗細,bold粗體│normal正常

text-align: center; 部落格置中,這對解析度較大(如1280*1024)的比較看得出作用,不會偏左或偏右。

a:link {
color:$linkcolor;
text-decoration:none; 【文字效果,有分underline加底線│overliner加頂線 │line-trough加刪除線│blink文字閃爍│none無效果】 }
這代表有超連結的文字樣態,另外還有 a:visiteda:hover ,a:active
a 代表超連結元素,有四種屬性,
link:連結的原始顏色〈通常 a:link{ 會簡寫成 a { 〉
visited:拜訪過的顏色
hover:滑鼠在上面滑過的顏色
active:正被選取,或是按下時顯示的顏色,這個比較少用。
比如說你將文章標題(.post h3)設為白色,但是出現的卻是藍色,就是因為標題是個超連結,所以相關的語法(如.post h3 a) 也要改,才能達到你想要的顏色,這是就要找到a這個關鍵字來改。

a img {
border-width:0;
}

圖片連結,寬度設0,就是沒有邊框,有時你發現為什麼圖片有框,是因為預設是有框的,只要加入border-width:0;就可以把框線去除。

【header】
通常在這區包括header-wrapper及description這兩個元素,
#header-wrapper {
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
width: 980px;
}
定義標頭區的寬度,有時也可加入高度,例如,height:120px;通常會有控制高度的語法,是因為你的標題是以圖片為背景,用高度、寬度比較能定位。

#header .description {

display: block; 【顯示為一個區塊,簡單的說就是顯示這個元素出現時會在新的一行出現,如果是inline則是在同一行出現】
color: #545454;
text-align: left;
margin: -2px 0px 0px 0px;
padding: 1px 0px 10px 0px;
}
這是網誌敘述的部份,介紹你的網誌的slogan。

#header h1 {
display: block;
color: #f2984c;
font: normal bold 164% Georgia, Times, serif;
text-transform: uppercase;
text-align: left;
margin: 0px 0px 0px 0px;
padding: 15px 10px 0px 10px;
}
#header h1就是你的部落格標題定義,字型樣式、大小、粗細、位置左右都可以在這裡定義,其中text-transform: uppercase; 是對英文標題有用,就是把英文字母轉成大寫也可設定為capitalize第一個字母大寫或是lowercase全部轉為小寫,有的會加上定義#header h1 a , #header h1 a:hover,{,就是標題超連結狀態下顯示的顏色,這時上面#header h1 { 設定的顏色就變成沒有意義了,除非你的標題不使用超連結。
而常看到margin、padding的用法,可以參考Blogger 新手基本技巧問答(二)的內容。

【MAIN部分】主文區

#main-wrapper {
float: left; 【設定主文在左或右,如果你想變更左右排版,可以和#sider-wrapper 的定義對調】
position: relative;
width: 600px;
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
}
word-wrap: break-word;讓英文字自動斷行敘述。
這裡有個overflow: hidden;建議要放,如果超過寬度自動顯示隱藏,這樣版面看起來較工整,但有些人是會放圖片,常會超過寬度,但還是堅持要完整呈現,可以設定visible,只是這樣有時會造成你的邊欄整個往下掉。

h2.date-header
{
margin: 5px 0px 0px 0px;
padding: 0px 0px 0px 0px;
text-align: left;
color: #b3b3b3;
font: normal normal 95% Arial, sans-serif;
text-transform: uppercase;
text-decoration: none;
}
這是文章日期的設定,靠左或靠右是比較重要的設定。

.post
{
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
line-height: 1.6em;
text-align: left;
font-size:9pt;
}
主文的設定,這裡最重要,文字的大小、間隔、行高,會讓你的網站讓人看起來是否舒服、容易瀏覽都可以在這裡設定,以上語法是我一般的設定,
行高1.6em;(line-height),
字型9pt大小,
有的比較仔細的還會設定letter-spacing:4px;代表字元與字元的距離。

如果你覺得文章間空隙太小太緊密,可以用margin-bottom:30px;或是margin:0px 0px 30px 0px;來設定與下方的距離高度,不一定要下方或是上方也可,高度自行調整,也可以用在標題區或是文章頁尾區都可設定。

.post h3 {
margin: 0px 0px 15px 0px;
padding: 0px 0px 5px 0px;
color: #545454;
font: normal normal 140% Georgia, Times, serif;
text-decoration: none;
text-align: left;
line-height: 1.4em;
border-bottom: 1px solid #545454;
}

文章標題(post h3)的定義,通常文章標題字型會設大一些或是粗體、斜體,也可以在這設背景圖案或是分隔線,如border-bottom: 1px solid #545454;(在標題下方加上橫線),可以參考換Banner圖片及文章標題加上圖示這篇,這裡也要注意如同上述 .post h3 a, .post h3 a:hover等超連結的語法細節。

.post-footer {
display: block;
margin: 15px 0px 20px 0px;
padding: 10px 10px 10px 10px;
color: #f2984c;
line-height: 1.5em;
border: 1px dotted #ffffff;
}
這是文章下方(頁尾)的資訊區,通常會有文章的作者、發表時間點、回應連結、文章分類或此文章的連結等等,顯示狀態可以在這裡設定,通常會用border把這塊圈起來或是設背景顏色,突顯與主文的分別。

這篇先寫到這裡,因為已經太長了,而上述的這些定義是大部分模板所設計的名稱,也是有不一樣的名稱顯示,不用拘泥,大概都可以自己判斷是寫哪一段的語法,如果覺得很困難,沒關係,選擇一個簡單的模板就好,關於CSS樣式真的是很多要學的,我自己也是常看書看不懂,因為都是原文翻譯的,真的想要自己改模板,可以多多測試就可以知道這段語法出現在哪裡,要如何使用。

延伸閱讀:
Blogger template模板教學課程---概說及基本結構
Blogger template模板教學課程---CSS外觀解說
Blogger模版CSS語法細部介紹(下)

78 則留言:

  1. 這篇寫的相當詳盡喔!
    相信對大多數的人都會有幫助的。

    文章標題(post h3)的部分,我在設定字型為粗體時,都是無效的,原來是因為他本身也是超連結,所以要連著post h3 a也一起改...之前完全沒注意到。又學到一點了!感謝!!

    回覆刪除
  2. 因為有人問過我,所以我會把常搞混的寫出來,只能重點式的寫,不然寫得沒完沒了,還有下篇呢,慢慢磨中。

    回覆刪除
  3. 先大推你的文章啦!這系列讚!對我幫助很大。

    回覆刪除
  4. 謝謝啦,每次都有你的鼓勵,揪甘心。

    回覆刪除
  5. 先推一下大大的文章~
    不過我想請教一下為什麼我標題的圖左右不能縮小呢?我想要用成跟下面版面一樣的寬度,是哪邊設定有問題?謝謝!

    回覆刪除
  6. 你可以在header-wrapper設寬度,或是試著將你的圖片剪裁成你設定的寬度,會比較快,另外,我不懂為什麼要加padding,你是想左右有空白嗎?

    回覆刪除
  7. 謝謝大大,我知道我哪裡出錯了...
    另外想再請教一下如何把文章下面各式書籤那些移除掉呢?謝謝~

    回覆刪除
  8. 記得先備份模版,勾選小裝置後,將 <p class='post-footer-line post-footer-line-3'>各式書籤裡面內容的刪掉,如果translate不要刪,則只要刪除各式書籤後面的那一段到<br/>
    如果看不懂我寫什麼,建議還是不要刪除。

    回覆刪除
  9. 原來如此,再請教最後一個問題...
    就是右邊標籤後面的RSS連結要如何移除呢?謝謝~

    回覆刪除
  10. 你很聰明,一下子就改好了,至於RSS我記得看過英文hacks有這東西,我還沒看到在中文上有,我想當初應該是你自己裝上的,可能要參考當初的網頁,我也無能為力,這個我不會,沒法幫你。

    回覆刪除
  11. 恩,沒關係,還是先謝謝大大了~
    期待下篇的到來^^

    回覆刪除
  12. 我想問一下,為何我的blog的header-wrapper的邊框中,右邊的邊框無法顯示?

    我的header-wrapper的設定:
    #header-wrapper {
    border: 2px dotted #000000;
    margin: 0 auto;
    padding-bottom: 0px;

    }

    回覆刪除
  13. 不是無法顯示,是被你的圖蓋掉了,你的圖760px,而header部分也是760px,可以在把圖片部分加上border敘述,或是將圖片變756px或是header部分加大,試看看。

    回覆刪除
  14. 感謝,我成功了……謝謝綸太郎~
    最後再問一下,能否改超聯結或式圖片註解的顏色?

    回覆刪除
  15. a:link等4種語法就是超連結,你看你要改哪一個,圖片註解我不懂,沒看到有這部份,顏色就是color敘述,找到相關的定義再改即可。

    回覆刪除
  16. <a href="網址" title="文字"></a>
    <img src="網址" alt="文字" >

    不好意思這麼晚才回復,我所指的是上面2段程式的粗體部分。(color應該是文字的顏色吧,我想改的是註解部分的背景和文字顏色。)

    回覆刪除
  17. 如果是整個部落格都要改,我想是用java script的效果才能達成,如果是個別的,應該是用類似<div>等語法來控制,不過詳細的方法你可能要在Google上找找看。

    回覆刪除
  18. ……用google算是找到了……,不過沒找到教學只找到範例就是了……
    感覺好複雜……

    回覆刪除
  19. 其實文章內容比較重要,版面順眼,瀏覽方便就好了。

    回覆刪除
  20. 你好,大大,我想問一下如何不讓我的BLOG主文區偏左。
    我用IE7時OK,和我要的一樣置中,但用Google瀏覽器或火狐就偏左了,這該怎麼辦?

    PS:我main的程式碼
    #main-wrapper {
    display: inline;
    float: $startSide;
    margin: 0 0 0 3px auto;
    padding: 0 0 0 6px ;
    width: 478px;
    word-wrap: break-word;
    overflow: hidden;
    }

    回覆刪除
  21. 將#content-wrapper {裡的
    margin: 0 auto;/
    後面的斜線拿掉
    如果不行
    再將body{
    text-align: center;拿掉
    試看看

    回覆刪除
  22. =Д= 結果剛剛我把outer-wrapper中「 margin: 2 auto;」改成「margin: 0 auto;」就OK了……

    回覆刪除
  23. 我也有這種經驗,置中的問題很多,有時這個模板可以,有時不行,又調別的但又會動到其他的,很麻煩。

    回覆刪除
  24. 您好綸太郎:

    請問如果要使文章區裡(.post {),
    點選滑鼠左鍵曳反白,但是只想呈現藍色字體不要有藍色底。

    請問綸太郎版大要加入什麼CSS語法呢?

    因為我的部落格也是屬於小字體、廢文字體又多那種,怕讀者會鬥雞眼 XD

    回覆刪除
  25. 抱歉,不是很懂你的問題,你是說用滑鼠選擇字時展現的方式嗎?
    如果一般字體背景都是用background控制,字型顏色是用color控制。
    小字體、廢文字體又,這個問題調整文字大小及行距即可。

    回覆刪除
  26. 就像是蔣友柏文字反白的樣式
    http://www.yubou.tw/content.asp

    沒有底色,只有字被反白而已!

    回覆刪除
  27. 這個我就不會了,要問設計者吧,或到bbs問看看。

    回覆刪除
  28. 別這麼說,沒幫上你的忙,css要學的還很多。

    回覆刪除
  29. 請問要怎麼修改header description的大小呢?

    回覆刪除
  30. 你是說字型大小嗎?如果是你的模板,找到
    #header .description {這區,然後修改以下這個即可
    font: normal normal 78% Verdana, sans-serif;
    78%可以改成100%看看,不然就是將font這行刪掉,直接用
    font-size: 12px;
    或是你要的大小即可。

    回覆刪除
  31. 感謝太郎的指點..在還沒向你提問前,你這篇文章我來來回回已經看了好多次了..當然啦,也有發現我的模板有很font...我也搞不懂怎嚜會有這麼多,想動手改又不知從哪下手..多虧你的提點..只是我很好奇,我拿掉post-body的"font-family:arial;"那之後主文區裡的字型是如何去定義去產生啊??麻煩你指教,謝謝

    回覆刪除
  32. post-body只是裡面的一個區塊,如果沒有定義當然是由他的上層區塊定義了,例如.post或是.main,再都沒有就是body部分,這是最主要整個模板的配置,所以最簡單的就是在body定義,其他區塊的font都可以拿掉,我是這樣想的,會在其他區塊定義大小,字型,只是為了版面的美觀與特殊,所以就看自己怎麼運用了。

    回覆刪除
  33. 啊...非常感謝綸太郎到我家檢查作業.剛剛想說動手寫篇文章,一進入我家,喝..嚇我一跳,那字體怎嚜小的這麼可憐啊..快比螞蟻小了..好在看到你的留言.
    因為昨天在我自己的NB看倒是沒這問題,今天在PC上使用就變成小蝌蚪了,我想這應該是解析度的問題吧...

    回覆刪除
  34. 沒辦法,看得很辛苦,只好出個聲了。

    回覆刪除
  35. 請問一下
    更改Sidebar的字體大小時,用內建的改了OK,用JAVA的字體大小卻不會跟著改,請問應該怎麼辦呢?
    又我的POST是長這樣
    .post {
    color:#444444;
    font-size:1.8em;
    line-height:165%;
    margin-bottom:15px;
    text-align:justify;
    修改行距的時候都沒有辦法,只有字體大小可以改而已。我應該怎麼去修改呢?

    回覆刪除
  36. 一般而言java除非你去修改他的原始碼才行。
    line-height:165%;
    行距直接用px定義即可,不用百分比。
    如,line-height: 28px;

    回覆刪除
  37. 您好:這是我的網誌
    http://amynewblog.blogspot.com/
    我照您說的方法但有一個問題
    行距變大的是張貼者AK那裡,不是文章的內文
    我現在用比較誇張的數據
    font-size:30px;
    line-height:300px;
    請問一下問題可能出在哪裡呢?
    套用的模板是這個http://0rz.tw/ot81z
    不好意思再麻煩您看看了

    回覆刪除
  38. 我看了一下原始版,下面還有個.post-body {他的適用順序是高於.post,所以.post的相關敘述可以刪除,用.post-body 來定義即可,所以ak(非文章主體)用了post的結果會空一大段(你設的300px),但下面的文章又用了.post-body重新定義,所以會變成如此,層層相疊,這樣說明不知了解。

    回覆刪除
  39. 你好 想請教你
    關於文章標題的連結範圍
    就是整個post title的連結範圍超出
    文字的長度

    blogger模版CSS語法細部介紹(上)____這裡

    在標題的右邊就能夠點進文章
    要如何將連結範圍(手指)縮小到依照文章標題文字長度呢?

    我是看到滿多wordpress的都是這樣
    而且連結虛線都有取消,不過我覺得虛線還好
    比較希望能調整連結長度
    可是不知道名稱@_@"
    謝謝

    回覆刪除
  40. 應該大部分的都是照文字連結,不是只有wordpress的部落格,我這個是因為模板裡面,標題的超連結,有設一個區塊的敘述,如
    .post h3 a
    display:block;
    所以才會整區都可會出現連結的手樣,現在拿掉display:block;就是一般的情況了。

    回覆刪除
  41. 您好!
    想請問一下,要將文章區塊的背景作成半透明的要怎麼用呢?

    是從main主文區修改嗎??

    謝謝!^^

    回覆刪除
  42. 應該是.post {這一塊,
    background: url(圖片網址);
    至於半透明圖片應該是事先自己先製作吧,如果用語法,可能google搜尋看看,我也沒試過。

    回覆刪除
  43. 您好,我看教學裡面有提到如何設定行距,
    可是要如何設定段落間的間距呢?
    也是在.post底下可以設定嗎?

    回覆刪除
  44. 我記得好像是
    .post p {
    margin: 15px 0 0 0;
    }
    多加上一個p,然後15px跟上方的間距這樣,你可以試看看,這個很少用到。

    回覆刪除
  45. 謝謝你的分享,受用很多
    請問在header顯示的文章標題,如何控制
    http://www.wretch.cc/bolg/auspherd

    回覆刪除
  46. 看不懂你的問題,header區只能顯示部落格名稱及敘述,無法顯示文章標題。

    回覆刪除
  47. 我的意思是當閱讀內文的時候,文章標題會出現在HEADER區,但那個字體卻非常大。請問要怎樣控制呢?

    回覆刪除
  48. 你留的網址是錯的bolg..(應該是blog),找了一下,你應該是講無名的部落格吧,我這裡的教學是針對google blogger,所以blogger沒這功能,而無名我沒帳號,也沒有研究,一般是找到文章標題區的定義,然後將字型修正,例如font-size:16px。

    回覆刪除
  49. "認識CSS樣式的系列文章"已失連?pls check. tks

    回覆刪除
  50. 不好意思
    那請問 .post_nav h3 { 是指文章標題嗎

    回覆刪除
  51. 沒看過這種定義 應該是別種程式系統用的

    回覆刪除
  52. 不好意思,想請問一下,
    我載了一個template想修改字形,
    試著用google developer的方式去改,
    但是怎麼貼都只跑出原本的字形......
    想請教您是不是原本的template會有一些設定呢(導致無法直接改字形?)!!?

    另外想請教您,在首頁顯示的文章行數要怎麼設定呢?(從html之中...)

    回覆刪除
  53. 字型部分不清楚
    新版的,就用more分隔,沒有特定行數的設定。

    回覆刪除
  54. 不好意思,我想問一下就是
    我網誌裡有一張橫幅圖片和網誌標題
    但就不是置中,請問怎樣把字和圖片置中呢?
    HTML裡也沒有#header-wrapper.....
    我已經看過不同的教學 但還是不懂.. 謝謝你~

    回覆刪除
    回覆
    1. 你的部落格標題應該是 .titlewrapper ,每個模版用的名字不一定相同,從英文字面來推算應該是這個。

      刪除
    2. }

      .header-inner .Header .titlewrapper,
      .header-inner .Header .descriptionwrapper {
      padding-left: $(header.padding);
      padding-right: $(header.padding);
      }

      這個?那我該怎樣把標題和標題橫幅置中?
      謝謝你~

      刪除
    3. 文字置中 通常是 text-align: center;
      圖片可以用float:center;或是喬與左邊的距離
      你可以自己測試看看

      刪除
  55. 想問一下 插入圖片的說明文字的字體大小要怎麼改變?不知道能不能改o.o

    回覆刪除
  56. 應該是你自己在文章裡有圖片說明的文字,在撰寫模式下用一般、大、最大等來修改大小,或在html裡修改即可。

    回覆刪除
    回覆
    1. 摁,以後記得會改字體大小的~
      原本以為可以用標籤一次改全部的=w=

      刪除
  57. 如果要改全部,就進入範本,編輯html,然後新增一個定義
    td.tr-caption {
    font-size: 150%;
    }
    大小顏色自己設定

    回覆刪除
  58. 版主您好,我看了您的CSS語法介紹和新手指導鑽研了幾天,
    因為是超級新手,所以大部分更改都是使用範本設計工具
    但是有幾個問題沒有辦法解決,希望版主可以不吝指教,先謝謝您了!

    1.標題的底色我想要改透明,從html那邊我不知道要從哪裡更改
    試了很多header開頭的但是都無法把它變成透明的,底色仍然是白色

    2.文章和旁邊的連結列(就是網誌目前除了大標題的白色區塊)我想要改成半透明的
    爬了很多文張友說要弄png圖片;也有說可以用filter:alpha(opacity=50);-moz-opacity:0.5;opacity: 0.5;這個語法
    想請問如果用半透明png圖片的話應該要把語法放在哪裡?
    又如果是用filter:alpha這串語法的話應該要放在哪裡呢?
    我在post的區塊兩種都試過,但一樣沒有成功。

    3.文章的日期我想要改放在偏右,這部分您的部落格有教學,
    但我可能不知道要放在哪裡,所以也是沒有更改成功。

    問題有點多,打擾您了 謝謝!
    ps.這是我的部落格網址:http://csssohard.blogspot.tw

    回覆刪除
    回覆
    1. 1.不用到html改,新版的後台就可以改,範本→自訂→進階→網誌標題→標題背景,選擇透明即可。
      2.如果是除了部落格標題外,那就放在body{ 內,語法應該就是backgroundd這行敘述裡
      其實範本內就有半透明的選擇,你應該選那種,再做些修改就好了
      3.找到h2.date-header這個定義,然後增加一行 text-align:right;

      刪除
  59. 板主您好,有個問題想請教您,

    我想要調整”網誌說明“的大小、位置,

    但我找不到您文章所說的 #header .description 以及 #header h1 {

    所以也不知道從何更改起,

    抱歉麻煩您了!

    回覆刪除
    回覆
    1. 範本→編輯Html,裡面有個黑色三角型,按下就會展開相關的css

      刪除
    2. 每次來這裡都可以找到答案,太感謝版主了。

      刪除
  60. 請教一下,如果我要插入的不是圖片而是符號(類似✁)我該如何修改?可以改顏色嗎?先謝謝您^^

    回覆刪除
    回覆
    1. 通常用span語法,你可以上網看一些css的語法,再套用。

      刪除
  61. 請問blogger的文章內文會跟熱門文章文字相疊是設定或是語法哪裡出問題了嗎?

    回覆刪除
    回覆
    1. 現在的模版改變很大,如果不適用,建議換個模版,改語法很辛苦。

      刪除
  62. 你好,我加了顯示語法的工具這樣我才能把語法貼出來給大家看!
    不過,我不知是不是我主題的關係,我這語法框後面的文字全無法置中!?
    而且,我看英文版型明明文字就不是置中,我套上去就置中...置中就算了,好不容易找到可以改的
    改了左邊,圖片也整個往左邊跑!
    不知怎麼解決研究好幾天了...

    文字也沒有套用到css,也有試過在.post上加入,但完全沒反應!?

    https://maizi-nonsense.blogspot.com/2020/03/bloggerlikebutton.html

    回覆刪除
    回覆
    1. 抱歉,這部落格很久沒更新了,我看您的文章,置中問題應該解決了。

      刪除

設有留言驗證及核准,版主閱覽後,留言才會顯示,發問前請善用網站目錄Google搜尋功能