WordPress H标签美化

热门标签

首页 » WordPress » WordPress H标签美化

由于主题自带的H标签太普通了,就想到美化下H标签,之前看到基友的博客发过篇文章WordPress H标题美化就借鉴过来了.

  • 演示效果:

WordPress H标签美化

开始美化

WordPress H标签美化

查看文章的类ID,用于更换类标签

我用的是VIEU主题 我需要修改的CSS文件是main.css 目录是 域名/wp-content/themes/vieu/static/css/main.css  打开文件搜索 article-content 找的H标签的位置然后修改,下图是我修改成功后的效果图

WordPress H标签美化

CSS代码

代码如下:

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

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

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

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

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

 

标签:

未经允许不得转载:作者:聚光网络博客, 转载或复制请以 超链接形式 并注明出处 聚光网络博客
原文地址:《WordPress H标签美化》 发布于2020-03-04

分享到:
赞(1) 生成海报

评论 抢沙发

5 + 6 =


长按图片转发给朋友

Vieu4.5主题
专业打造轻量级个人企业风格博客主题!专注于前端开发,全站响应式布局自适应模板。
切换注册

登录

忘记密码 ?

切换登录

注册