专栏首页DeveWork为你的WordPress 博客文章页面增加多彩排版条

为你的WordPress 博客文章页面增加多彩排版条

不知这个上面这个题目会不会让人产生误解,再说明一下,所谓排版条即是如下面的一个绿色的彩条(当然颜色可以自己设定)。有了这个排版条,能更加容易区分内容文字及总结文字,使得读者在阅读你的文章的时候看到的是井然有序的排版,而不是千篇一律的文字堆砌。

在网站统计中有一个术语:跳出率。跳出率是指在只访问了入口页面(例如网站首页)就离开的浏览量与所产生总浏览量的百分比,跳出率越高,意味着网站越没有吸引力;读者没有兴趣在网站再逗留下去,而是选择关闭窗口。对于wordpress博客,好的文章排版能在一定程度上降低跳出率。

Jeff认为,wordpress博客文章排版是一项技术活,能搞好排版的必定是了解wordpress本身、具有一定专业技术(网页相关)基础、文笔好的少数人——他们或许是将一篇文章排成如同网页设计的效果了。但对于我们这些专心写写文章,却又挺在乎浏览数的博主来说,是有必要提升一下文章排版的。

接下来提供教程——为你的wordpress博客文章页面增加多彩排版条:

一、打开你的wordpress主题文件的style.css文件,看看html代码中的<h1>~<h6>这六个标题属性你的主题用了多少个,找出没有用的。

不懂这<h1>~<h6>六个标题属性的童鞋麻烦入门一下html知识。

比如,有些主题的标题可能是以<h2>作为属性的,<h3><h4>都可能用于不同地方。那么剩下<h1><h5><h6>没有使用的就是我们要用于排版条的。

二、找到style.css相关代码,添加入诸如以下代码:

#content h1{margin:5px;padding:2px 8px;background:#15B00D;color:#fff;font-size:16px;border:1px solid #e5e5e5;-moz-border-radius: 5px;-webkit-border-radius: 5px;border-radius: 4px;line-height:25px;}

#content h5{margin:5px;padding:2px 8px;background:#A3C159;color:#fff;font-size:16px;border:1px solid #e5e5e5;-moz-border-radius: 5px;-webkit-border-radius: 5px;border-radius: 4px;line-height:25px;}

#content h4{margin:5px;padding:2px 8px;background:#40BBEC;color:#fff;font-size:16px;border:1px solid #e5e5e5;-moz-border-radius: 5px;-webkit-border-radius: 5px;border-radius: 4px;line-height:25px;} 根据主题不同,选择器(如上面的#conent)可能不同,这就需要你自己去折腾了。颜色也可以自定义,只要替换如#000000的颜色代码;其他亦可自定义(需要懂一些css知识)。

三、使用方法

写文章时就可以在编辑器的html环境下实现排版条。如我想“AAAAAAAA”为总结性句子使用排版条,在编辑器的html环境下,输入入对应属性即可。如”<h1>AAAAAAAA</h1>”。保存即可。

注意问题:

想要实现多种颜色排版条需要你有多个闲置的h属性(当然最多不过6个),不过一般的主题仅仅占用两个而已。

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • WordPress 添加个性化的博客宠物(妹纸篇)

    某日闲逛看到的某个博客上的一个博客宠物,准确来说不是宠物,人家可是萌妹纸啊!看看右侧这个图,就是这个萌妹纸了(后来用谷歌相似图片搜索才发现是死亡笔记的)。让我感...

    Jeff
  • WordPress免插件仅代码实现“返回顶部、返回底部、评论”效果(样式一)

    本文所说的”返回顶部、返回底部、评论 “相信你知道是什么东东了吧?  一般你在各大网站的右下角都能看到类似的东东,但许多网站都普遍只有“返回顶部”的效果。不过就...

    Jeff
  • WordPress 添加个性化的博客宠物(汉纸篇)

    之前一篇文章分享了在WordPress 添加个性化的萌妹子的方法(见:《WordPress 添加个性化的博客宠物(妹纸篇)》),不过那个不适合广大的男汉纸的博客...

    Jeff
  • 常用的 CSS 技巧

    你不需要分别添加 line-height 到每个p,h标记等。只要添加到 body 即可:

    flytam
  • html前端之css绘制形状

    纯CSS绘制的图形,有最简单的矩形、圆形和三角形,也有各种常见的多边形,甚至是阴阳太极和网站小图标,非常强大。

    菲宇
  • jquery封装的时间轴

    很多时候,都会用到类似于时间轴的东西,鉴于网络资源没有那么顺手,就想着自己搞一个,在此将源码贴出来。

    lzugis
  • wordpress后台登录界面美化

    @font-face { font-family:fzz; src: url('https://img.zmki.cn/ttf/fzz.ttf'); } ...

    AlexTao
  • markdown样式代码保存

    /*此样式是没任何效果的,留给你填写的 你可以随意修改,组合你想要的css样式 没有最好的,只有最合适的, 看看后面的示例,你就会懂得写个你最爱的样式,并...

    xing.org1^
  • 我和我亲爱的祖国(用CSS来为祖国母亲庆生)

    相信大家最近已经被 《我和我的祖国》 这首歌给刷屏了,鱼头每次在听到这首歌的时候,总会感慨万千,我们伟大的新中国,这70年真的经历了太多太多了。

    陈大鱼头
  • 通过css设置滚动条样式

    在移动端通常情况下滚动条是不显示出来,这样会让一些不明就里的人不知道是否可以滑动查看更多的信息,通过css可以来设置滚动条的样式,并且让它一直显示出来。

    无邪Z

扫码关注云+社区

领取腾讯云代金券