微信推文排版——制作自己想要的滑动相框
通常为了减少推文的篇幅,我们会使用滑动相框来放置大量图片。但第三方推文排版神器提供的滑动相框限定只能放置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或菜鸟教程上学习。
-
如何使用vmware workstation 12安装虚拟机
虚拟机可以在不安装实际系统的前提下,通过模拟器工具直接在模拟器上安装虚拟的系统。可以在虚拟系统上使用如何真实系统一样。小编今天介绍下如何使用vmwareworkstation12安装虚拟机,linux虚拟机安装方法步骤。操作方法(01)首先下载vmwareworkstation虚拟机工具。...
-
如何利用歌词搜索歌曲名——歌词搜歌的技巧
现代娱乐的方式有很多种,怎么能够在这么多的娱乐活动中选择自己的最爱的生活方式呢,其中很多人在独处的时候喜欢听着音乐,享受难得的独处时光。但有时候想找一首自己喜欢的歌曲,可是不管怎么想都想不起歌名来,那怎么通过简单的几句歌词知道你想听的这首歌的名字呢操...
-
为什么qq老掉线/QQ自动掉线原因与解决方法
最近有朋友问为什么我的QQ老掉线,提示说和服务器连接失败,以前都没这种事的,也不知道是从什么时候开始就老爱掉线了,而且是时好时掉线的,根据网上的一番收集与调查,总结出了以下QQ自动掉线所导致的原因与解决方法,以下一起来看看怎么解决qq自动掉线的故障吧!QQ自动掉线...
-
怎么给淘宝店铺的宝贝分类进行分类
新版店铺宝贝分类已上线,新版分类内容更清晰,消费者浏览更高效,同时也支持二级以上的商品分类。操作方法(01)搜狗搜索淘宝进入“官网”,进行登陆账号(02)登陆之后,进入旺铺后台()——【店铺装修】——【手机端】,选择页面左侧【分类】(03)选择新版宝贝分类页面,注意:新版分类页...