博客园简单美化方案

快速设置

如果你只是想跟我的博客有差不多的显示效果，只需要在设置中进行两步 (这里我开通了 js 权限，实际上你不开通也可以)

1. 博客皮肤选用 SimpleMemory
2. 复制下面 css 到 页面定制 CSS 代码
   

/* 屏蔽 广告 */
.under-post-card,
#under_post_card1,
#under_post_card2,
#cnblogs_ch,
/* 屏蔽 分享 */
#blog_post_info,
/* 屏蔽 顶部导航 */
#top_nav,
/* 屏蔽 博客统计 */
#navigator .blogStats,
/* 屏蔽 刷新评论 */
#comment_nav a {
    display: none;
}
/* 屏蔽登录提示的小图 */
.login_tips {
    background-image:none;
}
/* 屏蔽标题动画 */
#mainContent .postTitle2.vertical-middle:hover,
#topics .postTitle:hover {
    margin-left: 0px;
}
/* 阅读全文 变成蓝色 */
.postCon a:link, .postCon a:visited, .postCon a:active {
    color: #5d6ccd;
}
/* 摘要 颜色 */
.postCon {
    color: #4d4d4d;
}
/* 设置字体行距 */
.postBody {
    line-height: 2;
    font-size: 15px;
    color: #4d4d4d;
    margin-bottom: 16px;
}
/* 下一篇 拉低点 */
#post_next_prev {
    margin-top: 30px;
}
/* 代码小一字号 */
.hljs-ln-number,
.hljs-ln-code {
    font-size: 13px;
    line-height: 1.5;
}
/* 图片居中 边距 */
#cnblogs_post_body img {
    margin: 0 auto;
    display: block;
    max-width: 80%;
    margin-top: 20px;
}
/* 链接蓝色 */
.postBody a:link,
.postBody a:visited {
    color: #5d6ccd;
}
/* 屏蔽目录 两个字 */
.toc-container-header {
    display: none;
}
/* toc 行距缩短 */
.toc {
    line-height: 1;
    margin-bottom: 30px;
} 
#cnblogs_post_body ul {
  margin-top: 15px;
}

以下都是一些废话

处理排版

放弃 CSDN 就是觉得广告太夸张了, 页面上存在大量的干扰阅读的元素, 如果要经常阅读输出的话, 页面当然是越简单越好, 这样阅读体验也会好很多. 所以这次花了点时间处理了下博客, 基本上就是选个简单的主题, 然后做各种减法. 主要也就处理了三个地方, 文字颜色, 行距, 图片. 首先是文字颜色, 主体文字颜色并不是纯黑的, 要比黑色淡一点, 简书和 CSDN 上都是这样, 难怪有时候博客园字体好像有点旧的感觉, 应该是颜色太黑了. 然后超链接更换为蓝色. 之后是行距处理, 默认行距是有点挤的, 分段不明显, 看起来好像是粘到一起, 所有行距适当调整下. 最后是图片了, 这个看起来比较明显, 居中显示就行了.

屏蔽其他

剩下就是屏蔽一些稀奇古怪的东西了, 不过话又说回来了, 博客园这操作是真的六, 自家的广告还能让自己屏蔽, 给点个赞!

原文地址：http://www.cnblogs.com/asmer/p/16817301.html