在这篇文章中教搭建如何调整 WordPress 中 H 标签(标题标签)的段落显示效果。通过修改 CSS 样式,您可以自定义 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
喜欢就支持一下吧
相关推荐
暂无评论内容