[7B2主题美化]WordPress H标签(段落)显示效果美化

在这篇文章中教搭建如何调整 WordPress 中 H 标签(标题标签)的段落显示效果。通过修改 CSS 样式,您可以自定义 H 标签的大小、颜色、间距等,让标题更加突出并与文章内容更好地融合,从而提升页面的视觉效果和可读性。
[7B2主题美化]WordPress H标签(段落)显示效果美化

修改方法

把css代码加入到主题的style.css文件里

/* 文章内容美化 H标签  */
.entry-content > h2::before {
    content: ''; 
    margin-right: 0;
}
 
.single-article .entry-content > h2,
.single-article .entry-content > h3,
.single-article .entry-content > h4,
.single-article .entry-content > h5 {
    font-weight: bold;
    background-color: #f6f6f6;
    margin: 12px -28px; /* 保留原始的左右负 margin */
    padding: 5px 12px; /* 保证内部填充 */
    border-left: 5px solid; /* 左边框颜色 */
    box-sizing: border-box; /* 确保 padding 和 border 不影响宽度 */
    display: block; /* 让元素占满一行 */
    width: calc(100% + 56px); /* 补偿负的左右 margin,确保 H 标签宽度一致 */
}
 
/* H2 标题 */
.single-article .entry-content > h2 {
    border-left-color: #4169E1; /* 左边框颜色 */
    font-size: 21px;
}
 
/* H3 标题 */
.single-article .entry-content > h3 {
    border-left-color: #f25d8e; /* 左边框颜色 */
    font-size: 18px;
}
 
/* H4 标题 */
.single-article .entry-content > h4 {
    border-left-color: #3CB371; /* 左边框颜色 */
    font-size: 15px;
}
 
/* H5 标题 */
.single-article .entry-content > h5 {
    border-left-color: #3a89c3; /* 左边框颜色 */
    font-size: 12px;
}
 
/* 响应式设计 - 让边框和内容在屏幕缩小时自适应 */
@media (max-width: 768px) {
    .single-article .entry-content > h2, 
    .single-article .entry-content > h3, 
    .single-article .entry-content > h4, 
    .single-article .entry-content > h5 {
        font-size: 18px; /* 调整字体大小 */
        margin: 10px 0; /* 调整标题的上下边距 */
    }
    .single-article .entry-content > h2 {
        font-size: 18px; /* 在小屏幕下缩小 H2 的字体 */
    }
}
 
/*文章内容美化H标签 end*/

 

重要提示

如有解压密码: 看下载页、看下载页、看下载页。
源码工具资源类具有可复制性: 建议具有一定思考和动手能力的用户购买。
请谨慎考虑: 小白用户和缺乏思考动手能力者不建议赞助。
虚拟商品购买须知: 虚拟类商品,一经购买打赏赞助,不支持退款。请谅解,谢谢合作!

© 版权声明
THE END
喜欢就支持一下吧
点赞5 分享
评论 抢沙发

请登录后发表评论

    暂无评论内容