【部落格實戰】10 | 部落格版型的CSS樣式表修改 (2024年2月更新) @ 歐飛先生

部落格版型CSS樣式表的修改真的不難.jpg

(2018) 接著上一集 HTML及CSS語法入門繼續往下講。

很多人看我的部落格覺得很清爽，而且很清楚，為什麼？

一、版型寬度夠寬
三欄式我建議寬度要1280px，二欄式大概是1000px左右。

二、文字夠大
文章內文建議要15~16pt, 側邊欄要11~12pt。

三、有規律
文字大小統一，文字顏色統一，不要花花綠綠。

好，接下來我舉三個實例教你修改CSS。

【部落格實戰】10 | 部落格版型的CSS樣式表修改 (2
▲如果可以，請先到痞客邦後台→樣式管理→基本，請選擇上圖這款二欄式的版型，我當初就是用這個版型下去改的。

文字太小.jpg
▲套用版型後無論是內文或是側欄文字看起來都太小。

好，接著來看要怎麼改，我舉三個實例：側欄、內文、版型寬度。

一、側邊欄的文字太小，想要改大一點，怎麼改？

首先您要先知道側邊欄的樣式名稱，您可以用上一集教的在瀏覽器直接按F12查找CSS樣式的名稱。

另外還有一招就是參考：痞客邦模版的架構圖

【部落格實戰】10 | 部落格版型的CSS樣式表修改 (2
這張圖可以讓你很清楚的知道痞客邦樣式表(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

【部落格實戰】10 | 部落格版型的CSS樣式表修改 (2
在後台→樣式管理→CSS原始碼→搜尋.article-content (內文框架)
font-size:16pt; (文字大小改成16pt)

文字變大.jpg
▲經過以上的調整，內文及側欄文字都變大了，而且側欄的文字改成靠左了。

我的建議內文是16pt，側欄是11~12pt。

另外還有一些細部調整，例如內文行距建議是170%，文字顏色用#444，也就是深灰色，請注意文字不要用全黑，要用深灰色看起來會比較舒服。

三、版型怎麼寬度怎麼變大？
請在瀏覽器直接按F12查找內文CSS樣式的名稱為 #container

版型寬度.jpg
請在後台→樣式管理→部落格CSS原始碼→搜尋 #container
你會發現有#container1及#container2，這是因為部落格版型的CSS框架是一層包一層。
在目前的CSS樣式中，寬度是在#container2這個框架中設定
width:980px; (把寬度改成1230px)

版型寬度變大.jpg
▲我們把寬度從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 (虛線)