微信推文排版——製作自己想要的滑動相框

通常爲了減少推文的篇幅，我們會使用滑動相框來放置大量圖片。但第三方推文排版神器提供的滑動相框限定只能放置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或菜鳥教程上學習。