选择页面

如何在微信平台上优雅的写作的教程中,半撇分享了如何利用Markdown语言渲染插件进行快速的微信排版,但是渲染的格式毕竟有限,也容易和别人“撞脸”。本期半撇分享进阶版微信排版的方法:Chrome+内嵌CSS。(许多人说图片才是微信排版的最自由方式,但是它也降低了文章的打开速度,况且微信也只支持不超过300k的图片)

打开Chrome浏览器,登陆微信公众平台后台,开始进阶练习吧!点击链接查看本期课程Demo。

1、在微信公众平台新建文章

在微信公众平台录入一篇新的文章后,点击“保存”(除了分段,不要进行任何格式处理)。然后在后台的“素材管理”中,点击新建文章的标题即可浏览文章。

preview the page

2、打开Chrome浏览器的审查元素功能

在浏览器打开文章后,选中所需修改格式的文字,右击鼠标打开“审查元素”。

view the source code

3、利用CSS代码调整微信排版

打开“审查代码”窗口后,对准在所需要调整格式的标签后,右击鼠标选择“Edit as html”即可添加内嵌样式。或者直接在审查代码窗口右边的Styles直接修改样式,省的输入代码。

edit as html

下面是调整完的样式范例:

add left border to the paragraph

修改排版后,选中并复制格式内容,再粘贴到微信的后台文章即可应用了,这个技巧可以让你复制微信文章上许多排版精良的文章,比如“炒客”公众号,至于如何检索微信文章,你可以访问:如何利用搜索技巧检索微信公众平台文章

在微信排版中,或者说是网页排版中,常见的样式属性主要有包括:边框(border)、颜色(color)、背景(background)、字体大小(font-size)、对齐方式(text-align)、内边距(padding)、外边距(margin),还有加粗(font-weight:bold),倾斜(font-style:italic),这两个属性直接在编辑器中操作就可以了。

为了方便演示处理技巧,在本次课程中我尽可能的增加样式的种类,但是在实际排版中,还是应该根据公司的UI主辅色,越简洁越好,毕竟正文才是内容的核心。

当然,你可以使用在线的HTML编辑器编辑后再复制到微信后台,也可以利用强大的CSS控制网页排版,本文也只是抛砖引语,如果你想学习更多CSS排版技巧,可以到w3c的官网学习。