(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萬種理由不寫。
懶人包：部落格實戰全系列
感謝歐大撥空回覆~我有尋找想隱藏的欄位名字，但並不是「你可能會有興趣的文章」，這個我之前有搜尋到，而是「你可能感興趣的話題」
這東西最近我才注意到，以前好像沒有。是在我首頁點進去文章、觀看單篇文章內文的時候，他會直接遮住我的文章標題，然後下面跑出一行: 「會員福利 – 輕鬆創業當老闆：資深品牌顧問免費預約，線上洽談，省時又省力！」之類的廣告。
然後我在CSS語法裡面，雖然能夠調整首頁每篇文章標題、空白、字高等，但從部落格首頁進入「單篇文章」以後，一直找不到怎麼去調整標題跟字高，我會再試看看要怎麼去處理這問題，可能只有我找不到~先謝謝歐大
我知道你的意思，有一位欄位你不想讓它出現
怎麼辦?
答：找到那個欄位的名稱(在瀏覽器按F12)，然後設定隱藏即可，我就是這樣設定的
請參考：https://ofeyhong.com/12224528388/
您好，我想請問一下，最近內文點進去發現在標題下方會有”你可能感興趣的話題”這種廣告出現，請問有什麼語法可以移除嗎? 謝謝
簡單講就是要到後台的CSS中，把你不想要看到的欄位隱藏
語法是：display : none;
但你先找到你想隱藏的欄位是什麼#名字
以上如果還是搞不懂，請搜：痞客邦 「你可能會有興趣的文章」隱藏 ，就有教學了
多說一句，你的部落格的字，太小了，改大一點，一樣是到CSS中改
搜一下，教學很多
請問如果是用版面欄位快速設定，他的簡介只能顯示短短的一行，應該怎麼處理呢?
「版面欄位快速設定」只是一個簡單初步的設定
如果您希望能「自由設定」，那就是要直接修改部落格版型的「CSS原始碼」才行
我也是都直接修改CSS原始碼的
謝謝分享
不客氣~~~~~
你好，我就是用基本款下去小改的，字大一點，置中或靠左，，，謝謝~
OK，總之要花點時間 慢慢試
感謝教學。我做好我的版型了，但是我”內文寬度要加寬”那裏還是找不到怎麼修改。我在後台輸入.article-content之後找不到width，我就自己輸入再加上:1000px;(先放大確定有變化後再調整)但是寬度一直都沒有變動，我再找時間查CSS語法教學看是哪裡出錯了。謝謝!
建議用痞客邦的新版型
https://ofeyhong.com/12225242647/
這樣會比較快一點
您要自己改版型也行，但就是要花點時間慢慢試
謝謝分享
歡迎光臨~~~
您好，部落格橫幅圖片靠左，請問要怎麼將圖片變成置中?
從後台的css中調整
說明：https://ofeyhong.com/12224691945/
謝 歐飛大，使用後讓一般的版型已改進些
看來順眼了不少
歡迎光臨~~加油
請問一下，你部落格的部落格大標題下方有
關於我、開箱&選購、電腦組裝、電腦維修、教學文章….等等
這些按鈕，我該要怎麼樣Google關鍵字才能找到這些語法?
https://ofeyhong.com/12222959223/
我知道歐大不太看FB私訊，以電子郵件為主，但我還真不知道歐大已經3年沒開FB私訊了~XD
謝謝歐大的回答，我了解了~
Fb私訊，我看了也沒用，因為不能回
一回沒完沒了，而且我也回不完~
所以我目前都是只回部落格留言及EMAIL。
歐大您好，我說的側欄圖片就像你的部落格右上「社群金點賞」那樣，我已經用FB把我的截圖傳給您看了~
你跟我不熟喔
我已經三年沒有打開FB私訊了，我不敢開，排山倒海的訊息，我看不完。
但我聽懂你的意思了。
如果只是問「社群金點賞」，這個沒辦法用語法，只能用空格去「純手工」調整一下
https://shunnien.github.io/2017/06/03/html-nbsp-emsp-emsp-difference/
歐大，請教一下，側欄那些由痞客邦提供的圖片，要加入什麼參數才能讓它置中呢？謝謝~
可以截個圖嗎？ 這樣比較清楚
請直接Google 「css 圖片置中」這樣就有語法了
但我猜你可能是需要底圖的置中，或是圖片的精準定位
底圖的話，請捜底圖的語法
精準定位，關鍵字就是「 css 絕對位置」
歐飛大大，請問一下，
請不要在寫文章時「直接在編輯區調整文字大小」，
文字大小請統一在後台調整CSS。
如果已經在編輯區調整過文字大小呢？
有些之前的文章文字比較小，
這樣子要怎麼統一調整？謝謝！
目前在試著調整版型中。
沒辦法，我的建議是這樣，重新編輯。
也就是整個複製，然後貼上「純文字」 重來。
謝謝歐飛老師，受益良多，但我想請問一下怎麼做出像您一樣的文章標籤？我甚至找不到我的tag要怎麼修改字型，可以請歐飛老師幫忙確認標籤嗎？謝謝你
【網友詢問】歐飛你的部落格版型是怎麼做的？ (CSS樣式表)
https://ofeyhong.com/12224528388/
因為沒時間修改CSS，所以一直以來都是直接套用痞客邦提供的模板，這幾年螢幕真的越來越大，看著自己的部落格的文章欄位越來越小、字也越來越小，看到快鬥雞眼了，無意間看到歐飛大大你的文章，讓我打起了精神，修改了自己的部落格版型，非常感謝你文章的加持，我現在對我的版型很滿意XD
感謝捧場~~~
請問要怎麼改才能讓側欄像您的這樣寬？我改了之後欄側字體回復成原來的大小了，無論數值是改大改小都一樣，謝謝。
請參考：https://ofeyhong.com/12224528388/
請教歐飛老師：
#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.com/12224528388/