微信公众号排版美化——自定义css实现

日常推荐5个月前更新 Jone

247 0 0

前言

最近几天阅读量暴增，虽然和我发的一些教程类的文章都没有什么关系，但是阅读量增加了总归还是一件好事(づ￣ 3￣)づ。

好歹现在也有不少人看我发的东西了，原来的文章排版实在是太难看了，所以今天就花了点时间搞了搞公众号排版。

市面上有不少的公众号编辑器，最流行的恐怕就是壹伙了。虽然它不仅仅能用来公众号排版，还能后台发送消息和归纳文章浏览数据等等公众号运营的功能。

微信公众号排版美化——自定义css实现

但是吃相实在有些难看。

前段时间想改善公众号排版的时候我就尝试过这个插件，使用后总体给我的感受就是——钱钱钱。这玩意除了下载不收费以外，我TM就没见过其他免费的功能了。

排版收费、用户关注后回复收费，查看用户关注趋势收费等等，一句话总结来说不开会员寸步难行。

俗话说自己动手丰衣足食，排版插件收费那我就自己写，今天就教大家如何来美化公众号文章排版。

实现原理

工欲善其事必先利其器，在开启本期排版美化教程前先来介绍下排版的实现的原理。

日常我们见到的公众号文章说白了还是html页面，这里熟悉前端的小伙伴肯定很了解了。那么美化html页面需要什么呢？答案就是css。

随便找一篇公众号文章来查看整个网页的页面结构，点击F12查看页面控制器。

微信公众号排版美化——自定义css实现

上图中body标签里包着的就是我们写的文章转换成的html的样式了，

实现步骤

知道了整个页面结构，那么只需简单的修改css就可以修改页面样式了。

页面修改

整个页面样式有点多不可能每一部分都演示一遍，接下来就以页面h2标题为例，演示下怎么修改css来改变排版布局的。

微信公众号排版美化——自定义css实现

注意看上图标记了四个部分，这就是公众号h2标题的样式位置，最左边的element.style就是我们自定义的css放置位置。建议在写页面css之前可以现在上图最右侧更改css查看页面效果是否是你想要的。

不懂css语法的小伙伴可以先尝试学学css语法。

编辑器

写自定义css之前肯定要有个能支持自定义css的markdown编辑器，这里博主推荐——Typora。

虽然新版的typora都收费，但是有一说一这个编辑器确实好用。不差钱的小伙伴可以买新版的试试，像我一样没钱的话则可以去下面链接下载老版本的~~目前我一直在用的版本~~。

百度网盘链接：https://pan.baidu.com/s/1R3CKcj4uTcdCawQtH4Dbhw?pwd=zshh

接下来就写自己自定义的css文件，首先打开Typora的主题文件目录。

微信公众号排版美化——自定义css实现

打开后在当前文件夹目录下新建一个gongzhonghao.css，里面把自定义的css放进去。

下面是我目前公众号文章在使用的自定义css，如果觉得丑的话可以在此基础上修改。

h2{
margin-top: 2.2em;
    margin-bottom: 35px;
    outline: 0px;
    font-weight: bold;
    font-size: 22px;
    color: rgb(0, 0, 0);
    font-family: Optima-Regular, Optima, PingFangSC-light, PingFangTC-light, "PingFang SC", Cambria, Cochin, Georgia, Times, "Times New Roman", serif;
    letter-spacing: normal;
    text-align: left;
    text-wrap: wrap;
    line-height: 1.5em;
}
h2 span{
margin-right: 3px;
    padding: 2px 13px;
    outline: 0px;
    display: inline-block;
    background-image: linear-gradient(rgb(255, 255, 255) 60%, rgb(255, 177, 27) 40%);
    background-position: initial;
    background-size: initial;
    background-repeat: initial;
    background-attachment: initial;
    background-origin: initial;
    background-clip: initial;
    color: rgb(81, 81, 81);
    height: 37px;
}
h3{
margin-top: 10px;
    margin-bottom: 5px;
    padding-top: 10px;
    outline: 0px;
    font-weight: bold;
    font-size: 20px;
    color: rgb(0, 0, 0);
    font-family: Optima-Regular, Optima, PingFangSC-light, PingFangTC-light, "PingFang SC", Cambria, Cochin, Georgia, Times, "Times New Roman", serif;
    letter-spacing: normal;
    text-align: left;
    text-wrap: wrap;
    line-height: 1.4;
}
h3 span{
padding-left: 16px;
    outline: 0px;
    color: rgb(81, 81, 81);
    font-size: 1em;
    border-left: 3px solid rgb(249, 191, 69);
}
p{
margin-bottom: 20px;
    outline: 0px;
    font-family: Optima-Regular, Optima, PingFangSC-light, PingFangTC-light, "PingFang SC", Cambria, Cochin, Georgia, Times, "Times New Roman", serif;
    font-size: 16px;
    letter-spacing: normal;
    text-align: left;
    text-wrap: wrap;
    line-height: 1.8em;
    color: rgb(58, 58, 58);
}
p code{
margin: 3px;
    padding: 3px;
    outline: 0px;
    font-size: 14px;
    border-radius: 4px;
    font-family: "Operator Mono", Consolas, Monaco, Menlo, monospace;
    word-break: break-all;
    color: rgb(155, 110, 35);
    background-color: rgb(255, 245, 227);
}
pre{
border-radius: 7px;
}
blockquote{
margin-top: 20px;
    margin-bottom: 20px;
    padding: 10px 10px 10px 20px;
    outline: 0px;
    border-left-color: rgb(255, 177, 27);
    color: rgb(106, 115, 125);
    font-size: 0.9em;
    border-top: none;
    border-right: none;
    border-bottom: none;
    overflow: auto;
    background: rgb(255, 245, 227);
}
img{
border-radius: 12px;
}