WordPress标题文章H标签美化

用好H标签,既可以有效地帮助读者快速理解文章结构,获取文章主要内容;又可以方便我们后期自动生成目录。H标签页可以更鲜明的掌控文章权重,有利于SEO优化。

css美化代码

.entry-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;
}
.entry-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;
}
.entry-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;
}
.entry-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;
}

代码说明

美化代码只是针对文章的css样式不是所有H标签的样式。找到主题中的main.css也就是style.css,之后找到里边的.entry-content h1文章样式的h1或其他h标签,将其对应修改为以上代码。代码中的颜色字体大小可以根据喜好修改。

效果演示

演示效果如图:

代码说明

代码说明

代码说明

代码说明

 

PS:来自模板库的一段代码:

/*文章页标签美化*/
.entry-content h1 {
color: #f70404;
font-size: 28px;
font-weight: bold;
background-color: #fcfcfc;
margin: 20px 0;
border-bottom: 2px solid #f70404;
padding: 5px 12px;
border-left: 5px solid #f70404;
margin: 12px 0px;
border-radius: 0rem;
}
.entry-content h2 {
color: #9008ff;
font-size: 24px;
font-weight: bold;
background-color: #fcfcfc;
margin: 20px 0;
border-bottom: 2px solid #9008ff;
padding: 5px 12px;
border-left: 5px solid #9008ff;
margin: 12px 0px;
border-radius: 0rem;
}
.entry-content h3 {
color: #ee5e0a;
font-size: 20px;
font-weight: bold;
background-color: #fcfcfc;
margin: 20px 0;
border-bottom: 2px solid #ee5e0a;
padding: 5px 12px;
border-left: 5px solid #ee5e0a;
margin: 12px 0px;
border-radius: 0rem;
}
.entry-content h4 {
color: #0056ff;
font-size: 16px;
font-weight: bold;
background-color: #fcfcfc;
margin: 20px 0;
border-bottom: 2px solid #0056ff;
padding: 5px 12px;
border-left: 5px solid #0056ff;
margin: 12px 0px;
border-radius: 0rem;
}
.entry-content h5 {
color: #0bf072;
font-size: 13px;
font-weight: bold;
background-color: #fcfcfc;
margin: 20px 0;
border-bottom: 2px solid #0bf072;
padding: 5px 12px;
border-left: 5px solid #0bf072;
margin: 12px 0px;
border-radius: 0rem;
}
.entry-content h6 {
color: #00b3fa;
font-size: 10px;
font-weight: bold;
background-color: #fcfcfc;
margin: 20px 0;
border-bottom: 2px solid #00b3fa;
padding: 5px 12px;
border-left: 5px solid #00b3fa;
margin: 12px 0px;
border-radius: 0rem;
}
/*文章页标签美化*/

效果演示:

效果演示

美化代码只是针对文章页的css样式,不是所有H标签的样式,可别弄错了。找到主题模板中的main.css也就是style.css,我用的是ripro主题所以直接放diy.css里。之后找到里边的.entry-content h1文章样式的h1或其他h标签,将其对应修改为以上代码。代码中的颜色字体大小可以根据自己喜好修改。

发表评论

电子邮件地址不会被公开。 必填项已用*标注