隨手記錄

【CSS】- PIXNET 痞客邦部落格文章格式 - 行距|字距|段落間距 - 如何修改？

若想讓自己的部落格依照自己想要的方式呈現，或基於容易閱讀的方面去思考。其作法為『部落格後台-->樣式管理-->部落格CSS原始碼』

然後按「Alt + F」尋找黃色的關鍵字，並依照下面紅字註解的地方去修改即可。

目前整理個人有用到的地方，較詳細的說明可參考  靜茉帕然部落格的文章

★調整文章的行距、字體、左右間距

.article-body{
margin: 10px 0;
}
.article-body a{color:#369;}
.article-body a:hover{color:#91b8c1;}
.article-content{
margin: 15px;
font-size:13px;               /*字體*/
line-height: 170%;         /*行距*/
letter-spacing:0.05em;   /*左右間距*/
color:#444;
}

★調整文章內文的邊緣寬度

.article-body{
margin: 10px 0;
}
.article-body a{color:#369;}
.article-body a:hover{color:#91b8c1;}
.article-content{
margin: 15px;   /*內文的上緣。 要調整左右，則加上margin-right : 15px;    margin-left : 15px ;  */
font-size:13px;               
line-height: 170%;         
letter-spacing:0.05em;   
color:#444;
}

★調整段落間距

.article-content p
{
margin-bottom: 1em;   /*    */
} 

★調整版面留言、人氣、個人分類等相關訊息

body {
font-size:12px; /*這是修改版面的字體 */
font-family:微軟正黑體,Times New Roman,arial, Century Gothic;
line-height: 160%;
}

即下面News123發表在....... 及其下一行 個人分類 所要顯示的資訊樣式

延伸閱讀

• 【CSS】- PIXNET 痞客邦部落格文章格式 - 行距|字距|段落間距 - 如何修改？
• 【CSS】- PIXNET 痞客邦部落格版面大小調整
• 【CSS】- PIXNET 痞客邦引用外部相片 - 相簿空間不足時
• 【CSS】- PIXNET 痞客邦部落格 各種格式範例 - 框線
• 【CSS】- PIXNET 痞客邦部落格 - 側欄調整
• 【CSS】- PIXNET 痞客邦部落格 - 繼續閱讀 - 如何修改？
• 【CSS】- PIXNET 痞客邦部落格 - 下拉選單
• 【CSS】- PIXNET 痞客邦部落格 - 各區塊名稱|板面修改