为你的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个),不过一般的主题仅仅占用两个而已。
- 03 JVM的垃圾回收机制
- Tomcat就是这么简单
- Servlet第三篇【request和response介绍、response的常见应用】
- 通过java来格式化sql语句(r4笔记第61天)
- Servlet第四篇【request对象常用方法、应用】
- Servlet第五篇【介绍会话技术、Cookie的API、详解、应用】
- Java类加载器(用户自定义类加载器实现)
- Servlet第六篇【Session介绍、API、生命周期、应用、与Cookie区别】
- 一个oracle蠕虫病毒 (r4笔记第60天)
- 提高效率,eclipse上你可能不知道的技巧
- AJAX入门这一篇就够了
- 014 Java的反射机制
- XML+JSON面试题都在这里
- 客户关系管理系统
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法