碎碎念：

• 已經很長時間沒有更新過博客了，分析一下，一個是太懶了。。。所以很久沒整理一下了。
• 還有就是嫌棄博客園默認的博客界面真的太丑了，作為顏控的我真的無法忍受啊。
• 個人比較喜歡用makedown來編寫博客，但是博客園自帶的編輯器真的不是很友好啊。。。。。

還好，博客園比較人性化的有頁面樣式的自定制功能。為了裝修我的博客，斷斷續續用了3、4天的時間（效率太低了），通過參考了一些博客之后，做了一下整理。

小提示：
　　可能博客中的代碼與現在的樣式有點差異，那是因為之后有做過樣式的調整，具體代碼參考GitHub ：https://github.com/RealAndMe/blogs-style

1. 基礎介紹

1-1. 介紹一下我的博客設置

我個人比較習慣用 Makedown 來編寫，所以我選擇的編輯器是 Makedown，在 [ 管理 ] - [ 選項 ] 中可以設置。

在 [ 管理 ] - [ 模版 ] 中有許多博客模板，可以直接使用，界面也會變好看一點。我使用的是 red_autumnal_leaves （紅葉）

因為我的樣式定制是在紅葉的模版基礎上進行修改的，所以可能其他的模版會出現兼容的問題，這個可以根據自己的模版和喜好進行修改。（我已經盡量做到樣式兼容了，但是模版太多，心有余而力不足啊。。。）

1-2. 簡單的操作

可以通過審查元素的方法，來設置自己滿意的樣式。操作是F12。
F12操作可以打開控制面板，具體的樣式可以直接在上面修改，然后把修改后的樣式保存下來。

保存后的樣式，復制到[ 管理 ] - [ 設置 ] - 頁面定制CSS代碼上面，然后[ 保存 ]

注意：
有時候修改的樣式沒有起作用，是因為樣式的優先級的原因，這里我選擇簡單粗暴的!important來解決

2. 設置標題、子標題、導航欄

2-1. 標題和子標題

標題和子標題 是頁面最頂部的，設置在 [ 管理 ] - [ 設置 ] - 標題，子標題

/* 博客標題和副標題 */ #blogTitle {overflow: hidden;height: auto;text-align: center; }#blogTitle h1 {font-size: 35px;width: 100%;margin-left: 0; }#blogTitle h2 {margin-left: 0;width: 100%;font-size: 20px;font-weight: bold;color: #000; }

2-2. 博客頂部的導航欄

/*博客導航欄 */ #navList {float: left; }#navList li {border: none;font-size: 16px; }.blogStats {display: none; }

３. 設置博客側邊欄

3-1. 側邊欄整體公共樣式

/*sideBar博客側邊欄容器*/ #sideBar {width: 300px;box-sizing: border-box;margin-left: 30px;padding: 0; }.newsItem, .catListComment, .catListEssay, .catListView, .catListFeedback, #blog-calendar, #sidebar_postcategory, #sidebar_postcategory, #sidebar_postarchive, #sidebar_search {/*側邊欄每一模塊添加圓角和陰影*/border-radius: 10px;box-shadow: 1px 2px 3px #A7A8AD;background-color: #fff; }#sideBarMain h3, .newsItem h3 {/*側邊欄每個模塊的標題部分*/font-size: 1.2em;height: 50px;line-height: 50px;text-indent: 0.5em;background: url(http://www.cnblogs.com/skins/red_autumnal_leaves/images/titlebg.png) no-repeat left center #fff;padding: 0 0 0 50px;margin-bottom: 0;border: 1px solid #55895B;border-left-width: 5px;border-radius: 10px;border-right-width: 5px; }/*側邊欄列表樣式*/ #sideBarMain ul {background-color: #fff;padding: 15px 20px;border-bottom-left-radius: 10px;border-bottom-right-radius: 10px; }#sideBarMain li {line-height: 40px;border-bottom: 1px solid #ddd;font-size: 14px; }

3-2. 側邊欄公告

3-3. 頭像設置

在 [ 管理 ] - [ 設置 ] - 博客側邊欄公告 這里添加 html 代碼，用來添加頭像，地址用自己的頭像

//圖片的地址更換成你的頭像的地址 <img src="https://cnblogspic.oss-cn-hangzhou.aliyuncs.com/avatar/937605/20180122200140.png">

3-4. 側邊欄公告樣式

/*側邊欄公告*/ #blog-news > img {/*頭像*/display: block;margin: auto;border-radius: 50%; }#profile_block {font-size: 15px;padding: 20px;line-height: 1.8; }#profile_block > a:link {color: #F60; }/*公告結束*/

3. 側邊欄日歷

/* 日歷 */ #blog-calendar, #calendar {width: 300px; }#blog-calendar td {padding: 5px 3px;font-size: 14px; }#blog-calendar td a {font-weight: bold;color: #59a020; }#blog-calendar table a:hover {color: #59a020;text-decoration: underline;background: transparent; }#blog-calendar table u {text-decoration: none; }/*日歷結束*/

4. 側邊欄搜索框

/*側邊搜索框*/ .mySearch {padding-bottom: 10px; }.mySearch > div {padding-top: 10px }.mySearch #q {height: 40px;width: 150px;border-radius: 5px;border: 1px solid #ddd; }.mySearch #btnZzk {height: 42px;width: 90px;background: #fd6d0dd1;color: #fff;border-radius: 5px;border: none;font-size: 15px;cursor: pointer; }.div_my_zzk {padding: 0 20px;display: flex;justify-content: space-around; }/*搜索框結束*/

４. 評論列表

碎碎念：

因為我更新博客的頻率很少，而且質量還不是很高，所以評論也就很少。。。所以目前的評論列表樣式是這樣的，如果之后有更多的評論，那么還會繼續修改樣式的，畢竟我是一個顏控啊！！
　　

4-1. 底部評論表

/*評論*/ /*評論列表*/ #blog-comments-placeholder {border-radius: 10px;background: #fff;padding: 30px 40px; }.feedback_area_title {background: url(//www.cnblogs.com/skins/red_autumnal_leaves/images/titlebg.png) no-repeat left center #fff;border: 1px solid #55895B;border-left-width: 5px;border-radius: 10px;border-right-width: 5px;padding: 15px 50px; } /* 提交評論按鈕 */ #btn_comment_submit {border: solid 1px #fd6d0dd1 !important;width: 90px;height: 40px;color: #fff !important;background-color: #fd6d0dd1 !important;border-radius: 5px;font-size: 16px;cursor: pointer; }

4-2. 側邊欄評論

/*側邊評論*/ li.recent_comment_body {line-height: 30px; }

5. 個性簽名

個性簽名 這個是根據個人的喜好設置的，可以在 [ 管理 ] - [ 設置 ] - [ 博客簽名 ] 里面自定義設置。下面展示我的個性簽名的設置。

/* 個性簽名 */ #MySignature {box-shadow: 8px 1px 10px #989898;padding: 10px;text-shadow: 1px 1px 1px #FFF;font-size: 17px;border-left: solid 5px #55895B;background: #F3F3F3;border-radius: 10px 10px 50% 10px;line-height: 2.4;margin: 40px 0; }#MySignature a {text-decoration: none;color: #4183c4;font-weight: bold; }#MySignature a:hover {text-decoration: underline;color: #f60; }#MySignature span {color: #f60; }

6. 博客文章主體樣式

/* 標題title樣式 */ #topics .postTitle {font-size: 25px;padding: 0 40px;border: none;box-sizing: border-box; }#cb_post_title_url {border: 1px solid #55895B;border-left-width: 5px;border-radius: 10px;border-right-width: 5px;background-position: left center;padding: 15px 50px;width: 100%;display: inline-block;box-sizing: border-box; } /*設置背景色和字體大小*/ body {font-size: 15px;box-sizing: border-box; } /*mainContent主體內容容器*/ #main {display: flex;width: 95%; }#mainContent .forFlow {margin: 0 0 0 310px; }#mainContent {margin: 0 0 0 -310px; }#post_detail {overflow: hidden; } /* 主體內容樣式 */ .postBody {padding: 20px 40px; }#cnblogs_post_body {font-size: 15px; }#cnblogs_post_body h2 {//標題h2border-left: 5px solid #55895B;padding: 10px 20px;line-height: 2;background: #d6dbdf8a;margin: 30px 0; }#topics .postDesc {display: none; }

7. 其他部分的樣式

/* 關注收藏等幾個按鈕 */ #green_channel {padding: 10px;margin: 20px 0;font-size: 15px;width: 400px; }#green_channel a {border-radius: 3px;text-shadow: none;font-weight: normal;box-shadow: none; } /* 禁用下劃線 */ .postBody a:link, .postBody a:visited, .postBody a:active {text-decoration: none; }/* 上一篇下一篇 */ #post_next_prev {font-size: 14px;color: #535353; } /*底部隱藏作者，隱藏推薦和反對*/ #author_profile {display: none; }#div_digg {display: none; }/*隱藏廣告*/ #ad_t2, #cnblogs_c1, #under_post_news, #cnblogs_c2, #under_post_kb {display: none; }

轉載于:https://www.cnblogs.com/real-me/p/8336741.html

總結

以上是生活随笔為你收集整理的博客园自定义样式的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。