2008/04/09

Blogger 版型CSS Layout 簡介




Blogger 雖然介面陽春, 卻提供很大的擴充彈性,加上網路資源豐富,找資料,與人討論都不難. 如果想一步一腳印,打造一個具個人化的部落格, blogger 是一個不錯的選擇.




單車愛上巧克力矛今建議說明一下blogger的版型.這其實是個好主意, 對想自習修改 blogger 的人而言, 有個參照或許可以省一點摸索工夫. 不過目前 blogger template 很多, 有些名稱會有出入 , 就以blogger 內建的 Minima 範本, 簡略介紹一下.

Blogger 版型基本上可大略分為 header,Content,Sidebar,Footer 等四區塊.或許有些版本的template, 可能命名不大相同, 可找一下相對位置.



1.決定部落格版型的CSS區, 就位在 <head></head> 之間, 由 <b:skin></b:skin>包住的區塊.如<head>
<b:include data='blog' name='all-head-content'/>
<title><data:blog.pageTitle/></title>
<b:skin><![CDATA[/*

CSS 程式碼區

]]></b:skin>


想要修改CSS程式碼 ,就可以加在這一區.

如果想加入java script, 可以放在]]></b:skin>之後.

2. 首先介紹 header 的 CSS 程式碼



CSS區, 決定 header 圖片及標題的程式碼大約如下,
#header-wrapper{
background: url(http://圖片網址) no-repeat;
height:XX px; /* 高度 */
width:XX px; /* 寬度 */
}


其他架構通常會定義寬度, 對齊等格式,如
#outer-wrapper{ /* 外層 */
width: 900 px;
float: left;
margin:0 auto;
padding:10px;
}
#main-wrapper { /* 內文 */
程式碼
}
#sidebar-wrapper { /* 側邊欄 */
程式碼
}
#footer-wrapper { /* 表尾 */
程式碼
}


3. 在各區塊中, 會再分別定義細節,列出幾個說明.(僅部份節錄, 並非完整).
/* Headings
-----------------------------------------------
*/
h2 { /* 定義表頭的字體大小 */
margin:1.5em 0 .75em;
font:$headerfont;
line-height: 1.4em;
text-transform:uppercase;
letter-spacing:.2em;
color:$sidebarcolor;
}
/* Posts
-----------------------------------------------
*/
h2.date-header { /* 文章的發表時間 */
margin:1.5em 0 .5em;
}
.post { /* 文章區的格式*/
margin:.5em 0 1.5em;
border-bottom:1px dotted $bordercolor;
padding-bottom:1.5em;
}
post h3 { /* 內文的字體大小*/
margin:.25em 0 0;
padding:0 0 4px;
font-size:140%;
font-weight:normal;
line-height:1.4em;
color:$titlecolor;
}
.post h3 a, .post h3 a:visited {/* 文章區連結的格式*/
display:block;
text-decoration:none;
color:$titlecolor;
font-weight:normal;
}
/* Comments
----------------------------------------------- */
#comments h4 { /* 回應區字體大小*/
margin:1em 0;
font-weight: bold;
line-height: 1.4em;
text-transform:uppercase;
letter-spacing:.2em;
color: $sidebarcolor;
}
/* Sidebar Content
----------------------------------------------- */
.sidebar { /* 側邊欄格式*/
color: $sidebartextcolor;
line-height: 1.5em;
}


4.字體大小可使用 HTML 內定標籤(<h1> ~ <h6>, 數字愈小, 字愈大)

舉例來說, 如文章的發表時間定為 h2, 文章標題為 h1, 內文為 h3, 效果就像這樣.


sidebar 標題及內文區, 就分別定為 h2h3


修改版型, 最好先對 CSSHTML 有一定的概念, 再參照 blogger 範本的配置, 這樣要自己動手改版, 就會比較輕鬆,也不怕搞爛了.

相關文章 :

32 comments:

木白柏 提到...

嗯嗯..用Blogger..真的可以學到一些語法
喜歡邊搞邊學習..也很感謝skyvee提供一些教學...而且你都很熱心回答問題
從你這見識了不少東西^^....

毛毛牙 提到...

雖然在自己摸索下改東改西也改到大概知道你講的東西了,但能看見正式說明還是很高興。

多謝了。

艾莉兒 提到...

受益良多!

Skyvee 提到...

大家客氣了, 有時候寫這些文章都是很主觀的, 角度狹隘, 但是透過大家留言提問, 反而點出原本沒注意的部分, 所以我也是跟大家學習的,當然也要回饋囉!^^

γειισω (矛今) 提到...

恩恩,幫我打廣告很害羞,哈哈,skyvee實在還是很熱心啊啊啊,感動拉,小弟又上了一課。確實對於並不熟悉或只有了解皮毛的部落客來說,譬如矛今我早已厭倦了一般被綁住的部落,例如無x。於是鼓起莫大的勇氣跳到blogspot,然後摸索一翻到處尋找教學,大部分都是得到一知半解貼來貼去的程式碼,貼成功就算了,貼不成功也求助無門,然後剛好被我抓到一個放形浪,恩就是他了哈哈哈

雙羊 提到...

也是摸索下慢慢知道哪裡是哪裡 嘻嘻

好文還是要推薦一下 :D

Lushnsy 提到...

skyvee,請問版型區塊位置的CSS要去哪改阿,找了好久都找不到~"~
因為我的Sidebar區塊跑到Content下面了,想把它改到Content右邊,不然低解析度畫面進入Blog會很醜...

Skyvee 提到...

lushnsy, #main-wrapper {}或#sidebar-wrapper{}就是囉! 你指的是800X600畫面下嗎?那是因為 main+sidebar(含margin)的寬度超過800px了,你可以調一下.

Skyvee 提到...

沒有矛今的"鞭策",可能還在繼續'偷懶'中, 所以一定要抬出矛今的啦!小說要繼續寫哦!

雙羊,好久不見了!說到改版的毅力, 我都不及雙羊呢!可以一直try, 一直try, 直到解決為止. 最近雙羊比較少發文呢!所以看到雙羊留言, 還蠻開心的!^^

Eatin 提到...

hey,skyvee,辛苦啦!
雖然我是個偷懶改版面的人...
不過這篇真的是實用的好文呢!
謝謝呀!

Skyvee 提到...

eatin, 不敢說實用, 但希望有點幫助. ^^

穴居獸 提到...

很贊的教學, 感謝指導啊!

Skyvee 提到...

穴居獸,別說指導啦!只是分享心得~ ^^

ㄍㄨㄚ 提到...

阿阿阿! 超久沒上來了
進來看到這篇基本導引讓我嚇了一小跳
還以為我太久沒來
怎麼連結跑到很久以前的一篇文


讀了一下才發現@@"是最近寫的
嘿嘿


skyvee這篇"回歸原始"工具文
寫的很棒喔!
看了以後就會對template有比較基本的認識了!

感溫了,skyvee先生(應該是位先生XD)

PS 論壇界走久了...不太喜歡"大大"兩字,我對存有敬意的人,不用大大來形容了,見諒唷~

skyvee 提到...

感謝ㄍㄨㄚ的這番美言,實在不敢當啊! 其實blogger 的高手如雲,就怕寫不好,有班門弄斧之嫌,純粹是以"分享"的心態著手.也歡迎有疏漏之處,提供補充. 其實我個人是習慣以名字相稱,感覺親近些.:)

Chiajeng Lee 提到...

很詳細的介紹,請問一下怎樣讓文章可以+-縮小放大啊,這樣才能在頁面放更多文章,由於我找不太到這樣的文章,且我想要知道怎樣改,因為我的blog的樣本想自己改,可以提供這樣子的介紹嗎

skyvee 提到...

你要的應該就是 繼續閱讀 的功能吧! :) 可以參考這篇文章 http://skyvee.net/2007/06/blogger-hide-fullpost.html

LucKy☆sTaR 提到...

啊!不錯不錯
這個幫了我不少
遲點等有時間
我自己設計板塊 哈哈xD

只是看到一堆的代碼
我就眼花繚亂 = =

Skyvee 提到...

這些代碼看久了 就熟啦! XD

079 提到...

推,感謝分享.
讚讚讚!!!!

Skyvee 提到...

:) 謝謝你!

米茶 提到...

好清楚的說明,感謝你,學到了新的東西

skyvee 提到...

:) 米茶,也謝謝你的留言鼓勵.

老凱 提到...

真的摸了很久還是搞不懂範本的版型要如何更換?
大大請解救我這個新手!
我選了一個範本後.因為兩旁的空白太多了...
想要把中間的內文和側邊欄放大一點.
於是就在"修改HTML"修改裡面的像素.
不料怎麼修改都是失敗作!
請問大大我該在哪個區塊修改呢?

skyvee 提到...

其實空白太多,主要是跟解析度瀏覽有關,想調寬度,可以將 outer-wrapper 寬度設大一點,如900,而main-wrapper是你的文章區,sidebar-wrapper是你的sidebar區,如果不設sidebar的寬度,只設main-wrapper,剩下的寬度就是siebar區的

Quintin 提到...
作者已經移除這則留言。
Quintin 提到...
作者已經移除這則留言。
Quintin 提到...

我也嘗試著改我的CSS,我遇到幾個困難:

我把outer-wrapper寬度設大一點後,的確空白區少了。但是我想調整文章區的大小。我發現在我的CSS區裡有main-wrap1和main-wrap2,分別控制文章區的下方和上方的Rounded corners。我把那兩個連結的檔案刪除了,但是不論是文章的標題,或是內文的地方,那些虛線框和灰色實線還是沒有變動...

我不知道控制那些虛線框的CSS碼在哪,除此之外又應該如何把灰色實線改成跟底色白色的內文寬度一樣...

麻煩你幫我鑑別診斷一下...萬分謝謝~我的網站是:http://quintinyang.blogspot.com

Skyvee 提到...

針對以下這則留言(好像已被留言者刪除)回覆.
=========================
版大你好 小弟請教

小弟的部落格所用的範本:2006年 Blogger「Rounders 2」
為何貼圖會產生灰框呢?
同樣的貼圖語法在xuite與無名都不會..
請教該如何解決?勞請解惑..謝謝!
=============================================

貼圖時,如果出現灰框,可以修改您的範本裡對貼圖的CSS設定.
請找到 img, table.tr-caption-container {
margin-top:0;
margin-$endSide:0;
margin-bottom:5px;
margin-$startSide:0;
padding:4px;
border:1px solid $borderColor;
}
將最後一行改為
border:none;
應該就不會出現了.

匿名 提到...

謝謝!!圖片的灰框不見了...

匿名 提到...

請問超連結底線要如何隱藏或者移除呢?

skyvee 提到...

您好,
在 a:link {XXX}裡, 加入
text-decoration:none;
就可以了.

張貼留言

謝謝您願意在此分享心得, 讓文章內容更豐富.