博客园自定义样式

时间  2019-11-08
标签 博客 自定义 样式 繁體版
原文   原文链接

碎碎念：html

  • 已经很长时间没有更新过博客了，分析一下，一个是太懒了。。。因此好久没整理一下了。
  • 还有就是嫌弃博客园默认的博客界面真的太丑了，做为颜控的我真的没法忍受啊。
  • 我的比较喜欢用makedown来编写博客，可是博客园自带的编辑器真的不是很友好啊。。。。。

还好，博客园比较人性化的有页面样式的自定制功能。为了装修个人博客，断断续续用了三、4天的时间（效率过低了），经过参考了一些博客以后，作了一下整理。git

小提示：
　　可能博客中的代码与如今的样式有点差别，那是由于以后有作过样式的调整，具体代码参考GitHub ：https://github.com/RealAndMe/blogs-stylegithub

1. 基础介绍

1-1. 介绍一下个人博客设置

  1. 我我的比较习惯用 Makedown 来编写，因此我选择的编辑器是 Makedown，在 [ 管理 ] - [ 选项 ] 中能够设置。
  2. 在 [ 管理 ] - [ 模版 ] 中有许多博客模板，能够直接使用，界面也会变好看一点。我使用的是 red_autumnal_leaves （红叶）
  3. 由于个人样式定制是在红叶的模版基础上进行修改的，因此可能其余的模版会出现兼容的问题，这个能够根据本身的模版和喜爱进行修改。（我已经尽可能作到样式兼容了，可是模版太多，爱莫能助啊。。。）

1-2. 简单的操做

能够经过审查元素的方法，来设置本身满意的样式。操做是F12。
F12操做能够打开控制面板，具体的样式能够直接在上面修改，而后把修改后的样式保存下来。编辑器

控制面板

保存后的样式，复制到[ 管理 ] - [ 设置 ] - 页面定制CSS代码上面，而后[ 保存 ]ide

注意：
有时候修改的样式没有起做用，是由于样式的优先级的缘由，这里我选择简单粗暴的!important来解决post

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 代码，用来添加头像，地址用本身的头像flex

//图片的地址更换成你的头像的地址
<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;
}

/*搜索框结束*/

４. 评论列表

碎碎念：url

由于我更新博客的频率不多，并且质量还不是很高，因此评论也就不多。。。因此目前的评论列表样式是这样的，若是以后有更多的评论，那么还会继续修改样式的，毕竟我是一个颜控啊！！
　　spa

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 {
    //标题h2
    border-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;
}
相关文章
相关标签/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公众号
   欢迎关注本站公众号,获取更多信息
联系我们 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程