调整WordPress显示宽度

刚才忽然想调整一下我的Wordpress博客的宽度,发现一般都是在style.css这个CSS文件中调整的,其位置位于你所安装的主题下面,如:本博客的在wp-content/themes/blocks2/style.css这里(如果是默认的主题则是default/style.css)。
根据Google Analytics的统计,访问我网站的客户端屏幕分辨率前十名分别如下:

Order Screen Resolution Visits Contribution to total
1. 1440×900 744 21.82%
2. 1366×768 720 21.12%
3. 1280×800 451 13.23%
4. 1280×1024 275 8.07%
5. 1920×1080 223 6.54%
6. 1680×1050 213 6.25%
7. 1024×768 187 5.49%
8. 1600×900 133 3.90%
9. 1920×1200 61 1.79%
10. 1360×768 35 1.03%

 
前十名中都没有屏幕分辨率的宽度在1024像素之下的,根据更详细的数据看出,宽度在1024像素之下的仅占不到1%的,所以为了我的99%以上读者的体验提高,我将此博客的显示总宽度调整为1000像素。
我调整了如下几个地方,当然,不同主题的style可能对应不同的代码段,如下仅供参考。

总体布局的宽度:1000 Pixels

/* layout START */
#wrap {
	text-align:left;
	margin:0 auto;
	width:1000px;
}
#container {
	background:#D6D6D6;
	padding:0 3px 3px;
}
/* layout END */

主体部分的博客文章显示的宽度:710 Pixels

/* main START */
#main {
	width:710px;
	margin:10px 0 0;
	float:left;
	overflow:hidden;
}
.post .title {
	background:#F1F5F6;
	padding:5px 10px 3px 15px;
	color:#258;
}
.post .title a:hover {
	color:#333;
	text-decoration:none;
}
.post .meta {
	background:#F1F5F6;
	padding:0 10px 5px 15px;
}
.post .meta .info {
	font-size:10px;
	float:left;
}
.post .meta .comments {
	font-size:10px;
	float:right;
}
.post .tags {
	font-size:10px;
	margin-bottom:10px;
}
.post .content {
	line-height:145%;
	padding:10px 0 10px 15px;
	overflow:hidden;
}
.post .content h4 {
	font-size:14px;
	margin-bottom:8px;
	color:#60743A;
}
.post .content img {
	max-
	:600px;
}
.post .content p {
	margin-bottom:8px;
}
.post .content ul,
.post .content ol {
	padding-bottom:10px;
}
.post .content ul li,
.post .content ol li {
	list-style-position:inside;
	padding-left:20px;
}
.post .content table {
	border-collapse:collapse;
	background:#FFF;
	margin:5px 0 10px;
	border:2px solid #E1E7E9;
}
.post .content table tr td,
.post .content table tr th {
	border-left:1px dotted #FFF;
	border-right:1px dotted #FFF;
	border-bottom:1px solid #FFF;
	text-align:left;
	vertical-align:middle;
	padding:5px 10px;
}
.post .content table tr td {
	background:#F1F5F6;
}
.post .content table tr th {
	background:#E1E7E9;
}
#pagenavi,
#postnavi {
	background:#F6F9E7;
	padding:1px 10px 1px 15px;
	font-size:10px;
	margin-bottom:10px;
}
#commentnavi {
	background:#F6F9E7;
	padding:6px 10px 6px 15px;
	font-size:10px;
}
#postnavi,
#commentnavi {
	margin-bottom:10px;
}
#pagenavi span,
#postnavi span,
#commentnavi span {
	margin:-1px 0;
}
#pagenavi span a,
#postnavi span a,
#commentnavi span a {
	display:block;
	text-decoration:none;
	padding:5px 10px;
}
#pagenavi span a:hover,
#postnavi span a:hover,
#commentnavi span a:hover {
	background:#ECF3D3;
}
/* main END */

侧边栏的宽度:270 Pixels

/* sidebar START */
#sidebar {
	width:270px;
	margin:10px 0 0;
	float:right;
	overflow:hidden;
}
.widget {
	background:#F1F5F6;
	margin-bottom:10px;
	padding:0 10px 5px;
}
.widget h3 {
	background:#E1E7E9;
	margin:0 -10px;
	padding:5px 10px;
	font-size:11px;
	border-bottom:1px solid #FFF;
}
.widget ul {
	margin:0 -5px;
}
.widget li {
	list-style:none;
	padding:3px 5px;
	border-bottom:1px solid #E1E7E9;
	line-height:18px;
}
.widget div.itembox {
	padding: 5px 0 0;
}
.widget li ul {
	padding-right:0;
	margin-left:10px;
}
.widget li li {
	padding:3px 5px 0;
	border-top:1px solid #E1E7E9;
	border-bottom:none;
	margin-top:3px;
}
/* sidebar END */

master

Stay hungry, stay foolish.

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注

*