WordPress H標題美化

• 2019 年 12 月 13 日
• 筆記

之前有發過修改WordPress標題的文章，不過上次那個感覺過於花里胡哨。現在還是喜歡這種簡單的。

用好H標籤一方面可以有效地幫助網站訪問者快速理解文章結構，獲取文章主要內容；另一方面如果我們後期想為文章做個目錄的話，使用H標籤也可以方便我們後期自動生成目錄。

H標籤頁可以更鮮明的掌控文章權重，有利於SEO優化。

• 效果如下圖

CSS樣式程式碼

.post-content h1,  .post-content h2,  .post-content h3,  .post-content h4,  .post-content h5  .post-content h1 {  	font-weight: bold;  	background-color: #f6f6f6;  	margin: 20px 0;  	border-bottom: 0px solid red;  	padding: 5px 12px;  	border-left: 5px solid red;  	margin: 12px 0px;  	border-radius: 0rem;  }    .post-content h2 {  	font-weight: bold;  	background-color: #f6f6f6;  	margin: 20px 0;  	border-bottom: 0px solid #FF1493;  	padding: 5px 12px;  	border-left: 5px solid #FF1493;  	border-radius: 0rem;  	margin: 12px 0px;  }    .post-content h3 {  	font-weight: bold;  	background-color: #f6f6f6;  	margin: 20px 0;  	border-bottom: 0px solid #4169E1;  	padding: 5px 12px;  	border-left: 5px solid #4169E1;  	margin: 12px 0px;  	border-radius: 0rem;  }    .post-content h4 {  	font-weight: bold;  	background-color: #f6f6f6;  	margin: 20px 0;  	border-bottom: 0px solid #3CB371;  	padding: 5px 12px;  	border-left: 5px solid #3CB371;  	margin: 12px 0px;  	border-radius: 0rem;  }    .post-content h5 {  	font-weight: bold;  	background-color: #f6f6f6;  	margin: 20px 0;  	border-bottom: 0px solid #FFC0CB;  	padding: 5px 12px;  	border-left: 5px solid #FFC0CB;  	margin: 12px 0px;  	border-radius: 0rem;  }

相應的H標籤對應相應顏色，使用方法只在在你主題里的Style.css替換相應樣式即可。

哦對了，border-radius: 0rem;

這行是因為我主題全局圓角。重新定義一下樣式不要圓角。標題方方愣愣的挺好看。你們可以刪去這行。