基于Wordpress的B2主题美化-文章H标签与赞赏区域

今天给大家带来的是B2主题的文章H标签与赞赏区域美化效果与步骤。

今天介绍的这两个点都非常简单，只要把css放到子主题的style.css即可。

话不多说，直接开动。

效果展示

文章H标签

原版B2主题只有一个H2标签是有效果的，小编是修改了H2标签并增加了H3、H4、H5三个标签，毕竟H标签在SEO中占比还是挺高的，而且小编也经常需要用到。

/*文章内容美化H标签 start*/
.entry-content > h2::before{content: '';margin-right:0;}
.single-article .entry-content > h2{
	font-weight: bold;
	background-color: #f6f6f6;
	margin: 20px 0;
	padding: 5px 12px;
	border-left: 5px solid #0061a8;
	font-size: 21px;
}
.single-article .entry-content > h3{
	font-weight: bold;
	background-color: #f6f6f6;
	margin: 20px 0;
	padding: 5px 12px;
	border-left: 5px solid #037ad1;
	font-size: 18px;
}
.single-article .entry-content > h4{
	font-weight: bold;
	background-color: #f6f6f6;
	margin: 20px 0;
	padding: 5px 12px;
	border-left: 5px solid #3a89c3;
	font-size: 15px;
}
.single-article .entry-content > h5{
	font-weight: bold;
	background-color: #f6f6f6;
	margin: 20px 0;
	padding: 5px 12px;
	border-left: 5px solid #FFC0CB;
	font-size: 12px;
}
/*文章内容美化H标签 end*/

赞赏样式

这个赞赏样式非常简单，眼见的大哥估计立马就看出来了，赞赏的渐变效果就是海报按钮的效果23333，当然这个渐变的颜色大家也可以自由发挥。

/*赞赏样式修改*/
.content-ds{
    overflow: hidden;
    margin: 10px 0;
    padding: 15px 15px 15px 35px;
    border-radius: 10px;
    box-shadow: 6px 0 12px -5px rgb(253, 223, 234), -6px 0 12px -5px rgb(215, 240, 243);
    background-color: #FFDEE9;
    background: linear-gradient(40deg,#e0c3fc,#8ec5fc);
    background: -webkit-linear-gradient(40deg,#e0c3fc,#8ec5fc);
}
.content-ds-button button{
    line-height: 34px;
    padding: 0 15px;
    box-shadow: 0px 8px 20px -5px #0061a8a3;
    transition: all .3s ease-in 0s;
    font-size: 12px;
    margin: 10px 0;
    background: linear-gradient(top,#0061a8,#2b5f85a8);
    background: -webkit-linear-gradient(top,#0061a8,#2b5f85a8);
}