再谈博客文章排版

博客文章排版问题是个老话题了，但是最近写文章的时候越来越觉得这是一个大问题，其实这也是早就意识到的，但是由于生性懒惰，所以懒得去整理排版的问题，但是最近发现自己博客文章的排版连自己都不能接受了，不得不开始折腾这个问题，权衡之下，主要是复制了可能吧的排版样式，同时加上一点自己的想法。

更改后的文章排版主要有：绿条、灰色引用边框、首段空两字以及将这些样式同时显示在feed里面。在这里，将折腾博客文章排版的一点心得分享一下。

一、博客文章为什么要排版

回答是显而易见的，增强文章的可读性。按照可能吧的阿禅的说法，就是“可扫描性”，毕竟，这是一个快餐式阅读的年代。先来看看两个直观的对比。

材料一：几乎没有排版

材料二：经过简单的排版

显而易见，高下立现。而实例二当中也不过是经过了一些简单的排版：断首空两字，增加了段落距离而已。

看看博客统计数据当中的页面停留时间和跳出率，就会知道，绝大多数读者都是没有耐心的，一目十行的阅读。

二、利用排版工具进行排版

我也查找了一些排版工具，大多数排版工具都是大同小异，功能无非是以下几种：

1.繁简体互换
2.文字挑错
3.段前空格
4.段落分开
5.去除格式化

其实，常用的也就是这些了，这个推荐几个用过的。

1.在线排版工具

雪晴故事论坛在线排版工具：主要提供字数统计、自动排版、标点替换、清楚空行等简单排版功能。

爱读文在线排版工具：功能同上。

2.离线排版工具

一键排版工具：一键排版，原名网络编辑超级工具箱，是一款小巧轻便的文章整理和文章编辑工具。

排版助手：排版助手（Gidot typesetter）是由国人Gidot开发的一款一键排版助手，程序小巧实用，功能较为强大。

三、利用CSS优化文字排版

在使用这些在线或者离线排版工具的时候有个问题，那就是由于受博客自身CSS样式的控制，有可能你排版排得很好的文章复制粘贴过来又乱了，再者，这些排版毕竟都是很基本的，如果想实现更加美观的排版效果，那么就要通过修改CSS的方法了。

提到博客文章排版，就不得不提可能吧，尽管可能吧现在身居墙外，但其开创的博客文章排版样式广受讨论和推崇，一提到“绿条”、“灰边”，你就会想到可能吧，是的，本博客现在所用的排版样式也是借鉴自可能吧的，这里主要介绍如何实现可能吧的排版样式。

1.怎样才能有绿条

绿条，也就是标题栏为绿色的背景色。实现起来也很简单，将你的主题样式表Style.css合适部位修改为：

#main .post .content h3{
padding:3px 6px 3px 6px;
background:#9c0;
font-family:微软雅黑;
font-size:16px;color:#000;
}

background:#9c0; （标题栏背景颜色代码,你可以改成蓝条、黄条，和你的主题相称即可）

font-family:微软雅黑; （标题栏字体）

font-size:16px;（标题栏字体大小）;color:#000;（字体颜色）

h3可以修改为h1-h4，视你的主题样式而定，一般不要设为h1。

2.怎样才能有灰边（灰色引用样式）

同样在主题样式表Style.css中将：

blockquote, pre{ ****}

替换为下面的代码

blockquote, pre {
background:#cce8cf;
border-width: 0 0 0 5px;
border-style: solid;
border-color: #DEDCD4;
padding:8px 12px 8px 12px;
margin:5px 0 5px 20px;

}

其中background:#cce8cf; （引用框背景色，如果无需背景色直接删除即可）

以上代码来源于5毛1贴的文章。

四、如何在feed中出现你的排版效果

辛辛苦苦折腾的排版效果，但在feed中却又白费了，幸好还有Feed Styler这个插件。

将你在style.css里面修改的特定部分CSS复制，粘贴到插件的设置页面，然后点击Apply styles to feed即可。