美文网首页技术工具癖@IT·互联网
看懂了这些,你的微信文章排版就可以随意变化

看懂了这些,你的微信文章排版就可以随意变化

作者: 之元麻麻 | 来源:发表于2016-08-31 22:53 被阅读3308次

    现在微信编辑器网站多式多样,本宝随便给大家列个清单哈,这个不是重点,随便看看就好,重点在后面的内容。

    96微信编辑:微信公众平台图文排版工具

    i 排版 :微信编辑器_i排版

    秀米:秀米_图文排版

    易企微:易企微|一站式新媒体营销平台[公司官网]H5页面|h5页面制作

    秀多多:秀多多 - 微信配图素材,微信编辑器,微信移动场景应用,微信爆文工具

    有图:有图-领先的网络印刷和移动营销服务平台(照片书,微信H5页面自助设计)

    易点编辑器:微信编辑器_微信编辑工具

    135 编辑器 :135编辑器官网

    微信圈圈排版:微信图文排版_微信图文编辑器

    天行编辑器:天行编辑器 - 微信公众号图文在线编辑排版工具

    乐排|图文编辑工具:图文排版 | 微信

    微信在线编辑器:微信排版工具_微信公众平台排版

    91微信图文排版:91微信编辑器,免费微信图文排版网页工具

    唯爱微排:微信排版图文编辑器

    小蚂蚁微信编辑器:小蚂蚁微信编辑器

    韦小宝:微小宝公众号助手

    新媒体管家:新媒体管家 - 首页

    HOMYi :享安逸,用HOMYi

    构思:构思编辑器_微信编辑器

    爱微帮 :微信运营,新媒体社交媒体运营好帮手

    我比较常用就是前三个:秀米、i排版和96编辑器。

    秀米比较简单易操作,很容易上手,而且秀米的公众号做的也比较用心,每次都会一些配色方案,整体风格比较简洁;缺点是只能用现成的版本。

    i排版有一个缩进功能很好用,让人郁闷的版式收费。

    96的编辑界面简单,完全免费,内容可以转换成html,样式非常多的分割线和小符号。

    今天的主要任务不是微信编辑器!微信小编也没几个不用微信编辑器的,但是有个关键问题被腾讯开发者们忽略了,就是文字两端对齐!!

    小编们辛辛苦苦编辑好了文字内容,也点击了两段对齐的按钮,可是手机预览的效果永远参差不齐。见下图

    现在Android系统手机显示没问题,但是苹果手机IOS系统显示的结果还是那么辣眼睛!

    还有就是字体,微信后台直接默认是微软雅黑。我用过的微信编辑器的字体也是默认的,但是好在网页字体可以直接引用到微信后台的编辑器里。虽然从读者的阅读感受来考虑,微软雅黑是比较良好字体,但是有些学术类的公众号,用微软雅黑表现就弱了。

    微信运营也就这两年比较火,大部分微信小编却是转行过来的,所以很多小编对微信排版的感知相对弱点,也看不懂html代码的。直接给大家内容吧!


    1.

    打开一个能查看html的微信编辑器,点击html按钮。如图7

    清空里面的代码,把下面一段内容复制粘贴进去。(其实我想把代码可以变成文本放到这里的,但是复制过来直接转成文字了,并不能看到style那部分内容,有需要的小伙伴还是可以私我的。)

    点击html按钮,把文字复制到微信公众号后台的图文编辑文本里,预览效果如下:

    是不是发现文字两边都排列的特别整齐,这样的内容放在手机里,读者看起来会觉得整改内容排版比较干净整洁。


    2.

    可能没学过编程的看着上面有点晕,下面给大家具体解释几个关键的因为单词的意思

    margin:边距,四个方向,上下左右(top、bottom、left、right),可以自己设置大小值。

    px:像素。

    padding: 边框与元素内容(一般是文字)之间的空间,上下左右(top、bottom、left、right)四个方向的值都可以自己设置。

    font-size:字体大小,一般我们字体在手机上阅读感最好的是14-16px;。

    line-height: 行距。

    color: 字体颜色;rgb(62, 62,62),括弧里数值大家没事可以改着玩下的。

    background-color:背景颜色。

    text-align: justify;这个就能保证文字两端对齐的重要单词。

    font-family:Times; 这个就是字体了,想换什么字体可以上网搜搜对应的名词复制过来。

    ......

    还有很多其他的格式,有兴趣的可以自己上网搜一搜。这个里面分享一个简单的玩法

    文字缩进,也就改变margin左右的值,下图是缩进1个字符(15px)的效果,再改一下行距line-height的值,就是下图的效果。

    3.

    边距和行距适当增加,旁边的字和内容对正在阅读的内容干扰就会弱化,手机显示的内容相对会减少,更有利于阅读,当然不是无限放大行距,要慢慢调试到最佳阅读感受。

    再上面的基础上找到padding,和backgound-color,修改数值,即可得到下图内容:

    这里只是抛砖引玉,做一个简单的演示。想要更多的格式都可以通过这种方式,修改html模式下具体参数,就可以得到你想要样式。

    譬如96编辑器的标题,你可以选择调到html模式,修改里面的背景格式,边距什么。

    另外,从别人那看到喜欢的样式可以直接复制到编辑器,修改下跟自己内容主题搭配的颜色,就可以应用到微信文章里。

    最后一段必须重点看下:

    所有格式都不能偷懒直接用,你会发现word或者网页上复制的文字都会自带格式。

    一种办法是在微信编辑器里html模式,把要用的文章直接替代原格式下文字内容。

    还有一个办法就是用记事本或者微信图文编辑里清除格式后,再复制过来。

    两种办法都要谨记一点,你喜欢版式的文本内容可以先放到微信公众图文编辑里,但是新文本都必须一段一段复制替代原先内容,目的是为了引用原文本格式。

    相关文章

      网友评论

      • 人闪:提到的这些有几个界面闪图广告很多,要么没有素材,建议试试www.8idea.cn的微信编辑器
      • 1c6cf3a44d9d:可以私我那段代码吗?谢谢
        排版排好后多那么几个字好烦
        1c6cf3a44d9d:@阿修罗地狱恶犬 谢谢,太棒了,我要去试试
        之元麻麻:@怒吼的妈 <p style="margin-top: 20px; margin-bottom: 0px; padding: 0px; clear: both; white-space: normal; font-size: 16px; line-height: 25px; max-width: 100%; min-height: 1em; color: rgb(62, 62, 62); background-color: rgb(255, 255, 255); text-align: justify; font-family: Times; box-sizing: border-box !important; word-wrap: break-word !important;">
        们确实活得艰难,一要承受种种外部的压力,更要面对自己内心的困惑。在苦苦挣扎中,如果有人向你投以理解的目光,你会感到一种生命的暖意,或许仅有短暂的一瞥,就足以使我感奋不已。 
        </p >
        <p style="margin-top: 20px; margin-bottom: 0px; padding: 0px; clear: both; white-space: normal; font-size: 16px; line-height: 25px; max-width: 100%; min-height: 1em; color: rgb(62, 62, 62); background-color: rgb(255, 255, 255); text-align: justify; font-family: Times; box-sizing: border-box !important; word-wrap: break-word !important;">
        It's true that we have been leading a difficult life, for we need not only to be under various external pressures, but also to be in the face of internal perplexities. You would be affected by the warmth of life if someone gives you a understanding look during your bitter struggle. Even a mere glance would make you moved and inspired. 
        </p >
        <p>
        <br/>
        </p >
      • 话匣:谢谢你
        之元麻麻:@话匣 内容对你有点用就好!:blush:

      本文标题:看懂了这些,你的微信文章排版就可以随意变化

      本文链接:https://www.haomeiwen.com/subject/lbhcettx.html