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 標題及內文區, 就分別定為 h2 及 h3
要修改版型, 最好先對 CSS 及 HTML 有一定的概念, 再參照 blogger 範本的配置, 這樣要自己動手改版, 就會比較輕鬆,也不怕搞爛了.
28 comments:
4/10/2008
嗯嗯..用Blogger..真的可以學到一些語法
喜歡邊搞邊學習..也很感謝skyvee提供一些教學...而且你都很熱心回答問題
從你這見識了不少東西^^....
4/10/2008
雖然在自己摸索下改東改西也改到大概知道你講的東西了，但能看見正式說明還是很高興。
多謝了。
4/10/2008
受益良多！
4/10/2008
大家客氣了, 有時候寫這些文章都是很主觀的, 角度狹隘, 但是透過大家留言提問, 反而點出原本沒注意的部分, 所以我也是跟大家學習的,當然也要回饋囉!^^
4/10/2008
恩恩，幫我打廣告很害羞，哈哈，skyvee實在還是很熱心啊啊啊，感動拉，小弟又上了一課。確實對於並不熟悉或只有了解皮毛的部落客來說，譬如矛今我早已厭倦了一般被綁住的部落，例如無x。於是鼓起莫大的勇氣跳到blogspot，然後摸索一翻到處尋找教學，大部分都是得到一知半解貼來貼去的程式碼，貼成功就算了，貼不成功也求助無門，然後剛好被我抓到一個放形浪，恩就是他了哈哈哈
4/10/2008
也是摸索下慢慢知道哪裡是哪裡 嘻嘻
好文還是要推薦一下 :D
4/10/2008
skyvee,請問版型區塊位置的CSS要去哪改阿，找了好久都找不到~"~
因為我的Sidebar區塊跑到Content下面了，想把它改到Content右邊，不然低解析度畫面進入Blog會很醜...
4/10/2008
lushnsy, #main-wrapper {}或#sidebar-wrapper{}就是囉! 你指的是800X600畫面下嗎?那是因為 main+sidebar(含margin)的寬度超過800px了,你可以調一下.
4/10/2008
沒有矛今的"鞭策",可能還在繼續'偷懶'中, 所以一定要抬出矛今的啦!小說要繼續寫哦!
雙羊,好久不見了!說到改版的毅力, 我都不及雙羊呢!可以一直try, 一直try, 直到解決為止. 最近雙羊比較少發文呢!所以看到雙羊留言, 還蠻開心的!^^
4/11/2008
hey,skyvee，辛苦啦！
雖然我是個偷懶改版面的人...
不過這篇真的是實用的好文呢！
謝謝呀！
4/11/2008
eatin, 不敢說實用, 但希望有點幫助. ^^
4/12/2008
很贊的教學, 感謝指導啊!
4/13/2008
穴居獸,別說指導啦!只是分享心得~ ^^
4/13/2008
阿阿阿! 超久沒上來了
進來看到這篇基本導引讓我嚇了一小跳
還以為我太久沒來
怎麼連結跑到很久以前的一篇文
讀了一下才發現@@"是最近寫的
嘿嘿
skyvee這篇"回歸原始"工具文
寫的很棒喔!
看了以後就會對template有比較基本的認識了!
感溫了，skyvee先生(應該是位先生XD)
PS 論壇界走久了...不太喜歡"大大"兩字，我對存有敬意的人，不用大大來形容了，見諒唷~
4/13/2008
感謝ㄍㄨㄚ的這番美言,實在不敢當啊! 其實blogger 的高手如雲,就怕寫不好,有班門弄斧之嫌,純粹是以"分享"的心態著手.也歡迎有疏漏之處,提供補充. 其實我個人是習慣以名字相稱,感覺親近些.:)
4/17/2008
很詳細的介紹,請問一下怎樣讓文章可以+-縮小放大啊,這樣才能在頁面放更多文章,由於我找不太到這樣的文章,且我想要知道怎樣改,因為我的blog的樣本想自己改,可以提供這樣子的介紹嗎
4/17/2008
你要的應該就是 繼續閱讀 的功能吧! :) 可以參考這篇文章 http://skyvee.net/2007/06/blogger-hide-fullpost.html
4/25/2008
啊！不錯不錯
這個幫了我不少
遲點等有時間
我自己設計板塊 哈哈xD
只是看到一堆的代碼
我就眼花繚亂 = =
4/25/2008
這些代碼看久了 就熟啦! XD
5/13/2008
推,感謝分享.
讚讚讚!!!!
5/13/2008
:) 謝謝你!
5/31/2008
好清楚的說明,感謝你,學到了新的東西
6/01/2008
:) 米茶,也謝謝你的留言鼓勵.
6/19/2008
真的摸了很久還是搞不懂範本的版型要如何更換?
大大請解救我這個新手!
我選了一個範本後.因為兩旁的空白太多了...
想要把中間的內文和側邊欄放大一點.
於是就在"修改HTML"修改裡面的像素.
不料怎麼修改都是失敗作!
請問大大我該在哪個區塊修改呢?
6/19/2008
其實空白太多,主要是跟解析度瀏覽有關,想調寬度,可以將 outer-wrapper 寬度設大一點,如900,而main-wrapper是你的文章區,sidebar-wrapper是你的sidebar區,如果不設sidebar的寬度,只設main-wrapper,剩下的寬度就是siebar區的
8/31/2008
8/31/2008
8/31/2008
我也嘗試著改我的CSS，我遇到幾個困難：
我把outer-wrapper寬度設大一點後，的確空白區少了。但是我想調整文章區的大小。我發現在我的CSS區裡有main-wrap1和main-wrap2，分別控制文章區的下方和上方的Rounded corners。我把那兩個連結的檔案刪除了，但是不論是文章的標題，或是內文的地方，那些虛線框和灰色實線還是沒有變動...
我不知道控制那些虛線框的CSS碼在哪，除此之外又應該如何把灰色實線改成跟底色白色的內文寬度一樣...
麻煩你幫我鑑別診斷一下...萬分謝謝~我的網站是：http://quintinyang.blogspot.com
我要留言
謝謝您願意在此分享心得, 讓文章內容更豐富.
這篇文章被引用到...