WordPress H标题美化
之前有发过修改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;
这行是因为我主题全局圆角。重新定义一下样式不要圆角。标题方方愣愣的挺好看。你们可以删去这行。
本文参与 腾讯云自媒体分享计划，分享自作者个人站点/博客。
原始发表：2019-07-28，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读
目录