微信公眾號 高級排版指南

一、語言準(zhǔn)備:Markdown 基礎(chǔ)入門

markdown 簡介:是一種輕量級的標(biāo)記語言焕盟,目前也被越來越多的寫作愛好者、撰稿人廣泛使用。
使用markdown編輯器:
在線編輯器:stackEdit 和 簡書
離線編輯器:Typora 消玄、Markdown Pad、 Mpu

標(biāo)題
方法1:# 一級標(biāo)題 丢胚、 ##二級標(biāo)題 翩瓜、 ###三級標(biāo)題
方法2:文字下加===(3個等號)一級標(biāo)題、---(3個小破折號)二級標(biāo)題携龟、###三級標(biāo)題一樣的兔跌。

段落
兩次回車分段效果
shift+回車為斷行、分行效果

超鏈接
方法1:在要加超鏈接的內(nèi)容上加英文字符狀態(tài)的【】峡蟋,后加圓括號()坟桅,括號中放鏈接地址。
方法2:英文字符狀態(tài)<>蕊蝗,括號中加鏈接地址或郵箱地址仅乓。

圖片
英文狀態(tài)的!【】()圓括號中放圖片鏈接地址蓬戚,推薦在線工具極簡圖床和客戶端ipic圖床神器夸楣,快速得到圖片地址鏈接。

列表
無序列表:方法1:破折號-加空格 方法2:星號*加空格子漩。
有序列表:數(shù)字1英文句號.加空格豫喧,在一級序列中再插一級子列表時,需要按住Tab鍵或按4個空格縮進(jìn)幢泼,右邊就呈現(xiàn)層級縮進(jìn)效果紧显。

引用塊
英文字符>加空格,雙重引用嵌套的樣式2個大于號>>加空格

強(qiáng)調(diào)
加粗處理:詞語兩邊各加2個**星號或2個下劃線--
傾斜處理:詞語兩邊加1個星號或1個下劃線

代碼塊
行內(nèi)代碼塊突出重點(diǎn)旭绒,呈現(xiàn)為背景略灰的色塊樣式鸟妙,在要突出的前后加英文字符的分號`(和~鍵在一起的),整個段落突出就在段落前后加3個英文字符的分號焦人。

分割線
方法1:3個英文字符狀態(tài)下的破折號---
方法2:3個或以上英文字符狀態(tài)下的星號***
方法3:1個或以上英文字符狀態(tài)下的破折號-加1個空格,要3個- - -
方法4:1個或以上英文字符狀態(tài)下的星號* 加1個空格重父,要3個* * *

規(guī)范準(zhǔn)備:公眾號排版設(shè)計規(guī)范

公眾號設(shè)計規(guī)范的要素:
配色方案花椭;價值定位區(qū)塊;導(dǎo)語區(qū)塊房午;標(biāo)題區(qū)塊矿辽;正文區(qū)塊;強(qiáng)調(diào)文本區(qū)塊郭厌;行動呼喚區(qū)塊袋倔。

配色方案:
配色方案包括彩色系和無彩色系;
彩色系一般不使用超過3種色彩折柠;
彩色系一般使用于標(biāo)題或強(qiáng)調(diào)處宾娜;
無彩色系黑白灰一般選用3~4個梯度;
無彩色系一般使用在正文和引用文本扇售。

價值定位區(qū)塊:
價值定位區(qū)塊的應(yīng)用:
提供關(guān)于公眾號的競爭優(yōu)勢前塔、用戶價值等信息;
通常是關(guān)于公眾號的一句話簡介承冰;
公式:目標(biāo)用戶+痛點(diǎn)問題+解決方式华弓;
通常的表現(xiàn)形式為:文章頭圖、作者名稱困乒。

導(dǎo)語區(qū)塊:
一般用于出現(xiàn)在文章的頭部寂屏;
通常用于表現(xiàn)創(chuàng)作背景、寫作動機(jī)或構(gòu)造懸念娜搂;
通常的表現(xiàn)形式為:左邊框+右縮進(jìn)迁霎;
在正文中,引用的表現(xiàn)形式和導(dǎo)語通用

標(biāo)題區(qū)塊的應(yīng)用:
公眾號文章標(biāo)題級別通常不超過3個級別涌攻;
二級標(biāo)題使用頻率最高欧引;
字體表現(xiàn)形式:放大频伤、加粗恳谎、主色;
對齊方式常見:左對齊憋肖、居中
其他修飾風(fēng)格各異因痛,下邊框居多。(em是默認(rèn)的倍數(shù))

正文區(qū)塊的應(yīng)用:
公眾號文章的主體岸更,創(chuàng)建設(shè)計氛圍的重要載體鸵膏;
公眾號默認(rèn)正文字體大小16px像素;
公眾號默認(rèn)正文字體顏色值#3e3e3e;

公眾號支持的字體有限怎炊,但可自定義谭企;
正文字體15px廓译、顏色#333333、1.8倍行距可以快速構(gòu)建一種優(yōu)雅感债查。

強(qiáng)調(diào)文本區(qū)塊的應(yīng)用:
強(qiáng)調(diào)文本區(qū)塊用于突出重點(diǎn)非区、表明身份等場景;
具體的表現(xiàn)形式包括加粗盹廷、傾斜征绸、加主色、放大俄占、下劃線等管怠;
公眾號最常用的兩種強(qiáng)調(diào)形式為:加粗和加主色;
外站超鏈接在公眾號圖文中無法使用缸榄,所以強(qiáng)調(diào)文本會與超鏈接文本混用渤弛。

行動呼喚區(qū)塊的應(yīng)用:
行動呼喚一般放置于公眾號的文末,是所有文章的最終目的甚带;
常用的形式包括二維碼掃描暮芭、商業(yè)購買、原文鏈接欲低、相關(guān)閱讀等辕宏;
通常需要進(jìn)行額外的圖片設(shè)計和嵌套;
二維碼掃描的形式會再次加入經(jīng)過變形的價值定位砾莱。

樣式準(zhǔn)備:自定義公眾號排版樣式

配置公眾號自定義渲染樣式:
安裝Markdown Here 打開在基本渲染css中

配色方案的自定義樣式:
提取顏色值

價值定位區(qū)塊的自定義樣式:
在公眾號后臺素材庫新建圖文中的作者位置輸入價值定位一句話瑞筐,或者在頭部插入價值定位圖作為頭圖。

0304-公眾號排版設(shè)計規(guī)范模版文件(后).jpg

導(dǎo)語區(qū)塊的自定義樣式:
打開右上角markdown here 選項(xiàng)查看基本渲染css腊瑟,在markdown here輸入欄中聚假,ctrl+f搜索:blockquote

導(dǎo)語區(qū)塊.jpg

border-left:導(dǎo)語線條:4個像素的DDD色的實(shí)線。
padding:導(dǎo)語線與文字的距離闰非,一個字符大小膘格。
color:導(dǎo)語部分777顏色。

標(biāo)題區(qū)塊的自定義樣式:
標(biāo)題2代碼 ctrl+f搜索:h2

標(biāo)題區(qū)塊.jpg

font-size:標(biāo)題2為默認(rèn)字體大小的1.4倍财松。
border_bottom:標(biāo)題下加1個像素DDD色的實(shí)線下劃線瘪贱。

正文區(qū)塊自定義樣式:
正文代碼 ctrl+f搜索:markdown-here-wrapper

正文區(qū)塊.png

font-family:正文英文字體Arenir,微信中中文字體不可改辆毡。
font-size:正文字體大小為15個像素菜秦。
color:正文字體顏色為333號。
line-height:每行間的行高為默認(rèn)的1.8倍舶掖。
margin:與邊框距上下0.5倍球昨,左右1倍。
text-align:正文文字兩邊對齊眨攘。

公眾號markdown排版生效問題:
近期微信公眾號后臺升級主慰,不再支持Markdown Here中,markdown-here-wrapper的全局設(shè)定嚣州。
可以通過渲染代碼中對P的代碼修改:
P{ margin: 0 0 1.2em 0 !important; font-family: Avenir, PT-sans !important; padding: 0.5em 1em !important; font-size: 14px !important; line-height: 1.8em;}
!important是“強(qiáng)制應(yīng)用”意思

強(qiáng)調(diào)文本區(qū)塊自定義樣式:
強(qiáng)調(diào)文本有所不同,在基本渲染css空白處插入:strong

強(qiáng)調(diào)區(qū)塊.png

color:文中強(qiáng)調(diào)部分的顏色為00F9A5共螺,一般為規(guī)范文件主色避诽,達(dá)到統(tǒng)一。
font-weight:強(qiáng)調(diào)的字體加粗bold璃谨、不加粗沙庐、減細(xì)。

行動呼喚區(qū)塊自定義樣式:
在文尾插入行動呼喚的圖片佳吞。
注意:結(jié)尾不能是引用的格式拱雏,不然行動呼喚的圖會插在引用部分中。方法1:不要在結(jié)尾用引語底扳。方法2:先插入好頭圖和行動呼喚圖片铸抑,再在中間放入內(nèi)容渲染。

導(dǎo)語

一鍵排版:公眾號自動排版工作流

安裝Markdown渲染插件
翻墻:藍(lán)燈 再安裝google旗下的Markdown插件
公眾號自動排版工作流
注意:圖片需要重新插入的衷模。

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末鹊汛,一起剝皮案震驚了整個濱河市,隨后出現(xiàn)的幾起案子阱冶,更是在濱河造成了極大的恐慌刁憋,老刑警劉巖,帶你破解...
    沈念sama閱讀 211,123評論 6 490
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件木蹬,死亡現(xiàn)場離奇詭異至耻,居然都是意外死亡,警方通過查閱死者的電腦和手機(jī)镊叁,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 90,031評論 2 384
  • 文/潘曉璐 我一進(jìn)店門尘颓,熙熙樓的掌柜王于貴愁眉苦臉地迎上來,“玉大人晦譬,你說我怎么就攤上這事疤苹。” “怎么了敛腌?”我有些...
    開封第一講書人閱讀 156,723評論 0 345
  • 文/不壞的土叔 我叫張陵卧土,是天一觀的道長。 經(jīng)常有香客問我迎瞧,道長夸溶,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 56,357評論 1 283
  • 正文 為了忘掉前任凶硅,我火速辦了婚禮,結(jié)果婚禮上扫皱,老公的妹妹穿的比我還像新娘足绅。我一直安慰自己捷绑,他們只是感情好,可當(dāng)我...
    茶點(diǎn)故事閱讀 65,412評論 5 384
  • 文/花漫 我一把揭開白布氢妈。 她就那樣靜靜地躺著粹污,像睡著了一般。 火紅的嫁衣襯著肌膚如雪首量。 梳的紋絲不亂的頭發(fā)上壮吩,一...
    開封第一講書人閱讀 49,760評論 1 289
  • 那天,我揣著相機(jī)與錄音加缘,去河邊找鬼鸭叙。 笑死,一個胖子當(dāng)著我的面吹牛拣宏,可吹牛的內(nèi)容都是我干的沈贝。 我是一名探鬼主播,決...
    沈念sama閱讀 38,904評論 3 405
  • 文/蒼蘭香墨 我猛地睜開眼勋乾,長吁一口氣:“原來是場噩夢啊……” “哼宋下!你這毒婦竟也來了?” 一聲冷哼從身側(cè)響起辑莫,我...
    開封第一講書人閱讀 37,672評論 0 266
  • 序言:老撾萬榮一對情侶失蹤学歧,失蹤者是張志新(化名)和其女友劉穎,沒想到半個月后各吨,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體撩满,經(jīng)...
    沈念sama閱讀 44,118評論 1 303
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 36,456評論 2 325
  • 正文 我和宋清朗相戀三年绅你,在試婚紗的時候發(fā)現(xiàn)自己被綠了伺帘。 大學(xué)時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
    茶點(diǎn)故事閱讀 38,599評論 1 340
  • 序言:一個原本活蹦亂跳的男人離奇死亡忌锯,死狀恐怖伪嫁,靈堂內(nèi)的尸體忽然破棺而出,到底是詐尸還是另有隱情偶垮,我是刑警寧澤张咳,帶...
    沈念sama閱讀 34,264評論 4 328
  • 正文 年R本政府宣布,位于F島的核電站似舵,受9級特大地震影響脚猾,放射性物質(zhì)發(fā)生泄漏。R本人自食惡果不足惜砚哗,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 39,857評論 3 312
  • 文/蒙蒙 一龙助、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧蛛芥,春花似錦提鸟、人聲如沸军援。這莊子的主人今日做“春日...
    開封第一講書人閱讀 30,731評論 0 21
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽胸哥。三九已至,卻和暖如春赡鲜,著一層夾襖步出監(jiān)牢的瞬間空厌,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 31,956評論 1 264
  • 我被黑心中介騙來泰國打工银酬, 沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留嘲更,地道東北人。 一個月前我還...
    沈念sama閱讀 46,286評論 2 360
  • 正文 我出身青樓捡硅,卻偏偏與公主長得像哮内,于是被迫代替她去往敵國和親。 傳聞我的和親對象是個殘疾皇子壮韭,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 43,465評論 2 348

推薦閱讀更多精彩內(nèi)容