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

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