(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萬種理由不寫。
懶人包：部落格實戰全系列
_______________________________
*****
謝謝教學♥
感恩分享 謝謝您 功德無量
請問一下，“內文的寬度加大”，是要找什麼關鍵字呢？ 還是怎麼做，謝謝教學。
.article-content ←內文寬度的css 例如： .article-content{ width:680px; }
*****
*****
不好意思 方便問一下 怎麽換底圖和加大内文寬度？ 您的文章：我們把寬度從980px改成1230px之後，你會發現最上面的底圖不夠大，怎麼辦？ 要換底圖。 再來是內文右邊多了空白，怎麼辦？ 就是把內文的寬度加大即可。
好實用!!! 這兩天總算調整好一些細節了(ﾉ>ω<)ﾉ
加油~~~~~~~~~~~~~~~~
請問如果使用的版型不同，是不是就不適用本集教學了呢？
版型那麼多，當然不可能都一模一樣，本文只是一個範例，可以讓您參考用。
謝謝分享 :)
歡迎光臨~~~
感謝你的分享~ 想問一下"搜尋關鍵字--搜尋 #container" 這搜尋欄位去哪找呢??
在瀏覽器按 Ctrl+ F
感謝你的回覆 ^^
不客氣~~~~~
能不能教一下如何將二欄位修改為三欄位？
我建議您直接選一個三欄式的版型，再來改，這樣會比較快一點。
老實說，我今天是第九天研讀歐飛大的部落格，絕版的<活用XHTML/HTML+CSS>並不難已經從露天拍賣買到，另外幾本推薦書正在寄送路程中，再加上歐飛大的<部落格實戰系列>，我好像已經編排出來了三欄位版型，當然有不少未知細節尚未發現，歐飛大說：先求有，再求好。謝謝歐飛大。
ok，加油，真的是先求有，再求好，邊寫邊改
受用的很，謝謝歐飛大
不客氣~~~~
求解 側欄如何讓他靠右呢? 他一直卡在中間.... CSS該用什麼解決呢~? 謝謝!!!!
感謝!非常實用的文章!!受益良多! 從0開始摸索關於部落格版面的修改, 多少也有了一些頭續。 一口氣就弄了大半天 原本是用基本款三攔式來改 不過一直用不好 我最後還是使用了歐大的樣式自己微調 感謝分享
不客氣~~~~
痞客系統微調，點進文章看下面的tag標籤格式都跑掉了＝ ＝ 多了「全站熱搜」的標籤到底什麼鬼啦！真的是擾民。
確實擾民，不過我可以理解痞客邦為何要這樣做。 他們現在是把部落格往「社群」的方向推，期望建立一個痞客邦的大社群。
請問我將版型變寬後，該調的都調好了，只剩文章標題底圖，重複出現，請問要去哪裡修改？謝謝
一樣是透過css控制 (請插尋關鍵字 css 背景圖) 不過以您的情況來說，我會覺得應該直接做一張大一點的底圖給標題用，這樣比較簡單
想學習css 感謝您的分享
不客氣~~~~~
請問一下，因為痞客邦預設讓文章的前面幾行顯示在首頁上，那有沒有辦法讓文章的第一行的圖片顯示在首頁上，然後點進去文章之後就看不到第一行的圖片呢？
痞客邦沒有這個功能。 其實就算自架站我也很少看到您說的這種功能~~
請問歐飛大: 把文字加入連結網址後，文字就會變成向右對齊，在語法哪裡可以做修改?
css語法在後台可以修改。 因為你說文字加入連結網址會變成向右對齊，可以在連結的地方被設成 向右對齊了，請改成靠左對齊。 如果你真的搞不定，有一招，就是復原，復原回原來的css，因為沒道理設定連結就變成向右對齊，肯定是有哪裡被改到了
非常感謝歐飛先生清楚細心的教學，解決了 ohyeah！我會再爬您其它的文，自己慢慢改，超級感恩 ：) 祝福您撿到錢啦 XD
感謝捧場~~~
請教歐飛老師： #container3 { overflow:hidden; position:relative; width:1040px; background:#fff; -webkit-border-radius:8px; -moz-border-radius:8px; border-radius:8px; -moz-box-shadow:1px 1px 2px #aaa; -webkit-box-shadow:1px 1px 2px #aaa; box-shadow:1px 1px 2px #aaa; margin:15px auto 30px; padding:25px 0 10px; } #content { float:right; width:670px; } #links { float:left; width:200px; overflow:hidden; } 這是版面加寬之後的數值，左側欄位與內文之間的距離太寬，左側欄位的文字不夠寬，找不到語法，求破解，非常感恩您。
如果你有提供你的部落格，我直接幫你看一下會快一點 只是一連串的CSS要我看，我看不出個所以然。 請參考：https://ofeyhong.pixnet.net/blog/post/224528388
請問要怎麼改才能讓側欄像您的這樣寬？我改了之後欄側字體回復成原來的大小了，無論數值是改大改小都一樣，謝謝。
請參考：https://ofeyhong.pixnet.net/blog/post/224528388
因為沒時間修改CSS，所以一直以來都是直接套用痞客邦提供的模板，這幾年螢幕真的越來越大，看著自己的部落格的文章欄位越來越小、字也越來越小，看到快鬥雞眼了，無意間看到歐飛大大你的文章，讓我打起了精神，修改了自己的部落格版型，非常感謝你文章的加持，我現在對我的版型很滿意XD
感謝捧場~~~
謝謝歐飛老師，受益良多，但我想請問一下怎麼做出像您一樣的文章標籤？我甚至找不到我的tag要怎麼修改字型，可以請歐飛老師幫忙確認標籤嗎？謝謝你
【網友詢問】歐飛你的部落格版型是怎麼做的？ (CSS樣式表) https://ofeyhong.pixnet.net/blog/post/224528388
歐飛大大，請問一下， 請不要在寫文章時「直接在編輯區調整文字大小」， 文字大小請統一在後台調整CSS。 如果已經在編輯區調整過文字大小呢？ 有些之前的文章文字比較小， 這樣子要怎麼統一調整？謝謝！ 目前在試著調整版型中。
沒辦法，我的建議是這樣，重新編輯。 也就是整個複製，然後貼上「純文字」 重來。
歐大，請教一下，側欄那些由痞客邦提供的圖片，要加入什麼參數才能讓它置中呢？謝謝~
可以截個圖嗎？ 這樣比較清楚 請直接Google 「css 圖片置中」這樣就有語法了 但我猜你可能是需要底圖的置中，或是圖片的精準定位 底圖的話，請捜底圖的語法 精準定位，關鍵字就是「 css 絕對位置」
歐大您好，我說的側欄圖片就像你的部落格右上「社群金點賞」那樣，我已經用FB把我的截圖傳給您看了~
你跟我不熟喔 我已經三年沒有打開FB私訊了，我不敢開，排山倒海的訊息，我看不完。 但我聽懂你的意思了。 如果只是問「社群金點賞」，這個沒辦法用語法，只能用空格去「純手工」調整一下 https://shunnien.github.io/2017/06/03/html-nbsp-emsp-emsp-difference/
我知道歐大不太看FB私訊，以電子郵件為主，但我還真不知道歐大已經3年沒開FB私訊了~XD 謝謝歐大的回答，我了解了~
Fb私訊，我看了也沒用，因為不能回 一回沒完沒了，而且我也回不完~ 所以我目前都是只回部落格留言及EMAIL。
請問一下，你部落格的部落格大標題下方有 關於我、開箱&選購、電腦組裝、電腦維修、教學文章....等等 這些按鈕，我該要怎麼樣Google關鍵字才能找到這些語法?
https://ofeyhong.pixnet.net/blog/post/222959223
謝 歐飛大，使用後讓一般的版型已改進些 看來順眼了不少
歡迎光臨~~加油
您好，部落格橫幅圖片靠左，請問要怎麼將圖片變成置中?
從後台的css中調整 說明：https://ofeyhong.pixnet.net/blog/post/224691945
謝謝分享
歡迎光臨~~~
感謝教學。我做好我的版型了，但是我"內文寬度要加寬"那裏還是找不到怎麼修改。我在後台輸入.article-content之後找不到width，我就自己輸入再加上:1000px;(先放大確定有變化後再調整)但是寬度一直都沒有變動，我再找時間查CSS語法教學看是哪裡出錯了。謝謝!
建議用痞客邦的新版型 https://ofeyhong.pixnet.net/blog/post/225242647 這樣會比較快一點 您要自己改版型也行，但就是要花點時間慢慢試
你好，我就是用基本款下去小改的，字大一點，置中或靠左，，，謝謝~
OK，總之要花點時間 慢慢試
謝謝分享
不客氣~~~~~
請問如果是用版面欄位快速設定，他的簡介只能顯示短短的一行，應該怎麼處理呢?
「版面欄位快速設定」只是一個簡單初步的設定 如果您希望能「自由設定」，那就是要直接修改部落格版型的「CSS原始碼」才行 我也是都直接修改CSS原始碼的
您好，我想請問一下，最近內文點進去發現在標題下方會有"你可能感興趣的話題"這種廣告出現，請問有什麼語法可以移除嗎? 謝謝
簡單講就是要到後台的CSS中，把你不想要看到的欄位隱藏 語法是：display : none; 但你先找到你想隱藏的欄位是什麼#名字 以上如果還是搞不懂，請搜：痞客邦 「你可能會有興趣的文章」隱藏 ，就有教學了 多說一句，你的部落格的字，太小了，改大一點，一樣是到CSS中改 搜一下，教學很多
感謝歐大撥空回覆~我有尋找想隱藏的欄位名字，但並不是「你可能會有興趣的文章」，這個我之前有搜尋到，而是「你可能感興趣的話題」 這東西最近我才注意到，以前好像沒有。是在我首頁點進去文章、觀看單篇文章內文的時候，他會直接遮住我的文章標題，然後下面跑出一行: 「會員福利 - 輕鬆創業當老闆：資深品牌顧問免費預約，線上洽談，省時又省力！」之類的廣告。 然後我在CSS語法裡面，雖然能夠調整首頁每篇文章標題、空白、字高等，但從部落格首頁進入「單篇文章」以後，一直找不到怎麼去調整標題跟字高，我會再試看看要怎麼去處理這問題，可能只有我找不到~先謝謝歐大
我知道你的意思，有一位欄位你不想讓它出現 怎麼辦? 答：找到那個欄位的名稱(在瀏覽器按F12)，然後設定隱藏即可，我就是這樣設定的 請參考：https://ofeyhong.pixnet.net/blog/post/224528388