微信推文排版——制作自己想要的滑动相框
通常为了减少推文的篇幅,我们会使用滑动相框来放置大量图片。但第三方推文排版神器提供的滑动相框限定只能放置3~4张图片,对于活动、会议、广告宣传类等需要放置大量图片的推文而言,还是不够用的。所以,怎么修改配件来满足我们的需要呢?
操作方法
(01)首先要知道微信后台的图文编辑器开发环境是能渲染HTML5(H5)代码的,也正是因为如此市面上才有大量的针对微信公众号的第三方编辑器,却看不到针对其它自媒体平台的第三方编辑器。我们平时在微信推文里看到的各种配件,都是由H5生成并被腾讯的浏览器渲染的结果。
(02)先将滑动画框放到135编辑器平台上。
(03)打开浏览器的开发者工具。(F12或者右键“查看网页源代码”),找到相应起作用的标签、代码。
(04)因为放置图片的容器限定了最大宽度max-width:400%,只能放四张图片,所以要对容器最大宽度进行修改。
(05)通过开发者工具可以看到,每张图片都嵌套了3个<section>标签、3个容器。所以我们之后还要边插入其它图片边调试,每个图片容器的宽度。
(06)此时就有了多余负空间,要进一步修改里面的代码。但仅仅在135操作已不适合,所以要复制粘贴代码到文本编辑器上进行修改,本文以Notepad++为例。
(07)确定好每张图片所被嵌套的容器,所起作用的代码后,就仅复制那部分代码。为了方便识别,最好写上注释。
(08)复制全部代码到135上,查看效果
(09)此时很有可能会发现,图片排序混乱。是因为每放置图片的容器(<section style="display: inline-block; width: 10%; vertical-align: top;">)的宽度过大且新添加的代码没有放对位置(代码框架不合理),有些图片被挤下去了。所以我们要减少每张图片的容器宽度(将width减到9%),而且要对应着空白位置来粘贴代码。
(10)再次复制代码带135上看效果
(11)排列整齐以后,再删除原来添加的注释,就搞定啦。
(12)放到微信公众号后台,右键点击“图片替代”就好了。如果每张图片因高度不同而不整齐,还可以裁剪哦。
(13)总结一下,要会通过开发者工具,找到起作用的代码区域;调整好每个容器的宽度,使之没有多余的留白。
特别提示
做好注释,区分原来的代码和新复制的代码
如果不确定是那个代码块起作用,最好先在浏览器控制台上,修改部分代码来确定
最好懂点css、html的基础知识。道理是一样的
可以举一反三,制作自己喜欢的个性样式,但是要懂一些前端设计的知识。建议去W3Cschool或菜鸟教程上学习。
-
微信openid获取教程
用微信支付平台发放红包必须上传用户的微信openid,想要导出微信openid可以按以下步骤来做。操作方法(01)进入微信openid导出平台,根据下图1更新列表;2刷新粉丝信息;3导出数据;(02)获得的微信平台openid数据如下(03)把openid拷贝到t型台文件里,格式如下。(04)导入到微信商户平...
-
解决TeamViewer无法按给定网络地址联系伙伴
在使用TeamViewer远程控制电脑的时候,突然出现下图提示无法建立连接,无法按给定网络地址联系伙伴。然后不管怎么试,都弹出这个连接地址。下面是本人亲身经历和排除方法,仅供参考。操作方法(01)首先第一步就是修复一下网络连接,打开网络和共享中心。(02)选择自己使用的上...
-
金万维动态域名教程
现如今有很多nat123、金万维等类似的建站软件,那么怎么用金万维获得属于自己的动态域名呢?操作方法(01)登陆金万维服务器端,进入配置界面,点击配件许可证,然后点击“点击申请试用账号”。(02)按提示输入相关信息,完成注册。注册完成后,一般建议勾选“启动动态域名解析”,这...
-
如何把文件转换成PDF格式?
PDF格式在如今使用频率越来越高,在一些文档中,PDF往往比较方便文字及图片的查看。那么如何把文件直接转换成PDF格式呢?以福昕高级PDF编辑器为例,把文档改成方便的PDF格式进行浏览和编辑。操作方法(01)PDF格式的文档很多,一些方便的功能可以直接在PDF编辑器中实现。怎...