2008年8月19日 星期二

Blogger template模板教學課程---CSS外觀解說

看過了模版基本結構的介紹,接下來先談比較重要的外觀設計,一個好的CSS設計不僅讓你的網頁更有吸引力,符合網頁標準技術的設計更能讓你的網頁在不同瀏覽器中運作正常,不會跑來跑去,我想很多人都有這經驗,逛到許多網站發現整個結構錯亂,邊欄跑到下方或是延伸到遙遠的右方(這以無名最嚴重),或是整個畫面一片空白,還要反白才能看清楚文章在寫些什麼(Yahoo有案例),或是層層疊疊,文字都堆在一起,綸太郎都忍不住罵聲「這是什麼鬼啊!」,這就是沒有做好CSS外觀設計的失敗,如果你一直堅守在某個瀏覽器(不論IE或是FF),而不肯自己作改變,設計或修改模板來適合大部份瀏覽者的需要,我想這篇文章你也可以省略,不用浪費時間看了。

首先我們大概來看整個網頁的CSS結構配置圖,如下:

blogger css
配合上圖來說明,
body(藍色):整個網頁的主體,通常不用設寬度,只要設底色,但如果有用固定背景圖,則建議要設,控制網頁的展示。

outer-wrapper(淺黃色):網頁大小layout的範圍,如果你想設計1024*768大小的模板,在此就要定義width的大小(例如width:990px;),如果你想依解析度大小彈性運用,這裡就要設百分比(如width:95%;)

header-wrapper(紅棕色):標題區塊的大小,這個網頁元素通常包含
#header這個元素及.description(網誌形容),較高階的這裡會放導覽條(menu_bar或header_menu),如下,

通常很多人會放圖片,使用網頁元素裡的標頭編輯可以插入圖片,但綸太郎建議不要這樣做,因為有時會縮減你的原始圖片,所以還是利用修改css碼來放圖片比較能放到你想放的位置,也能控制圖片大小,語法為
background: #00ffff url("圖片網址") no-repeat;
有時不能成功,試著改成
background-image: #00ffff url("圖片網址") no-repeat;
為什麼要加上#00ffff,這是標頭區的背景顏色(可自設),有時背景圖比較慢顯示或是叉燒包,至少還有背景顏色可看到,不會一片空白,或是跑出底色。
※ 如果你想將標題分成兩部份,像這篇如何將標題(頭)分兩欄,加入網頁元素的作法,那麼會有#header及#header-right兩個定義,兩者加起來就不能大於header-wrapper的寬度,否則元素會被推到下方去。

content-wrapper(橘色),包含main-wrapper+sidebar-wrapper,寬度要設好,通常都要預留邊界的空間,很多時候sidebar往下掉,就是因為寬度不夠,譬如文章裡的圖片超過post的寬度,或是sidebar裡的元件widget超過sidebar設的寬度,而這些都可以透過修改寬度來避免,或是利用overflow:hidden;來設定。

main-wrapper(綠色),主文區(#main),包含
* 文章標題(.post h3),通常會和日期(.date-header)擺一起
* 內容(.post)
* 文章相關資訊(.post-footer),如創作者(posted by)、發佈時間、意見及文章分類等,這部份很多人勾選了版面配置的網誌文章編輯,還是無法控制這些元素的出現或隱藏及移動位置,通常原因是出在你使用的模板不是官方設計的,所以更改後還是沒有效果,這時就要利用html裡面的語法來作調整,這以後再談。
* 意見區(comments)。
這裡可以加些讓文章內容格式更漂亮、更專業的元素,例如利用
blockquote,引用他人文章的區塊設計。
code,程式碼的外觀設計。
讓文字加上底線,顯示重要性。
這些透過Google查詢都可以取得相關的教學文章。

sidebar-wrapper(黃色),sidebar邊欄的配置,這裡可以放網頁元素,很多小工具widget的地方,有的模板會分兩欄或常看到的三欄式,或是綜合式(多欄)模板,這裡寬度控制更要留心,儘量讓你的widget寬度與邊線預留5px的空間。

footer-wrapper(靛青色),頁尾,通常綸太郎會放網站連結及版權宣告、模版設計來源,後台登入等資料,


可參考Blogger 新手基本技巧問答(四)說明,也有人會利用這區塊分成三欄來放網頁元素,這是比較高階的用法。

這裡常看到的定義h1、h2、h3,這些通常用來定義元素的標題大小,從h1~h6都有,常見的是,
#header h1,網站標題
.post h3,文章標題
h2.date-header,每篇文章日期的格式
.sidebar h2 ,邊欄的標題,例如最新文章、最新回應
#comments h4,意見,文章下方顯示幾則意見的文字格式。
大部分模板都是如此定義,但也有少數有自己獨特定義的型態。

另外CSS裡的元素定義名稱,每個模版都不盡相同,須靠自己判斷,尋找類似意思的名稱即可,以上為CSS外觀的結構大綱說明,細節部份等下篇再談了。
延伸閱讀:
Blogger template模板教學課程---概說及基本結構
Blogger template模板教學課程---HTML內容架構
blogger模版CSS語法細部介紹(上)
Blogger模版CSS語法細部介紹(下)

58 則留言:

  1. 不好意思,想要問一個問題。
    我想要outer-wrapper這整個區塊置中,我的做法是在body加入"text-align: center;",這樣在IE顯示是沒有問題,可是在火狐底下顯示卻永遠都是貼向左邊...
    究竟要如何才能正確的將outer-wrapper置中呢?

    另外還有一個問題,想將連結列在右的模板改成連結列在左,要上哪控制?(雖然套用別的模板就可以,可是這樣版面又要從頭改起,頗累人)

    回覆刪除
  2. 我用兩者來看,看起來都正常,沒有偏左的問題,而且我看你的程式碼都是用left。

    另外左右對調,找到
    #main-wrapper {
    float: left;

    #sidebar-wrapper {
    float: right;

    把兩者的左右改過來即可,再稍微調整距離大小即可,如果不行可能是html裡面要再改,你先這樣改改看。

    回覆刪除
  3. 嗯,謝謝你的回答,我會先試試看!

    目前套用的確實是用left,因為目前的版面完全靠左會比較美觀。(我忘了說明,在1024*768解析度下,都是相當剛好的,只有在解析度大於1024*768時才會看的出偏左)

    回覆刪除
  4. 我記得以前我是在
    body裡設text-align: center;就可以了,
    而在out-wrapper裡面不要有這行敘述

    如果這樣不行,就兩個都設置中看看
    你現在都是設定left

    回覆刪除
  5. 左右對調的部分照你說的方法沒有問題~

    另外,置中的部分經過多次的測試,發現問題在哪了:
    #outer-wrapper {
    margin: 0px auto;
    }

    之前我在改版面的時候把auto給去掉了,這樣版面就會整個靠左。把auto加回去就會置中。

    回覆刪除
  6. 很高興遇到你這樣的網友,都會自己先做功課多方面測試,也提供我ㄧ些改模板的技巧,謝謝了。

    回覆刪除
  7. 我想問一下版模的問題,每個人用的顯示器尺寸都不一樣
    比如我有17寸的電腦顯示器編輯我的blog(跟CSS結構配置圖一樣)
    如果有人用14寸顯示器的瀏覽我的網站(sidebar-wrapper被擠到下面了)
    請問這個問題要怎麼解決! thanks!

    回覆刪除
  8. 通常跟幾吋無關,是使用者的解析度設定問題,如果你的設定以固定寬度為基準,超過寬度,底下會有拉Bar出現,如果以百分比設定,也會自動調整,會出現sidebar往下掉,應該是跟你的padding或是margin沒有設好有關係,或是某一篇文章的圖片超過你所設的寬度,你可以利用這個網站http://browsershots.org/來預覽設計出來的版型是否適合該解析度,我的想法是這樣。

    回覆刪除
  9. 不好意思,請問一下我要如何把右邊那條線拉到跟我的圖片對齊呢?

    回覆刪除
  10. 你的背景圖的網址是http://www.blogblog.com/tictac_blue/tile_left.gif寬度是847px,而你的部落格寬度是990px,那條線是背景圖,所以你要另作背景圖,把他拉大才行。

    回覆刪除
  11. 因為當初這格式是套用別人的,所以我並沒有原圖,是後來寫網誌的時候才發現圖都被裁切掉,請問一下有沒有別的方法把那個背景圖放大,謝謝!!

    回覆刪除
  12. 他原始尺寸就是847px,所以是不能放大,但是你可用繪圖軟體,如photoimpact自己再做一個圖,放到自己的空間上當背景圖,圖片網址如上,你可以將圖另存新檔,#outer-wrapper{這行敘述就是背景圖片的位置,置換上去即可。

    回覆刪除
  13. 我用好囉!!非常謝謝,而且講解的簡單易懂!!

    回覆刪除
  14. 您好, 拜讀您的文章真是受教不少.

    小弟最近開始用Blogger裡的Minima格式為範本進行改造, 但發現網誌標題的說明以及sidebar的標題之文字及顏色設定都被連在一起 (在同一個h2的sector中), 如果小弟想將該標題說明與sidebar的設定分開, 請問有什麼辦法呢?

    回覆刪除
  15. 將#header .description {裡面的
    color: $descriptioncolor;
    改成你要的色碼即可,不用變數
    例如color: #ff0000;
    至於sidebar抬頭,你可以新增一個元素
    sidebar h2{
    color: 色碼代號;
    }
    也是可以解決
    後面的定義會蓋過前面的

    回覆刪除
  16. 非常感謝您的回答, 已按照您的方法去試了, 但仍是失敗. 真是很奇怪的預設. 明明只設立了一個headings的大類, 但卻可以將2個不同的項目設在一起, 無論如何也想不明白.

    回覆刪除
  17. 方便給我你的網址嗎?從你的部落格原始碼比較能看出端倪,我是參考Minima的html原始碼來看的。

    回覆刪除
  18. 十分感謝, 以下是小弟的站:

    http://whisperofmysoul.blogspot.com/

    回覆刪除
  19. 我測試之後,標題和說明都是同一種顏色#666666控制,無法使用程式碼來改,也無法利用字型與顏色來分別修正,只能利用同一種顏色,可能是這個模版有特別的設計吧,很詭異,目前沒法解決,很抱歉。

    回覆刪除
  20. 文章中有提到導覽條的部份,參考所有文章中沒有看到相關的介紹,不知是否有相關的教學內容呢?

    回覆刪除
  21. 首頁最新一篇就是了。
    在部落格名稱下方放個水平連結導覽列

    回覆刪除
  22. 哈囉~

    可以讓main-wrapper的左邊更靠近 content-wrapper的左邊那裡嗎??
    還有右邊的sidebar-wrapper我也想讓他更靠近外面一點...

    因為我覺得空白太多了..

    請問要修改哪裡才做得到呢??@@

    回覆刪除
  23. #main-wrapper {
    padding: 0px 0px 30px 15px;
    15px可以改小一點
    另外不是空白太多,是你的邊欄本來有兩列,被你擠成只有一列,我想是你有調整過width的寬度,建議還是改回來,不然要修改的地方很多,因為加大很多圓角的背景都變難看了,這是我的建議。

    回覆刪除
  24. 恩恩~謝謝你~@@

    對了~像我把outer-wrapper定為1000px

    可是我的main-wrapper定為600px

    2個sidebar-wrapper都定170px

    相加起來沒並沒有超過1000px

    但是這樣就會有一個邊欄擠到下面去.

    那我這樣要怎麼修改呢??

    還是我我的content-wrapper也要設定??@@

    回覆刪除
  25. 你的#page可以設980px,因為你還要計算左右邊padding的寬度,你的sidebar-wrapper的padding: 15px 10px 10px 15px;,第二跟第四就是右左邊的寬度,加起來就有25px會影響你寬度的計算,所有加起來就會超過你的#page設的960px,可以先設0,再慢慢調整,另外#search{原始的模板在IE顯示就會跑掉,這部份或許可以直接把它刪除,加上你自己做的Search Bar看看,或是將width設小一點,若想刪除就拿掉<div id='search'>到</div>這段程式碼,記得先備份歐,大概先\=這樣。

    回覆刪除
  26. 恩恩~謝謝你~^^

    可是我要移除SEARCH的時候.他說...

    我們無法剖析您的範本,因為它的結構不完整。 請確定所有的 XML 元素均已正確關閉。
    XML 錯誤訊息: The element type "div" must be terminated by the matching end-tag "

    那要怎麼辦...@@

    回覆刪除
  27. 是到</form>下面那個/div歐,我想你可能還不熟悉語法,沒關係,如果砍不掉就算了,免得搞砸整個版面。

    回覆刪除
  28. 恩~成功了~^^

    哈哈~我真的還不是很懂語法...==

    真的很謝謝你幫我解答~

    很抱歉打擾你囉~@@

    回覆刪除
  29. 不會打擾啊,程式碼有所謂的巢狀結構部份,就是層層包裹的語法,如果不是很清楚,常會碰到這種狀況,你已經改得很好了,況且我也不知道會不會有用,一切都要你自己慢慢試,加油。

    回覆刪除
  30. 對了~我最近發現一個小地方是...

    我把main-wrapper的地方加寬了.

    可是裡面文章文字的部分好像到之前的寬度就會自動切到下一行去.

    大約是在之前520px的地方吧~

    那有沒有辦法把文章的寬度設定成跟我現在設定main-wrapper的寬度一樣呢?

    我好像是把他拉到570左右吧~@@

    回覆刪除
  31. 你可以試著調整.titulo {width: 512px;
    裡面的寬度看看。

    回覆刪除
  32. 很棒的文章
    有了這些概念對一些templates不滿意想修改,就知道從哪裡下手了!
    大感謝^_^

    回覆刪除
  33. 謝謝您的鼓勵,你的文章對現代人紓解精神壓力很有益,希望看到更多有關這方面的文章,感恩。

    回覆刪除
  34. 您好,我想請問個問題,關於側欄,滑鼠移過去要變顏色!一直搞不定!
    有用了

    還是不行= =+

    也有嘗試過
    #sidebar a:hover {
    color:$hovercolor;
    }
    也是不行=口=
    關於文章本體都可以正常使用!唯獨側欄,滑鼠滑過去一直無法變顏色!請問我還有哪個地方需要檢查的呢?

    回覆刪除
  35. To WittyLearning,關於側欄,要看你的模版設定,而且如果你是使用gadget等外掛元件,那些javascript本來就有設定顏色,也無法讓你修改的,如果要用color:$hovercolor;設定,你要確定你的模板 Variable definitions裡面有定義$hovercolor這個變數,這樣顏色才能用,不然就直接設顏色#0000ff類似這樣,通常不正常,就是你找到修改的元素定義錯了,像有的是
    .sidebar .widget a:hover {
    color: #d52a33;
    每個模版都不太一樣。

    回覆刪除
  36. 謝謝..原來我果然找錯定義去修正了!已正常囉!在貴部落格中,真的讓我學習到很多XD

    回覆刪除
  37. 您好,想請教一下,
    因多年沒使用blogger,
    回來才發現界面換了,奇怪的是,
    我怎麼找也找不到把網誌標題和說明更換位置的方法,
    在<title><data:blog.pageTitle/></title>裡加<center></center>也沒用,
    最後只能在“網頁元素”裡修改標題的時候加center,
    是成功了,但在收到email通知或無法用程式顯示的頁面時,
    center的字眼還是會跑出來,網路上也找不到相關資訊,不知能否冒昧請教呢?謝謝!

    回覆刪除
  38. 如果不想用新介面,可以在修改html,按下"版面配置範本 (2006 年推出)選取版面配置範本"這個連結,就會恢復舊版,至於新版修改也是要針對CSS來修改,每個模版配置都不太一樣,不過像.Header h1,大概就是指部落格標題,要置中語法就是text-align: center;不是你說的在前後加center的方式,如果是網頁元素,大概是找到.widget這區,然後加上.widget .title {
    text-align: center;
    }
    這個語法,但是Labels和Blogarchive這兩個要改置中,目前我看了一下,還沒研究出來。

    回覆刪除
  39. 您好,不好意思想請教您
    如何做出像您部落格黑色半透明的區塊呢

    我搜尋很多文章但可能是不太懂css或放錯地方
    試了蠻多次都無效

    所以冒昧的詢問您,謝謝

    回覆刪除
  40. 我是用新版的模板,系統就有的,這篇文章寫的是舊版的,新版的可以參考 http://01mistery.blogspot.com/2010/07/background.html,其實直接利用後台的模板是最方便的。

    回覆刪除
  41. 回覆
    1. 我猜你的螢幕解析度應該是1680px,所以會有這種情況產生,跟語法沒有關係,因為你圖片最大就是只有1024px,所以會空一塊在旁邊,建議你用大於或等於1680的寬度的標頭圖片,然後在標頭設定處,勾選"縮減以符合頁面",你先試看看。

      刪除
    2. Hello綸太郎,
      謝謝你的回覆.花了我一整天好像被我設定好了!
      但是又衍伸出來兩個問題~~
      1. 標頭下方的Menu的背景橫條(灰色)為什麼都會跑上去.是因為我將header height從120px設為340px所以將我的Menu往下移嗎?要如何設定回到原先的位置呢?我試過調整header和outer的padding,但都沒用><
      2.我的footer明顯與header和outer的寬度不同.這要怎麼設定才會使整個欄框才會相同?我真的快被這兩個問題搞瘋了,希望你能抽空回覆!祝你有個愉快的一天!

      刪除
    3. 那個你的網址刪除了,沒辦法幫你看,最近比較忙,可能回覆會慢一些。

      刪除
  42. 請問 blogger沒有留言框 怎麼突然不見了 模組也換原本的了 依樣沒有....
    後臺設定也有打開阿~
    像這樣
    http://sjoephotography.blogspot.tw/
    麻煩了

    回覆刪除
    回覆
    1. 後台版面設定,網誌文章裡面的"張貼頁面選項" 的意見是不是沒有勾選

      刪除
  43. 就是有勾才邪門......
    我又重新創一個網誌試看看 結果是正常的
    把兩個都對比,設定一模一樣原本的就是沒有留言框....
    總不會又要搬一次網誌吧.....
    請問還有甚麼方法可以解決嗎???

    回覆刪除
    回覆
    1. 先備份原始html,然後進入後台,
      範本→編輯 html→將迷你組件範本回復為預設值,再儲存
      看看有沒有效,沒效的話,我也無解了。
      應該是你換模組時,有衝突被移除了,除非你跟原始模版一行一行對,找出遺失的部分html,但這工作很麻煩就是了。

      刪除
  44. 哀~算了,我用一個內建全新的模組貼進去,神奇的是.....也依樣><
    只好再重新申請一個新的網誌了....反正也從無名搬過來
    謝謝你喔^^

    回覆刪除
  45. 請問為何我的部落格顯示的你貼圖的這 "整個網頁" 區塊重複出現兩次,要怎麼修改CSS才能正常? 先謝謝你的幫忙了..

    回覆刪除
    回覆
    1. 請提供部落格網址,不然我也不知你的問題在哪?

      刪除
  46. 您好,我想請問要用什麼方式?才能像你的首頁也就是每篇文章有個清楚的隔開來,感覺比較清爽

    回覆刪除
    回覆
    1. 我只是選了Simple這個模版,配合自行調色,沒有用特殊的語法,你可以在進階→文章頁尾,選擇較深的背景顏色來調整,如果你是淺色的背景的話。

      刪除
  47. 您好,想請問一個問題
    剛從yahoo blog搬到blogger
    我試著從google 用部落格名稱或文章標題搜尋
    搜尋到的只有以前在yahoo的文章
    blogger 上的一篇也沒出現,請問為什麼是這種情況呢?(好大的疑惑呀= =)

    回覆刪除
    回覆
    1. 有開啟,後台→設定→隱私權,讓搜尋引擎來尋找您的網誌?
      然後等個一個月吧,沒那麼快的

      刪除
  48. 請問為何我的背景圖突然禁止顯示了? 請看看可否解決, 謝謝!

    回覆刪除
  49. 我的網址是bestmoecca.blogspot.com

    回覆刪除
    回覆
    1. 你應該已經解決了,畫面看起來很正常。

      刪除

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