(2018) 接著上一集 HTML及CSS語法入門教學 繼續往下講。
很多人看我的部落格覺得很清爽，而且很清楚，為什麼？
一、版型寬度夠寬
三欄式我建議寬度要1280px，二欄式大概是1000px左右。
二、文字夠大
文章內文建議要15~16pt, 側邊欄要11~12pt。
三、有規律
文字大小統一，文字顏色統一，不要花花綠綠。
好，接下來我舉三個實例教你修改CSS。
▲如果可以，請先到痞客邦後台→樣式管理→基本，請選擇上圖這款二欄式的版型，我當初就是用這個版型下去改的。
▲套用版型後無論是內文或是側欄文字看起來都太小。
好，接著來看要怎麼改，我舉三個實例：側欄、內文、版型寬度。
一、側邊欄的文字太小，想要改大一點，怎麼改？
首先您要先知道側邊欄的樣式名稱，您可以用上一集教的在瀏覽器直接按F12查找CSS樣式的名稱。
另外還有一招就是參考：痞客邦模板的架構圖
這張圖可以讓你很清楚的知道痞客邦樣式表(CSS)的標籤名稱。
查看模版架構圖，側欄的標題是.box-title，內容是.box-text
後台→樣式管理→CSS原始碼→搜尋.box-title (側欄標題)
文字大小的關鍵字是font-size: (請注意要有冒號)
請改成font-size:11pt; (請注意最後要有分號)
接下來繼續改下面的.box-text (側欄內文)
找不到關鍵字 font-size: (沒關係，請自已打上去)
font-size:11pt; (請注意最後要有分號)
這樣側邊欄標題及文字就改成11pt了。
側欄文字是置中對齊，我希望是靠左對齊，
關鍵字 text-align:left; (原本是center，改成left)
二、內文的文字太小，怎麼變大？
請在瀏覽器按F12查找內文框架CSS樣式的名稱為 .article-content
在後台→樣式管理→CSS原始碼→搜尋.article-content (內文框架)
font-size:16pt; (文字大小改成16pt)
▲經過以上的調整 ，內文及側欄文字都變大了，而且側欄的文字改成靠左了。
我的建議內文是16pt，側欄是11~12pt。
另外還有一些細部調整，例如內文行距建議是170%，文字顏色用#444，也就是深灰色，請注意文字不要用全黑，要用深灰色(如#444)看起來會比較柔和不刺眼。
三、版型怎麼寬度怎麼變大？
請在瀏覽器直接按F12查找內文CSS樣式的名稱為 #container
請在後台→樣式管理→部落格CSS原始碼→搜尋 #container
你會發現有#container1及#container2，這是因為部落格版型的CSS框架是一層包一層。
在目前的CSS樣式中，寬度是在#container2這個框架中設定
width:980px; (把寬度改成1230px)
▲我們把寬度從980px改成1230px之後，你會發現最上面的底圖不夠大，怎麼辦？ 要換底圖。
再來是內文右邊多了空白，怎麼辦？ 就是把內文的寬度加大即可。
好，本集CSS修改的實例就講到這裡，要再提醒您一點，在修改CSS之前請先備份一下CSS原始碼，這樣就算你把整個版型改到崩潰了也不用怕。
接下來我給你補充一些常用的CSS語法：
文字類：
字體 font-family: Arial,”新細明體”;
大小 font-size: 16px;
顏色 color: #666;
粗體 font-weight: bold;
行高 line-height: 170%;
段距 margin-bottom: 1em;
對齊 text-align: center;
底線 text-decoration: underline; (none; 不要底線)
字距 letter-spacing: 0.2em;
位置類
寬度 width: 600px; (寬度600px)
邊界 margin-top: 20px; (上邊界留20px)
內距 padding-bottom: 20px; (下內距留20px)
框線 border: 1px solid #ccc; (實線)
dotted (點線) dashed (虛線)
背景圖片
background: url(../images/header.jpg) #fff left top repeat-x;
↑背景圖為header.jpg, 底色白色，靠左、靠上，水平重覆
顏色的色碼請參考 色碼表
文字的大小的單位，一般用pt或px皆可。
10pt = 13px
11pt = 14~15px
12pt = 16px
13pt = 17px
14pt = 18~19px
15pt = 20px
16pt = 21px
網友：我很喜歡你的版型，可以跟你買部落格的css原始碼嗎？
歐飛：我沒有賣。建議您學習CSS語法後，可以直接查找我的CSS原始碼並修改成您自己喜歡的樣式。
最後我還要補充一點，這一點也很重要：
請不要在寫文章時「直接在編輯區調整文字大小」，文字大小請統一在後台調整CSS。
好，本集就到這邊，部落格版型CSS的修改重點如上。
本部落格實戰系列最硬的，最難啃的就是這一集，這一集你只要能撐過去，後面的都很簡單了。
2025年6月更新
部落格版型CSS樣式表的修改真的不難，難得是要你重新設計一個全新的版型，這種就很難。
大原則是，你只要先把原本正常的CSS樣式表COPY備份起來，就算你改到後來整個版型都崩潰了也不用怕，你再把原本正常的CSS 復製→貼上即可。
另外你如果看到別人的部落格，有你喜歡的CSS 樣式，你直接COPY過來用也行。
總之，只是修改一下CSS樣式表真的不難，但也沒有說簡單到你完全不需要動腦。
還是那句話，只要你不懶，用點心，花點時間研究一下，網路上的教學一大堆。
不學想改CSS版型也沒關係，花錢找專人解決，幾千塊就能搞定，也不貴。
寫部落格最難的肯定不是CSS或版型的問題，最難的是，你自已要有心經營，你只要有心想寫，什麼問題都不是問題。
同理，你如果不想寫，你有1萬種理由不寫。
懶人包：部落格實戰全系列
非常感謝歐飛先生清楚細心的教學，解決了 ohyeah！我會再爬您其它的文，自己慢慢改，超級感恩 ：) 祝福您撿到錢啦 XD
感謝捧場~~~
請問歐飛大:
把文字加入連結網址後，文字就會變成向右對齊，在語法哪裡可以做修改?
css語法在後台可以修改。
因為你說文字加入連結網址會變成向右對齊，可以在連結的地方被設成 向右對齊了，請改成靠左對齊。
如果你真的搞不定，有一招，就是復原，復原回原來的css，因為沒道理設定連結就變成向右對齊，肯定是有哪裡被改到了
請問一下，因為痞客邦預設讓文章的前面幾行顯示在首頁上，那有沒有辦法讓文章的第一行的圖片顯示在首頁上，然後點進去文章之後就看不到第一行的圖片呢？
痞客邦沒有這個功能。
其實就算自架站我也很少看到您說的這種功能~~
想學習css 感謝您的分享
不客氣~~~~~
請問我將版型變寬後，該調的都調好了，只剩文章標題底圖，重複出現，請問要去哪裡修改？謝謝
一樣是透過css控制 (請插尋關鍵字 css 背景圖)
不過以您的情況來說，我會覺得應該直接做一張大一點的底圖給標題用，這樣比較簡單
痞客系統微調，點進文章看下面的tag標籤格式都跑掉了＝ ＝
多了「全站熱搜」的標籤到底什麼鬼啦！真的是擾民。
確實擾民，不過我可以理解痞客邦為何要這樣做。
他們現在是把部落格往「社群」的方向推，期望建立一個痞客邦的大社群。
感謝!非常實用的文章!!受益良多!
從0開始摸索關於部落格版面的修改,
多少也有了一些頭續。
一口氣就弄了大半天
原本是用基本款三攔式來改
不過一直用不好
我最後還是使用了歐大的樣式自己微調
感謝分享
不客氣~~~~
求解 側欄如何讓他靠右呢? 他一直卡在中間…. CSS該用什麼解決呢~? 謝謝!!!!
受用的很，謝謝歐飛大
不客氣~~~~
老實說，我今天是第九天研讀歐飛大的部落格，絕版的<活用XHTML/HTML+CSS>並不難已經從露天拍賣買到，另外幾本推薦書正在寄送路程中，再加上歐飛大的<部落格實戰系列>，我好像已經編排出來了三欄位版型，當然有不少未知細節尚未發現，歐飛大說：先求有，再求好。謝謝歐飛大。
ok，加油，真的是先求有，再求好，邊寫邊改
能不能教一下如何將二欄位修改為三欄位？
我建議您直接選一個三欄式的版型，再來改，這樣會比較快一點。
感謝你的回覆 ^^
不客氣~~~~~
感謝你的分享~
想問一下”搜尋關鍵字–搜尋 #container” 這搜尋欄位去哪找呢??
在瀏覽器按 Ctrl+ F
謝謝分享 🙂
歡迎光臨~~~
請問如果使用的版型不同，是不是就不適用本集教學了呢？
版型那麼多，當然不可能都一模一樣，本文只是一個範例，可以讓您參考用。
好實用!!! 這兩天總算調整好一些細節了(ﾉ>ω<)ﾉ
加油~~~~~~~~~~~~~~~~
不好意思 方便問一下 怎麽換底圖和加大内文寬度？
您的文章：我們把寬度從980px改成1230px之後，你會發現最上面的底圖不夠大，怎麼辦？ 要換底圖。
再來是內文右邊多了空白，怎麼辦？ 就是把內文的寬度加大即可。
請問一下，“內文的寬度加大”，是要找什麼關鍵字呢？ 還是怎麼做，謝謝教學。
.article-content ←內文寬度的css
例如：
.article-content{
width:680px;
}
感恩分享 謝謝您 功德無量
謝謝教學♥