刚才忽然想调整一下我的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 */
1440×900