v Blogger template模板教學課程---CSS外觀解說 >> 0 與 1 謎詭世界
★★★請勿任意轉載本站的文章及圖片但歡迎網摘及連結並註明網站名稱與網址,勿全文轉載,彼此尊重,
是網路的基本禮儀。


>
2013 曬書節 - 萬種商品49元起!

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搜尋功能

Related Posts Plugin for WordPress, Blogger...