WordPress H标题美化

之前有发过修改WordPress标题的文章,不过上次那个感觉过于花里胡哨。现在还是喜欢这种简单的。

用好H标签一方面可以有效地帮助网站访问者快速理解文章结构,获取文章主要内容;另一方面如果我们后期想为文章做个目录的话,使用H标签也可以方便我们后期自动生成目录。

H标签页可以更鲜明的掌控文章权重,有利于SEO优化。

测试

CSS样式代码


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
.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;
}
点赞

发表评论

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