WordPress标题文章H标签美化

一直想把WordPress的h标签改一下,发现文章页的H标签好单调,只要大小颜色有变化,看起来也不是很明显,就动手查了一下css的内容,参考各大博客的美化样式完成了这个艰难的任务.

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标签.将其对应修改为以上代码.
代码中的颜色字体大小可以根据自己喜好修改.为了方便修改,这里我就加上注释,你们将就看看.

效果如图

WordPress标题文章H标签美化
© 版权声明
THE END
喜欢就支持以下吧
点赞0赞赏
分享
评论 抢沙发

请登录后发表评论