老肥谈如何在博客正文中运用样式

appearance一篇吸引眼球的文章一定要有漂亮的样式，除非它是 keso 或者韩寒写的。如果没有他们那样强大的品牌保证，那么一定要把内容和外观都做好，不然读者很难坚持阅读完大篇幅密密麻麻的文字，至少我阅读时是这样的。我以前也谈过博文 链接 和 标签 的运用，希望它们能对您有所帮助。

题图和插图

图片的重要性是显见的，题图则可以一开始就吸引读者浓厚的兴趣。大猫 的题图一向很大很咸湿，我习惯用 128×128 的兔子图标。用 logo 做题图也不错，比如 cnBeta 的文章会自动套用话题 logo, 详细到有关鲍尔默的文章都有一个他的猴子头像。也许这样一个图片没有太多实际意义，但心理上的效果明显。不然门户网站的编辑为什么总要凑两张图片然后标题里称“组图”呢，就是要你点。

题图适合用浮动一侧的样式，按 ctrl+u 查看本文代码，就会发现我把题图所在的 <img> 标签放在了最前面，并加上了 style=”float: left; margin-right: 5px” 让它浮动在左边。这个样式不适合用全局 CSS 来做，因为每个题图需要的边距都不同，而且自己定义的 CSS 样式不会传递到阅读器中。

插图不宜太大，如需大图，用缩略图做个链接。最近我给图片上的链接加了个样式，让读者更容易察觉链接，如右所示。（自定义 CSS 只在原文生效，阅读器里没有）如果觉得不错，可以在 代码 中搜索 piclink 查看。

如何强调和高亮

通常我们用 粗体 或者 高亮 来强调重点，但不可多用，不然就没有重点了。将文字弄成红色不是很好的办法，我的英文老师曾告诉我们 ALL CAPS is shouting, 所以我觉得红色的文字也显得不够礼貌。

html 格式标注的使用

行文中常用的 html 格式标注包括 h3, h4, ul, ol, li, blockquote 等，一般来说正文中的子标题不应该太大号，h3, h4 就可以了。ul 叫做无序列表，ol 叫做有序列表，li 用来标注列表中每一条项目，blockquote 是区块引用。写列表时，手动写入 1…2… 是很不规范也没有效率的做法，应该使用 html 标注，多用用编辑器的预览模式和代码模式，很容易学会：

  1. 这是一个有序列表
  2. 这是第二条
  • 这是一个无序列表
  • 这是第二条


这是一个区块引用，可看作一个有缩进的段落。引号图片是在 CSS 中定义的，在阅读器中不会有。


上面的例子中我将 ul 每条项目前做成了绿色圆点图标，这是在本站 CSS 中定义的，到阅读器中不会有这样的效果，但 ul, li 作为标准 html 标注，一般会被显示成黑色圆点的样子，标题字号、行距什么的都不会错，只是会换成缺省样式，或者阅读器里定义的样式。

合适的子标题、列表可以让文章层次分明，井井有条。如果对它们应用样式，推荐在全局 CSS 中进行，不宜过多地将格式写到 style=”” 中，麻烦不说，到阅读器中就会花花绿绿的了。一个典型的错误就是指定整段文字的颜色，要是博客是深色底浅色字，到阅读器里就成浅色底浅色字了。使用 CSS 可以让样式具有更大的适应性。

写完了

OK, 如果您读到这里，就说明我这篇文章还不算失败 👿

相关文章

最新文章

更多 »

热门标签

Firefox Gmail Google Greasemonkey WordPress 创意 博客 地图 手机 扩展 美化 设计 黑莓

最新评论

  • fisio 可不，Google Reader 都去世十年了… Google Reader 的分享和效率
  • 轻重 天哪！今天整理Evernote，发现这条2010年的剪藏笔记，点击连接，原网站还在！12年了，中文互联网早已面目全非！ Google Reader 的分享和效率
  • 小波 重新改博客，看看以前的wp小伙伴的博客，发现绝大部分都关了，没想到你的还在，只是停在11年了 我为什么爱 Twitter
  • 心灵博客 当年有这个效果已经很不错哦 diy 山寨投影家庭影院
  • fisio 可不咋地！您也是老司机了 我为什么爱 Twitter

随机文章


发表您的评论

评论将回复给

😀🙂😯😁🙁😄😆😝😜👍🌈☕💖🎂

目前有 50 条评论

    1. 阅读器不可能去加载原文的样式嘛，都是统一的样式，比较接近缺省 html, 也有不同，比如抓虾里面的 headline 都是绿色的 🙂

  10. 我以后在文章中插图再也不用WordPress默认的左右浮动设置了,阅读器里一团糟,害死人.
    用子标题的问题,有很多主题喜欢直接将h2 h3 h4 h5全部定义成一个字体大小,所以还是要仔细寻找一下CSS里面的定义,我用过的主题除了Sofish的这个之外,都是这样的…
    PS:发现搜狗的一快捷键,中文状态下输入h6

    1. 哈哈，是这样的，如果搜狗一排显示的候选字不足九个，按更大的数字都会调出那个特殊字符表，看来你的个数是默认啊

  11. 其实关注fisio博客这么久，上面写的一大半也是我都注意到的了，像配图啊ul li和引用什么的，这样总结出来当然更好了。

    1. 你从我的 default.css 中复制关于 piclink 的那些行，大概是从 120行开始。然后应用这些到自己的 css 中，需要此效果的地方 <img> 标签中加入 class=”piclink”

      用 class 控制一下是为了不让侧栏等地方统统应用这一样式，如果不想每次都标记，也可以从全局控制中指定此效果仅对正文部分生效，做法就要具体分析啦

    1. wordcamp shanghai 的时候，白鸦出描述题，猜博客，他老是说这个博客的版式啊，logo啊什么的，对订阅读者来说，有点难，呵呵

      有些博客，我都只在别人的分享里看到，博客长啥样儿，完全不知道-_-

  29. 请问 如何才能让我的引用效果显示带那个大的引号呢？

    以前的模板有可现在的没了。。

    还有高亮效果有插件在编辑区实现编辑时选择吗？

    1. 这是在全局 css 中对 <blockquote>引用文字</blockquote> 进行了样式化，如果查阅我用的 css 可以找到：

      blockquote, quote {
      background:transparent url(../images/quote.gif) no-repeat scroll left top;
      margin:10px 30px 0 0;
      padding:3px 10px 3px 35px;
      }

      高亮我也没有用插件，而是直接写了：

      <span style="background-color: yellow;">高亮</span>