WordPress柒比贰7b2主题模板H标签美化修改

前言

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

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

对于7b2主题的h标签有些过于简单,所以博主将其进行了些美化,今天把代码分享出来给大家,当然,其他模板也同样支持得,只要自行修改css即可

效果图预览

一般来说,1级标签基本用不到,所以这里没有进行修改,也没有对6级标签进行修改,想要改的可以自行修改

修改方式

将下列代码替换主题样式表中原本的h标签样式,可以搜索关键词entry-content来替换即可

.entry-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;
}
.entry-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;
}
.entry-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;
}
.entry-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;
}

值得一提的是其中 border-radius: 0rem; 重新定义一下样式不要圆角,可自行去掉

人已赞赏
主题修改

wordpress 7b2主题文章末尾版权提示框+本文结束图标教程免费分享

2019-8-6 10:50:42

WordPress插件网站开发

WordPress 如何用好百度熊掌号,2019年熊掌号接入教程

2019-8-20 13:52:24

⚠️ 初墨博客上的部份代码及教程来源于互联网,仅供网友学习交流,若您喜欢本文可附上原文链接随意转载。 无意侵害您的权益,请发送邮件至 link@baimu.org 或点击右侧 私信:Muze 反馈,我们将尽快处理。
2 条回复 A文章作者 M管理员
  1. ✗害羞✗ 可以可以,正需要呢

  2. 有机会试试看看

个人中心
购物车
优惠劵
今日签到
有新私信 私信列表
搜索