WordPress文章页H标签一级标题二级标题美化教程

平时使用WordPress默认的编辑器编辑文章时,喜欢使用默认的“一级标题”、“二级标题”等来为文章设置段落标题以更好地实现文章的层级结构。这些段落标题就是HTML中的一个个H标签,使用段落标题一方面可以有效地帮助网站访问者快速理解文章结构,获取文章主要内容;另一方面如果我们后期想为文章做个目录的话,使用H标签也可以方便我们后期自动生成目录。

 

本站使用的主题的H标签是没有美化的,每次编辑文章的时候都要手动的去调整字体、颜色等,很是麻烦。于是在网上搜集了一下教程,很容易就可以实现H标签的美化。

首先要找到你的主题css文件以及H标签class所在位置,在网站文章页右键点击检查或者审查即可。

我的主题是在style.css:181。然后用FTP把style.css文件下载下来,在对应位置加入以下代码:

/** 文章页H标签美化 **/
.article-content h1, .article-content h2{
	font-weight:bold; 
	background-color: #f6f6f6;
	margin:20px 0;
	border-bottom: 0px solid #12b4f0;
	padding: 5px 12px;
	border-left: 5px solid #24b4f0;
	margin:12px 0px;
}



前面的代码不用改,加入{}里面的位置就行了。具体的样式颜色等可以根据自己的主题风格调整。效果如下:


其实也可以直接把上面的代码复制到 外观→主题设置→自定义代码→自动以CSS样式里面。
来源:文章部分内容来自网络,由智能家居指南网整理发布,侵删!

发表评论