博客園自定義樣式

ASCH 發(fā)布于2019-08-29 14:16 / 3368人閱讀

摘要：個(gè)人比較喜歡用來(lái)編寫(xiě)博客，但是博客園自帶的編輯器真的不是很友好啊。。。。。還好，博客園比較人性化的有頁(yè)面樣式的自定制功能。

碎碎念：

已經(jīng)很長(zhǎng)時(shí)間沒(méi)有更新過(guò)博客了，分析一下，一個(gè)是太懶了。。。所以很久沒(méi)整理一下了。

還有就是嫌棄博客園默認(rèn)的博客界面真的太丑了，作為顏控的我真的無(wú)法忍受啊。

個(gè)人比較喜歡用makedown來(lái)編寫(xiě)博客，但是博客園自帶的編輯器真的不是很友好啊。。。。。

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

小提示：
　　可能博客中的代碼與現(xiàn)在的樣式有點(diǎn)差異，那是因?yàn)橹笥凶鲞^(guò)樣式的調(diào)整，具體代碼參考GitHub ：https://github.com/RealAndMe/blogs-style

1. 基礎(chǔ)介紹 1-1. 介紹一下我的博客設(shè)置

我個(gè)人比較習(xí)慣用 Makedown 來(lái)編寫(xiě)，所以我選擇的編輯器是 Makedown，在 [ 管理 ] - [ 選項(xiàng) ] 中可以設(shè)置。

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

因?yàn)槲业臉邮蕉ㄖ剖窃?b>紅葉的模版基礎(chǔ)上進(jìn)行修改的，所以可能其他的模版會(huì)出現(xiàn)兼容的問(wèn)題，這個(gè)可以根據(jù)自己的模版和喜好進(jìn)行修改。（我已經(jīng)盡量做到樣式兼容了，但是模版太多，心有余而力不足啊。。。）

1-2. 簡(jiǎn)單的操作

可以通過(guò)審查元素的方法，來(lái)設(shè)置自己滿(mǎn)意的樣式。操作是F12。
F12操作可以打開(kāi)控制面板，具體的樣式可以直接在上面修改，然后把修改后的樣式保存下來(lái)。

保存后的樣式，復(fù)制到[ 管理 ] - [ 設(shè)置 ] - 頁(yè)面定制CSS代碼上面，然后[ 保存 ]

注意：
 有時(shí)候修改的樣式?jīng)]有起作用，是因?yàn)闃邮降膬?yōu)先級(jí)的原因，這里我選擇簡(jiǎn)單粗暴的!important來(lái)解決

2. 設(shè)置標(biāo)題、子標(biāo)題、導(dǎo)航欄 2-1. 標(biāo)題和子標(biāo)題

標(biāo)題和子標(biāo)題 是頁(yè)面最頂部的，設(shè)置在 [ 管理 ] - [ 設(shè)置 ] - 標(biāo)題，子標(biāo)題

/* 博客標(biāo)題和副標(biāo)題 */
#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. 博客頂部的導(dǎo)航欄

/*博客導(dǎo)航欄 */
#navList {
    float: left;
}

#navList li {
    border: none;
    font-size: 16px;
}

.blogStats {
    display: none;
}

３. 設(shè)置博客側(cè)邊欄 3-1. 側(cè)邊欄整體公共樣式

/*sideBar博客側(cè)邊欄容器*/
#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 {
    /*側(cè)邊欄每一模塊添加圓角和陰影*/
    border-radius: 10px;
    box-shadow: 1px 2px 3px #A7A8AD;
    background-color: #fff;
}

#sideBarMain h3, .newsItem h3 {
    /*側(cè)邊欄每個(gè)模塊的標(biāo)題部分*/
    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;
}

/*側(cè)邊欄列表樣式*/
#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 #ffffd;
    font-size: 14px;
}

3-2. 側(cè)邊欄公告

3-3. 頭像設(shè)置

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

//圖片的地址更換成你的頭像的地址

3-4. 側(cè)邊欄公告樣式

/*側(cè)邊欄公告*/
#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;
}

/*公告結(jié)束*/

3. 側(cè)邊欄日歷

/* 日歷 */
#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;
}

/*日歷結(jié)束*/

4. 側(cè)邊欄搜索框

/*側(cè)邊搜索框*/
.mySearch {
    padding-bottom: 10px;
}

.mySearch > div {
    padding-top: 10px
}

.mySearch #q {
    height: 40px;
    width: 150px;
    border-radius: 5px;
    border: 1px solid #ffffd;
}

.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;
}

/*搜索框結(jié)束*/

４. 評(píng)論列表

碎碎念：

因?yàn)槲腋虏┛偷念l率很少，而且質(zhì)量還不是很高，所以評(píng)論也就很少。。。所以目前的評(píng)論列表樣式是這樣的，如果之后有更多的評(píng)論，那么還會(huì)繼續(xù)修改樣式的，畢竟我是一個(gè)顏控啊！！
　　

4-1. 底部評(píng)論表

/*評(píng)論*/
/*評(píng)論列表*/
#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;
}

/* 提交評(píng)論按鈕 */
#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. 側(cè)邊欄評(píng)論

/*側(cè)邊評(píng)論*/
li.recent_comment_body {
    line-height: 30px;
}

5. 個(gè)性簽名

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

/* 個(gè)性簽名 */
#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. 博客文章主體樣式

/* 標(biāo)題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;
}

/*設(shè)置背景色和字體大小*/
body {
    font-size: 15px;
    box-sizing: border-box;
}

/*mainContent主體內(nèi)容容器*/
#main {
    display: flex;
    width: 95%;
}

#mainContent .forFlow {
    margin: 0 0 0 310px;
}

#mainContent {
    margin: 0 0 0 -310px;
}

#post_detail {
    overflow: hidden;
}

/* 主體內(nèi)容樣式 */
.postBody {
    padding: 20px 40px;
}

#cnblogs_post_body {
    font-size: 15px;
}

#cnblogs_post_body h2 {
    //標(biāo)題h2
    border-left: 5px solid #55895B;
    padding: 10px 20px;
    line-height: 2;
    background: #d6dbdf8a;
    margin: 30px 0;
}

#topics .postDesc {
    display: none;
}

7. 其他部分的樣式

/* 關(guān)注收藏等幾個(gè)按鈕 */
#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;
}

/*底部隱藏作者，隱藏推薦和反對(duì)*/
#author_profile {
    display: none;
}

#div_digg {
    display: none;
}

/*隱藏廣告*/
#ad_t2, #cnblogs_c1, #under_post_news, #cnblogs_c2, #under_post_kb {
    display: none;
}