微信排版进阶指南:Chrome+内嵌CSS,带你优雅写作
在微信平台如何得体表达技巧的指导里,半撇介绍了借助Markdown符号和显示工具实现便捷的微信版式设计,然而显示的样式终究有局限,也容易与其他人产生相似感。本期半撇传授更高级的微信版式技巧:运用Chrome浏览器配合内嵌样式代码。很多人认为图文组合是微信文章布局最灵活的途径,不过这种方式会减慢内容的展现效率,同时微信平台对单张图片的大小有限制,最高不能超过300千字节
启动谷歌浏览器,进入微信中心管理界面,即可进行提升训练。查阅本期课程实例,请点击相应网址。
1、在微信公众平台新建文章
录入新文章到微信平台后,点击保存,注意仅保存内容,不做其他格式调整。接着进入后台的素材管理部分,找到并点击新文章的标题,这样就能查看该文章了。
2、打开Chrome浏览器的审查元素功能
打开网页查看内容,找到需要调整样式的部分,用鼠标点选该区域,接着右键点击,在弹出的选项里选择“检查”。
3、利用CSS代码调整微信排版
启动“代码校验”界面,将光标移至需修改样式的元素上,鼠标右键点击,选取“以HTML形式编辑”选项,便能够嵌入自定义样式,务必:各项样式规格需置于style=""的英文括号内,且不同规格之间须用英文分号结束,例如:
标题一的处理
在Demo文章中,我为标题1做了如下的处理,完整的代码为:
这里是你的标题一文字
设置标题段落背景色为#fdfcfc,也就是灰色,对应的代码是
在CSS里,你可以选用诸如白色、灰色这类颜色名称,或者输入RGB数值,亦或是采用二进制形式表示颜色都可以。(若需快速获取颜色数据,可以参考伟仔讲解的从图片中提取某点颜色值的方法,或者利用Picnik网站进行取色)
给标题段落添加一条2像素宽的纯色上边框,该边框颜色为#e6a117,具体实现方式如下
。若需变为完整边框,仅需设为border,若是“上/左/右”的特定边框,则将border-top调整为
只需要边缘底部和边缘左侧以及边缘右侧即可
修改标题一的文本背景色为半撇黄色,具体色值为#e6a117,相应的代码设定为。
标签用来约束整个段落,也用来约束单个词语或句子,标题一的文字数量是多少,背景色就会延伸多少范围。
修改标题一文本颜色为white(白色),对应的代码为。
调整标题的边框空白为五个单位,相应的编码是。之所以在元素中设置填充,是为了让文字的空白区域正好遮盖住标题部分的本色底图。
正文的处理
在Demo文章中,我分别为正文做了如下的处理,完整代码为:
这里是你的段落文字
修改正文段落字体颜色为gray(灰色),对应的代码为:
修改正文段落左内边距为10个像素,对应的代码为:
为正文段落增加一个2px厚、灰色实色左边框,对应的代码为:
。这种效果类似mardown中引用样式。
完成排版调整后,请将格式化的内容复制,然后粘贴到微信后台的文章编辑界面中即可使用,这个方法能够帮助你复制微信上众多排版美观的文章,例如“炒客”公众号,至于怎样查找微信文章,可以查阅:怎样运用搜索方法寻找微信公众平台文章。
排版设计时,涉及到的要素有多个方面,例如边框处理、色彩设定、背景填充,以及文字大小调整,内容排列方向,内部空间留白,外部距离控制,文字加粗强调,斜体显示,这些都能在编辑工具里直接完成设置。
为了展示操作方法,本课程会运用多种版式设计,不过实际应用时,务必遵循机构的色彩规范,力求简明,毕竟文章才是重点。
当然,你可以借助网络上的HTML工具进行修改,然后粘贴到微信管理界面,同时也能借助功能丰富的CSS技术来调整页面布局,这篇文章只是起到引导作用,假如你希望掌握更全面的CSS排版方法,能够前往w3c的官方网站进行深造。