1. 秋硕笔记Home
  2. wordpress建站
  3. wordpress记录

WordPress H标题美化

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

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

1、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替换相应样式即可。

2、css美化代码

.post .entry-content h1{
font-size:25px;
font-weight:bold;
color: #e50d4c;
background-color: #fccad3;
border-bottom: 1px solid;
padding: 5px 15px;
border-left: 5px solid;
margin:18px 0px 18px 0px;
overflow: hidden;
}
.post .entry-content h2{
font-size:21px;
font-weight:bold;
color: #850de8;
background-color: #eeeafe;
border-bottom: 1px solid;
padding: 5px 15px;
border-left: 5px solid;
margin:18px 0px 18px 0px;
overflow: hidden;
}
.post .entry-content h3{
font-size:17px;
font-weight:bold;
color: #41b0f4;
background-color: #ddf0fe;
border-bottom: 1px solid;
padding: 5px 15px;
border-left: 5px solid;
margin:18px 0px 18px 0px;
overflow: hidden;
}
.post .entry-content h4{
font-size:13px;
font-weight:bold;
color: #20b60b;
background-color: #ebfde5;
border-bottom: 1px solid;
padding: 5px 15px;
border-left: 5px solid;
margin:18px 0px 18px 5px;
overflow: hidden;
}
.post .entry-content h5{
font-size:10px;
font-weight:bold;
color: #f1e40f;
background-color: #fefeea;
border-bottom: 1px solid;
padding: 5px 15px;
border-left: 5px solid;
margin:18px 0px 18px 10px;
overflow: hidden;
}

css代码使用说明

上述美化代码只是针对文章的css样式不是所有H标签的样式,可别弄错了。

找到主题模板中的main.css也就是style.css,之后找到里边的.entry-content h1文章样式的h1或其他h标签.将其对应修改为以上代码。

代码中的颜色字体大小可以根据自己喜好修改.为了方便修改,这里我就加上注释。

.entry-content h5{/*类选择器*/
    font-size:10px;/*字体大小*/
    font-weight:bold;/*字体加粗,值可以为数字也可以为bold(加粗)*/
    color: #f1e40f;/*字体内容颜色*/
    background-color: #fefeea;/*背景颜色*/
    border-bottom: 1px solid;/*下边框样式:1px为宽度,solid边框样式(有很多样式具体自己查吧),后边还可以加上具体颜色*/
    padding使用方法一样: 5px 15px;/*内边距属性:5px为上内边距和下内边距,15px为右内边距和左内边距也可以单独写,具体为:上右下左*/
    border-left: 5px solid;/*左边框的样式:和上边的border-bottom使用方法一样*/
    margin:18px 0px;/*外边距属性:和上边的padding使用方法一样*/
    overflow: hidden;/*当内容显示的内容超出时怎么办:hidden(隐藏超出部分),还有其他的值,自己查一下*/
}

本博客 [ 秋硕笔记 ] 内带有 原创 标签文章,均为秋硕独立创作。

撰文不易,转载请注明文章来源并保留原文链接:本文转载自 秋硕笔记

本文链接:https://www.cuikaiyun.cn/wordpress-title-beautification.html

Leave a Reply

登录后才能评论