秋硕学习笔记 美化 WordPress H标题美化

WordPress H标题美化

漂亮鲜明的H标题不仅能方便读者快速查看文章内容,而且可以方便后期自动生成目录。 下列代码中,.post-con…

漂亮鲜明的H标题不仅能方便读者快速查看文章内容,而且可以方便后期自动生成目录。

下列代码中,.post-content中的post参数有些主题可能不一样。我的主题是.entry-content h2,所以我将post换成entry。请根据自己主题做相应修改。

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;

0rem根据喜好修改“0”参数,填写数字可以修改圆角弧度大小。

声明:本站所有文章,如无特殊说明或标注,均为本站原创发布。任何个人或组织,在未征得本站同意时,禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。若本站内容侵犯了原著者的合法权益,请联系我们进行处理。本文地址:https://wparticle.cn/208.html

作者: wordus

记录生活感悟,分享网络资源,交流学习体会,感受美好人生。秋硕学习笔记,记录分享学习、生活、工作、旅游、健身、爱好的个人博客。

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注

返回顶部