微信公眾號(hào)高級(jí)排版指南筆記
語(yǔ)言準(zhǔn)備：Markdown基礎(chǔ)入門
標(biāo)題
-
代表標(biāo)題，最多可疊加至5個(gè)#艾少，也就是五級(jí)標(biāo)題
- ===和---添加在文字下方也可標(biāo)記一級(jí)標(biāo)題和二級(jí)標(biāo)題
段落
- 兩次回車創(chuàng)建一個(gè)段落
- 強(qiáng)制斷行效果可通過shift+回車實(shí)現(xiàn)
超鏈接
- [鏈接名稱] (鏈接地址) 去掉空格即可
- <鏈接地址>
圖片
- 卡乾！ [] (圖片鏈接)
- 推薦圖床：極簡(jiǎn)圖床、iPic
列表
- 無(wú)序列表 * 空格
- 有序列表 1. 空格
- Tab鍵可進(jìn)行縮進(jìn)
引用塊
- “>” 空格
- “>>”可進(jìn)行多重引用
強(qiáng)調(diào)
- 兩個(gè)**或__包裹實(shí)現(xiàn)加粗
- 一個(gè)**或__包裹實(shí)現(xiàn)傾斜
代碼塊
- 行內(nèi)代碼塊為``包裹在單詞前后
- 段落代碼塊為上下各```包裹在段落前后
分割線
- “---”
- 三個(gè)*
- “- - -”
- 三個(gè)*+空格
規(guī)范準(zhǔn)備：公眾號(hào)排版設(shè)計(jì)規(guī)范
公眾號(hào)設(shè)計(jì)規(guī)范的要素
- 配色方案
- 價(jià)值定位區(qū)塊
- 導(dǎo)語(yǔ)區(qū)塊
- 標(biāo)題區(qū)塊
- 正文區(qū)塊
- 強(qiáng)調(diào)文本區(qū)塊
- 行動(dòng)呼喚區(qū)塊
配色方案
- 配色方案包括彩色系和無(wú)彩色系
- 彩色系一般不使用超過三種色彩
- 彩色系一般使用于標(biāo)題或強(qiáng)調(diào)處
- 無(wú)彩色系黑白灰一般選用3-4個(gè)梯度
- 無(wú)彩色系一般使用在正文和引用文本
價(jià)值定位區(qū)塊
- 提供關(guān)于公眾號(hào)的競(jìng)爭(zhēng)優(yōu)勢(shì)缚够、用戶價(jià)值等信息
- 通常是關(guān)于公眾號(hào)的一句話簡(jiǎn)介
- 公式：目標(biāo)用戶+痛點(diǎn)問題+解決方式
- 通常的表現(xiàn)形式為：文章頭圖/作者名稱
導(dǎo)語(yǔ)區(qū)塊
- 一般用于出現(xiàn)在文章的頭部
- 通常用于表現(xiàn)創(chuàng)作背景幔妨、寫作動(dòng)機(jī)或構(gòu)造懸念
- 通常的表現(xiàn)形式為：左邊框+右縮進(jìn)
- 在正文中，引用的表現(xiàn)形式和導(dǎo)語(yǔ)通用
標(biāo)題區(qū)塊
- 公眾號(hào)文章標(biāo)題級(jí)別通常不超過三個(gè)級(jí)別
- 二級(jí)標(biāo)題使用頻率最高
- 字體表現(xiàn)形式：放大/加粗/主色
- 對(duì)齊方式常見：左對(duì)齊/居中
- 其他修飾風(fēng)格各異潮瓶，下邊框居多
正文區(qū)塊
- 公眾號(hào)文章的主體，創(chuàng)建設(shè)計(jì)氛圍的重要載體
- 公眾號(hào)默認(rèn)正文字體大小16px
- 公眾號(hào)默認(rèn)正文字體顏色值#3e3e3e
- 公眾號(hào)支持的字體有限钙姊，但可自定義
- 正文字體15px毯辅、顏色#333333顏色、1.8倍行距可以快速構(gòu)建一種優(yōu)雅感
強(qiáng)調(diào)文本區(qū)塊
- 強(qiáng)調(diào)文本區(qū)塊用于突出重點(diǎn)煞额、表明身份等場(chǎng)景
- 具體的表現(xiàn)形式包括加粗思恐、傾斜、加主色膊毁、放大胀莹、下劃線等
- 公眾號(hào)最常用的兩種強(qiáng)調(diào)形式為：加粗和加主色
- 外站超鏈接在公眾號(hào)圖文中無(wú)法使用，所以強(qiáng)調(diào)文本會(huì)與超鏈接文本混用
行動(dòng)呼喚區(qū)塊
- 行動(dòng)呼喚一般放置于公眾號(hào)的文末婚温，是所有文章的最終目的
- 常用的形式包括二維碼掃描描焰、商業(yè)購(gòu)買、原文鏈接、相關(guān)閱讀等
- 通常需要進(jìn)行額外的圖片設(shè)計(jì)和嵌套
- 二維碼掃描的形式會(huì)再次加入經(jīng)過變形的價(jià)值定位
樣式準(zhǔn)備：自定義公眾號(hào)排版樣式
配置公眾號(hào)自定義渲染樣式
配色方案的自定義樣式
- 保存配色方案的顏色值
價(jià)值定位區(qū)塊的自定義樣式
- 直接插入圖片
導(dǎo)語(yǔ)區(qū)塊的自定義樣式
- blockquote分組代表導(dǎo)語(yǔ)區(qū)塊
- border-left為導(dǎo)語(yǔ)左邊黑線的寬度和顏色荆秦、soild為實(shí)線
- padding代表左邊的線和文字的距離,即內(nèi)邊距篱竭，1em為一個(gè)默認(rèn)字體的大小
- color為導(dǎo)語(yǔ)的顏色
標(biāo)題區(qū)塊的自定義樣式
- h2（二級(jí)標(biāo)題）分組代表標(biāo)題區(qū)塊
- font-size為字體大小
- border-bottom為標(biāo)題下方邊框的厚度、實(shí)線和顏色
正文區(qū)塊的自定義樣式
- wrapper分組代表正文區(qū)塊
- font-family為英文字體（中文字體無(wú)法更改）
- font-size為正文字體大小
- color為正文顏色
- line-height為行高步绸，行與行之間的空隙
- margin為上下掺逼、左右空出的距離，即外邊距
- text-align為正文的對(duì)齊方式
Notes | 公眾號(hào) Markdown 排版失效的問題
問題：
學(xué)習(xí)完課程后瓤介，在實(shí)踐過程中遇到了這樣一個(gè)問題吕喘。當(dāng)我一鍵markdown后，排版樣式只是臨時(shí)統(tǒng)一刑桑。當(dāng)我保存后氯质，再次打開，發(fā)現(xiàn)排版字體又變回了16px漾月，另外上下左右邊距也消失了病梢。
近期微信對(duì)公眾號(hào)后臺(tái)編輯器做了一些功能的升級(jí)和調(diào)整，就不再支持 Markdown here中 .markdown-here-wrapper的全局設(shè)定梁肿。所以如果你需要調(diào)整正文的樣式蜓陌，需要改用P標(biāo)簽來進(jìn)行自定義。
比如你需要調(diào)整所有段落文字的邊距吩蔑、字體類型钮热，可以通過在 Markdown Here的渲染代碼中對(duì)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)用”的意思。
當(dāng)然在郵件烛芬、非微信公眾號(hào)編輯器等其他地方還是可以正常使用的隧期。
Notes | 如何在自定義微信正文字體
微信上支持的字體有限沦补，這個(gè)取決于微信內(nèi)的瀏覽器支持那些網(wǎng)頁(yè)字體邑贴，所以最妥當(dāng)?shù)木褪鞘褂盟J(rèn)的字體(點(diǎn)擊“清除格式”)后顯示的那一個(gè)。
但是根據(jù)目前在IOS設(shè)備的嘗試儿咱，支持的中文字體有：平方(PingFangSC)遣臼，微軟雅黑(Microsoft YaHei)性置，華文細(xì)黑（STHeiti Light）等等，具體的常見字體代號(hào)參見：中文網(wǎng)頁(yè)用什么字體最合適揍堰？
那應(yīng)該如何在Markdown Here中修改呢鹏浅？我們可以挑選出對(duì)應(yīng)的正文標(biāo)簽P，然后做如下屬性聲明：
p {
font-family: PingFangSC-regular, "Microsoft YaHei", STXihei, serif;
}
上面之所以有多個(gè)字體屏歹，主要的規(guī)則有三條：
優(yōu)先使用排在前面的字體隐砸。
如果找不到該種字體，或者該種字體不包括所要渲染的文字蝙眶，則使用下一種字體季希。
如果所列出的字體，都無(wú)法滿足需要，則讓操作系統(tǒng)自行決定使用哪種字體胖眷。
強(qiáng)調(diào)文本區(qū)塊的自定義樣式
- strong分組代表強(qiáng)調(diào)區(qū)塊
- color為強(qiáng)調(diào)文本顏色
- font-weight為強(qiáng)調(diào)字體大小武通，有l(wèi)ight、normal和bold三種大小
行動(dòng)呼喚區(qū)塊的自定義樣式
- 直接插入圖片
- 當(dāng)最后一句話為引用語(yǔ)時(shí)行動(dòng)呼喚圖片也會(huì)被引用進(jìn)去珊搀，因此需要提前插入圖片避免這種情況
