WordPress建站教程:美化WordPress默认的H标签样式

科技11个月前发布 iowen
143 0 0


Wordpress建站教程:美化Wordpress默认的H标签样式


继续分享wordpress建站教程,今天我们给wordpress站点默认的H标签修改样式(主要是为了方便我直接复制样式到微信公众号,哈哈),让它好看一点。如果你的网站文章内容比较长,那么大概率会用到H标签,至少会有H2标签,或者是H3标签,这样可以让网站内容显得更有条理,对网站SEO优化也有不少好处。但是wordpress默认的H标签样式是比较难看的,只有一个又大又粗的样式。接下来我们就开始对H标签样式进行简单的美化。

步骤一:找到当前网站的H标签样式

有人可能尝试过直接代别人分享出来的CSS样式,但是直接使用时却没有生效,因为不同的网站不同的主题,它原来的CSS样式ID是不一样的,所以我们需要先找到当前网站的H标签CSS样式。

Wordpress建站教程:美化Wordpress默认的H标签样式

先打开一篇含有H标签的文章,浏览中按F12进入开发者模式,选中H标签,从代码中找到当前H标签的CSS样式,如上图右边,我们确定了当前网站的H2样式ID为【.blog-details .details-content h2】。然后我们只需要把写好的CSS样式添加进去就可以了。同样的方法我们可以找到H3标签为【.blog-details .details-content h3】。

步骤二:编写CSS样式

接下来我们可以直接在浏览器在调试CSS样式,如果不懂也可以直接用别人写好的来修改,最终悦然建站确定好的样式如下:

.blog-details .details-content h2 {    font-size: 22px;    margin-top: 20px;    padding-left: 10px;    position: relative;    border-bottom: 1px #eee solid;    border-left: 5px solid #fcab03;    margin-bottom: 10px;}
.blog-details .details-content h3 { font-size: 18px; margin-top: 20px; padding-left: 10px; position: relative; border-bottom: 1px #eee solid; border-left: 3px solid #fcab03; margin-bottom: 10px;}

步骤三:添加CSS代码

最后我们只需要把上面的CSS代码添加到当前使用的wordpress建站主题中即可,悦然wordpress建站之前的一篇文章给大家介绍过修改CSS的方法,大家没看过的可以先去了解一下。

WordPress建站教程:为什么修改CSS不能立即生效?如何解决?

https://www.zsxxfx.com/23633.html

Wordpress建站教程:美化Wordpress默认的H标签样式

这里悦然建站推荐添加额外的CSS代码,不要直接修改主题的CSS文件。上面的代码可以直接添加到主题的【额外CSS】功能中,或者是添加到其它的CSS插件中。部分主题在添加上面的CSS代码时需要使用style标签闭合。

Wordpress建站教程:美化Wordpress默认的H标签样式

最终的H标签效果如上图所示,上面分别是H2和H3标签的效果,这样会比原来的H标签样式好看一些。

总结

今天的wordpress建站教程就分享到这里。这里要提醒一点,虽然CSS样式可以实现很多漂亮的效果,但是如非必要,CSS样式还是不要太多,多了反而影响效果。


推荐阅读:


WordPress建站教程:多语言外贸建站的方法及必要性分析

Wordpress建站教程:美化Wordpress默认的H标签样式

悦然建站分享:为什么国外的Wordpress主题很难用?

Wordpress建站教程:美化Wordpress默认的H标签样式

WordPress企业建站能够达到什么效果?



© 版权声明

相关文章

暂无评论

暂无评论...