css也能定制博客,蓝白之风
分类:前端操作

自暑假以来,囫囵吞枣一般蒙头栽入前端自学中,且不说是否窥探其道,却不自觉中提高了对网页版面设计的要求,乃至挑剔。一个设计清爽美观的网页能让读者心旷神怡,甚至没有了阅读疲劳;而一个设计粗劣嘈杂的网页实在让读者为之揪心难受,何谈长时间阅读,不仅苦了眼睛,倦了身体,更是伤了精神。

不懂CSS也能定制博客界面!,css也能定制博客

之前没想过定制博客界面,毕竟CSS,HTML什么的都不懂,不过看了这篇文章分分钟搞定:

【详细图解】一步一步教你自定义博客园(cnblog)界面

我是基于模板BlueSky做了些改动,先看修改前后的效果:

修改前:

图片 1

修改后:

图片 2

于博客园中开博撰文后,不时为众多设计精彩的博客主题而流连忘返,且不说博文质量如何,单看那设计用心,清新自然的博客,便对博主的审美感观频添几分赞许,自然要驻留些时候细细拜读博主的随文,因此风格样式对于博客就好似于地段门面对于酒楼一般,重要非凡,虽说酒香不怕巷子深,博文甚佳者自然可不必拘泥于小节,本文借以告诫劣酒藏深巷者:既已开博,请用心相待!

1先动手!什么都别管!

在我的博客-管理-设置-页面定制CSS代码,只添加有改动的CSS代码段即可,CSS代码从当前模板获取,方法如下.

使用chrome浏览器,在博客界面按F12查看当前模板(BlueSky)的代码如图

图片 3

不懂CSS的我一脸懵B,不过上图左上角有个神器

图片 4

将箭头选中,即可从博客界面的模块定位到对应的模块代码,而且可以查看选中模块的类名(截图显示不出来)

图片 5

不过这个方法容易定位不准,如果要改成理想的效果还是需要分析下博客界面的CSS代码结构

本人未曾研习半点设计知识,一大遗憾,却仍然对本博客用心相待,几分实力便呈现几分设计,同时也希望能够提高读者的阅读感受,便为博客自定义一套风格样式,自己毫无设计功底,故不敢大肆宣谈用户体验,有班门弄斧之嫌。每每有博友望借鉴几分这“蓝白样式”,如今便呈了这份心意,样式开源并撰文记之。

2代码结构

下面一层层展开代码来分析

博客界面按F12显示代码如下,鼠标移到代码上会自动选中对应的博客界面模块,很方便查看代码和界面的对应关系

图片 6

这结构很明显:头(header)和身体(body)

展开body中的home

图片 7

又分为头(header),主体(main)和脚(footer)

再分别展开如下

图片 8

找到了导航栏,主体内容,侧边栏,基本就改这么几项

初始化模板

选择官方模板“LessIsMore”作为本博客样式的初始化模板,由于LessIsMore模板框架简洁自然,可以更为灵活的对其进行自定义重载。该模版框架大致为简单的两栏布局,顶部为博客名称与个性签名,签名下方是博客导航栏,主面板分为左右两栏,左边栏为导航索引栏,右边栏为博文标题、摘要的内容区域,底部为博客页脚。

图片 9

2.1更改总体宽度

图片 10

原始博客的显示太窄,更改右侧navigator函数(?)的width为1550,看函数名应该是全局的宽度,全局宽度大概=博客内容栏宽度+侧边栏宽度

效果如下

图片 11

通过CSS定制页面风格

通过自定义CSS代码便可定制专属的页面风格,在博客中“管理”-“设置”-“通过CSS定制页面风格”的输入框中,输入自定义的CSS代码,同时勾选下方“禁用模板默认CSS”选项,则博客即会启用定制的页面风格。

顾名思义,下方的三个输入框:“博客侧边栏公告”、“页首HTML代码”、“页脚HTML代码”,即将相应的HTML代码输入各自框中,博客便可通过代码对特定部分进行框架改造。

如果单薄的HTML/CSS设计代码无法令你尽兴,那么建议:书写邮件一封向博客园管理员申请添加JavaScript代码权限,便可酣畅淋漓的为自己的博客增添交互行为了。

本博客整体风格为蓝白相间式,白色为底,蓝色浮之上,显得简洁自然,交互时由蓝色转为橙色,醒目专注却不突兀,在于提醒用户的操作。本人也是甚喜简单之风,故无奢华之范,简约而不简单。

 图片 12

2.2更改内容栏宽度

然后把内容栏加宽,修改maincontent函数宽度为1300

图片 13

效果如下

图片 14

博客头部

将博客头部定制为:凸显博客名称,弱化博客签名。签名可时刻改动,而博客名称却如品牌一般不轻易大删大改,因此凸显博客名称既表明了博客名称的重要性与稳固性,同时也希望读者能够对博客名称印象深刻,从而提升博客知名度,至少混个脸熟!

图片 15

javascript在博客顶部创建头部框架:

<script type="text/javascript" >
/*博客头部*/
$("body").html('<div class="head clearfix"><h1><a href="http://www.cnblogs.com/twobin/">twobin’blog</a></h1>努力学习前端技术 | 其实技术也可以是通俗易懂的!</div>');
</script>

 CSS为博客头部定制样式:

.head{
    height: 60px;
    line-height:60px;
    padding-left:200px;
    box-shadow: 0 2px 2px rgba(0,0,0,0.2);
    background: #fff;
}
.head h1{
    float:left;
    width:200px;
    height: 60px;
    font-weight:bold;
    font-size:26px;
    background-color: #1f7b9b;
    text-align: center;
}
.head h1:hover {
    float:left;
    width:200px;
    height: 60px;
    font-weight:bold;
    font-size:26px;
    background-color: #ff7227;
    text-align: center;
}
.head h1 a{
    color: #fff;
    outline:none;
    -moz-outline:none;
    text-decoration:none;
}
#blog{
    font-weight:normal;
    font-size:16px;
    color: #fff;
}
#subtitle{
    display:block;
    float:right;
    font-size:18px;
    color:#999;
    line-height:18px;
    margin:20px 200px 0 0;
}

 

2.3更改侧边栏宽度及位置

更改sidebar宽度为180,修改侧边栏位置实际是修改内容栏位置,在maincontent修改位置为right

图片 16

图片 17

效果如下

图片 18

这样已经达到了预想效果,下面改上方导航栏字体

博客导航栏

将博客导航条单独成栏,一方面是凸显导航栏的重要性,方便自身以及读者操作,另一方面也是使得整个博客页面更为饱满,而不只是单独的两栏设计。

图片 19

CSS为博客导航栏定制样式:

#header {
    display: block;
}
/*导航栏*/
#navigator {
    font-size:16px;
    height:48px;
    background:#fff;
    text-align:center;
    margin-top:20px;
    border-radius: 4px;
    box-shadow: 0px 0px 10px #1f7b9b;
    border: 1px solid #1f7b9b; 
}
#navList li {
    margin:0;
    line-height:48px;
    display:inline-block;
    float:left;
}
#navList li:hover {
    background:#1f7b9b;
}
#navList li a {
    padding:0 30px;
    text-decoration:none;
    line-height:48px;
    border:0;
    color:#1f7b9b;
    font-weight:bold;
    display:-moz-inline-box;
    display:inline-block;
}
#navList li a:hover  {
    padding:0 30px;
    text-decoration:none;
    line-height:48px;
    border:0;
    color:#fff;
    font-weight:bold;
    display:-moz-inline-box;
    display:inline-block;
}
.blogStats {
    height:48px;
    color:#1f7b9b;
    line-height:48px;
}

 

2.4更改导航栏宽度及字体

选中前文说的神器图片 20,选中整个导航栏,修改header的height为50.

图片 21

选中导航栏的字体,修改#navList li a的font-size为22.

图片 22

效果如下

图片 23

博客左侧边栏

左侧边栏包含:公告、访客记录、相片、微博、个人简要信息、日历、随笔分类、随笔归档、关注前端博客、积分排名、最新评论、阅读排行、评论排行、推荐排行。

其中较为重要的部分,访客记录:可以清晰的查看博客目前的访问数、是了解博客热度的一大利器;微博:挂载微博挂件,不仅充实博客的个人信息,而且在一定程度上可以提升微博的粉丝数与关注度;关注前端博客:可以使读者了解博主的关注对象与关注内容,同时也便于自身查看所关注的博客。

通过CSS为博客左侧边栏定制样式:

#main {
    margin: 30px 0 15px 0;
    padding: 0;
}
/*左边栏*/
#sideBar {
    background: #fff;
    width: 205px;
    padding: 25px 15px;
    font-size: 12px;
    border-radius: 4px;
    box-shadow: 0px 0px 10px #1f7b9b;
    border: 1px solid #1f7b9b;
}
#sideBarMain {  
    line-height:24px;
}
/*公告*/
#profile_block {
    margin-top:0px;
    line-height:24px;
    text-align:left;
}
.newsItem .catListTitle {
    display: none;
}
.mySearch .catListTitle{
    display: none;
}

 

2.5更改图片显示宽度

以本文的显示效果为例,为改动图片如下显示

图片 24

F12运用箭头神器选中图片,更改cnblogs_post_body img中的max-width为1200(<内容宽度1300)

图片 25

效果如下

图片 26

博客右侧内容栏

右侧内容栏里一个页面包含10篇文章,每篇文章主要包含:文章标题、文章摘要、右侧小图片、以及文章发布信息、阅读评论数等。

一个页面中所包含的文章数,如果小于10篇,则显得页面文章数过少,内容单调,且右侧栏高度明显小于左侧栏,从而出现大部分留白,降低视觉效果;如果多于10篇,则会显得单页冗长,提高阅读疲劳,因此单页中设置为包含10篇文章为佳。

图片 27

CSS为博客右侧内容栏定制样式:

/*主面板*/
#mainContent {
    margin-top:0px;
    padding: 25px 15px;
    background:#fff;
    float:right;
    width:920px;
    border-radius: 4px;
    box-shadow: 0px 0px 10px #1f7b9b;
    border: 1px solid #1f7b9b;
}
/*每日文章列表*/
.day {
    background:#fff;
    padding:0;
    margin:0 0 20px 0;
}
/*博客标题*/
.postTitle a {
    color:#1f7b9b;
}
.postTitle a:hover {
    color: #ff7227;
    text-decoration: underline;
}
.postTitle {
    padding-bottom:10px;
    font-size:20px;
    font-weight:bold;
    color:#1f7b9b;
    backgroundnull:url(http://images.cnblogs.com/cnblogs_com/twobin/520730/o_br229512.link(en-us,MSDN.10).gif') no-repeat 0 3px;
    padding-left:30px;
}
.dayTitle {
    display:none;
}
/*摘要*/
.c_b_p_desc {
    padding:10px;
    line-height:24px;
    color:#888;
}
.c_b_p_desc a {
    color:#1f7b9b;
}
.c_b_p_desc a:hover {
    text-decoration:none;
    color:#ff7227;
    border-bottom-width:1px;
    border-bottom-style:dotted;
}
.c_b_p_desc_readmore {
    margin-left: 20px;
}
.desc_img {
    margin-left:10px;
    border:solid 1px #fff;
    box-shadow:0 0 10px #aaa;
}

 

2.6更改博客标题正文字体

方法同上,用神器选中标题,正文,代码,修改字体.我的设置是标题24px,正文16px,代码14px

博客底部

由于很少有读者会去关心博客底部的内容,因此也不用在此部分大费周章,简单设置个人博客版权信息或博客名称即可。

通过CSS为博客底部定制样式:

/*尾部*/
#footer {   
    height:24px;
    line-height: 24px;
    text-align:center;  
    color:#1f7b9b;
    font-size:16px;
}

 

2.7更改博客目录紧凑度

如下图,修改padding为20px

图片 28

博文内容页

一篇完整且有着良好排版的博文可能会包含元素:文章标题、段落标题、正文、注意事项、图片、代码、链接、表格、插件等,需要为每个元素定制样式,方可使得整篇博文在排版上令人赏心悦目,流连忘返。

其中,<h1>、<h2>、<h3>分别表示文章段落的一、二、三级标题,并以不同的背景颜色以及字体大小加以区分,注意事项通过黄色背景凸显,以起到提醒读者的作用,至于图片、代码、表格等样式设计就不加以赘述了。

图片 29

CSS为博客内容页定制样式:

.Abstract
{
    padding: 15px;
    border: dotted 2px #999;
    color: #999;
    font-family: 'Microsoft Yahei';
    border-radius: 4px;
}        
.First
{
    margin: 10px 0;
    font-family: 'Microsoft Yahei';
    text-align: left;
    padding: 6px 20px;
    color: #fff;
    background: #1f7b9b;
    font-size: 20px;
    border-radius: 4px;
    clear: both;
}                
.Second
{
    margin: 10px 0;
    font-family: 'Microsoft Yahei';
    padding: 6px 20px;
    background: #2ca8d3;
    color: #fff;
    font-size: 18px;
    border-radius: 4px;
    clear: both;
}             
.Third
{
    margin: 10px 0;
    padding: 6px 20px;
    font-family: 'Microsoft Yahei';
    margin: 15px 0;
    font-size: 16px;
    color: fff;
    background: #32c0f1;
    color: #999;
    border-radius: 4px;
    clear: both;
}
.note
{
    margin: 10px 0;
    padding: 15px 40px 15px 40px;
    background: #FCFAA9;
    font-size: 15px;
    font-family: 'Microsoft Yahei';
    box-shadow: 0 0 8px #aaa;
    clear: both;
}
.demo
{
    text-align: left;
    padding: 6px 20px;
    overflow: auto;
    border-radius: 4px;
    background: orange;
    color: #fff;
    font-size: 16px;
    clear: both;
}        
.cnblogs_Highlighter
{
    border: solid 1px #ccc;
    clear: both;
}
.cnblogs_code
{
    background: #EFFFF4;
    border: solid 0px #939393;
    font-size: 14px;
    clear: both;
    padding: 10px 20px;
}
.cnblogs_code pre
{
    font-size: 14px;
}
.cnblogs_code span
{
    font-family: Courier New;
    font-size: 14px;
}

 

3最终代码

注意:用F12修改只能查看效果,要形成模板建议将有改动的函数copy到记事本中,最后一起放到页面定制里

图片 30

最终代码如下

/*总体宽度1550px*/
#navigator, #blogTitle, #main, #footer {
    width: 1550px;
    position: relative;
    margin: 0 auto;
}

/*最上方导航栏字体22*/
#navList li a {
    font-size: 22px;
    text-decoration: none;
    color: #FFF;
    padding: 10px;
    background-color: #2175bc;
}

/*最上方导航栏高度50px*/
#header {
    height: 50px;
    width: 100%;
    background-color: #2175bc;
}

/*侧边栏宽度180px*/
#sideBar {
    width: 180px;
    padding: 16px;
    display: inline-block;
    overflow: hidden;
    color: #2D2D2D;
}

/*主内容栏宽度1300*/
#mainContent {
    width: 1300px;
    background: white;
    box-shadow: 0px 0px 8px #999;
    -moz-box-shadow: 0px 0px 8px #999;
    -web-kit-shadow: 0px 0px 8px #999;
    border-radius: 6px;
    -moz-border-radius: 6px;
    -web-kit-shadow: 6px;
    float: right;
    display: inline-block;
}

/*博客标题字体24px*/
.postTitle, .postTitl2, .entrylistPosttitle {
    font-size: 24px;
    padding-right: 64px;
    padding-left: 10px;
    border-left-width: 3px;
    border-left-style: solid;
    border-left-color: #2175bc;
}

/*文章正文字体16px*/
element.style {
    font-size: 16px;
}

/*文章代码字体14px*/
.cnblogs_code span {
    font-family: Courier New!important;
    font-size: 14px!important;
    line-height: 1.5!important;
}

/*图片宽度1200px*/
#cnblogs_post_body img {
    max-width: 1200px;
}

/*修改博客列表高度*/
.day {
    background: white;
    padding: 20px;
}

 

之前没想过定制博客界面,毕竟CSS,HTML什么的都不懂,不过看了这篇文章分分钟搞定: 【详细图解...

评论区域/绿色通道/推荐

绿色通道主要包含:好文要顶、关注我、收藏该文、与我联系、分享至新浪微博、推荐一下,将读者阅读博文时的一些操作进行集成,提高读者操作的便捷性。

评论区域进行重新定制,以块状面板进行呈现,使得评论一目了然,便于博主与读者阅读。

图片 31

图片 32

CSS为博客评论区域/绿色通道定制样式:

/*评论按钮*/
#btn_comment_submit {
    border:none;
    height:48px;
    width:120px;
}
.comment_btn {
    font-family:'Microsoft Yahei';
    border-radius: 3px 3px 3px 3px; 
    height:48px;
    width:120px;
    font-size:18px;
    cursor:pointer;
    position:relative;
    vertical-align:middle;
    display:inline-block;
    background:#1f7b9b;
    color:#fff;
}
#btn_comment_submit:hover {
    background:#ff7227;
}
/*评论标题*/
.feedback_area_title {
    padding:10px;
    font-size:24px;
    font-weight:bold;
    color:#1f7b9b;
    border-bottom:solid 6px #1f7b9b;
}
.feedbackListSubtitle {
    font-size:12px;
    color:#888;
}
.feedbackListSubtitle a {
    color:#888;
}
.comment_quote {
    background:#FCFAAC;
    padding:15px;
    border:1px solid #CCC;
}
#commentform_title {
    color:#1f7b9b;
    background-image:none;
    background-repeat:no-repeat;
    margin-bottom:10px;
    padding:10px 20px 10px 10px;
    font-size:24px;
    font-weight:bold;
    border-bottom:solid 6px #1f7b9b;
}
/*评论框*/
#comment_form {
    margin:10px 0;
    padding:0;
}
.commentform {
    margin:10px 0;
    padding:10px 20px;
    background:#fff;
}
/*评论输入域*/
#tbCommentBody {
    font-family:'MIcrosoft Yahei';
    margin-top:10px;
    width:900px;
    max-width:900px;
    min-width:900px;
    background:white;
    color:#333;
    border:2px solid #fff;
    box-shadow:inset 0 0 8px #aaa;
    padding:10px;
    height:120px;
    font-size:14px;
    min-height:120px;
}
/*评论条目*/
.feedbackItem {
    font-size:14px;
    line-height:24px;
    margin:10px 0;
    padding:20px;
    background:#F2F2F2;
    box-shadow:0 0 5px #aaa;
}
.feedbackListSubtitle {
    font-weight:normal;
}
/*顶一下*/
.diggnum {
    font-size:28px;
    color:#1f7b9b;
    font-family:'Microsoft Yahei';
}
#div_digg .diggnum {
    line-height:100px;
}
.diggit {
    float:left;
    width:128px;
    height:128px;
    backgroundnull:url('http://images.cnitblog.com/blog/479892/201311/09133514-36eb19831f014a7ea6de13bc99e1d8ed.gif') no-repeat;
    background-position:0 0;
    text-align:center;
    cursor:pointer;
}
.diggit:hover {
    background-position:-128px 0;
}
/*隐藏踩一下*/
.buryit {
    display:none;
}
.diggword {
    display:none;
}
/*绿色通道*/
#green_channel {
    text:align:right;
    background:#1f7b9b;
    padding-left:20px;
    font-weight:normal;
    font-size:15px;
    width:880px;
    border:none;
    color:#fff;
    padding:20px;
    border-radius:4px;
}
/*最新评论*/
#myposts .PostList {
    font-size:14px;
    line-height:24px;
    margin:10px 0;
    padding:20px;
    background:#F2F2F2;
    box-shadow:0 0 5px #aaa;
}
#myposts .postTitl2 a {
    color:#6DA47D;
}
/*清除浮动*/
.clear {
    clear: both;
}
/*屏蔽广告*/
.c_ad_block {
    display: none!important;
}

 

交互动作/插件

博客中利用JavaScript添加了一些交互动作和插件,用于提高博客的交互性,且有利于博主宣传、管理本博客。

交互动作:回到顶部交互,便于读者快速回至博客顶部,提高操作便捷性。

插件:新浪微博挂件、王子墨天气插件、百度分享插件、gostats统计插件、JSFiddle插件。

其中,新浪微博挂件:可在一定程度上提升微博的粉丝数与关注度,同时也可通过微博宣传博客,达到相互宣传的作用;王子墨天气插件:一款非常棒的基于jQuery的天气插件,简洁、美观、动态,在此推荐下,算是为其打打小广告;百度分享插件:可快速将博文分享至QQ空间、微博、人人、贴吧、豆瓣等知名社交空间,可以提升博文的流传度与阅读数;gostats统计插件:用于图片数字实时统计博客的访问数,且每周发送一封邮件描述本周博客详细的统计信息,轻便、美观,推荐之;JSFiddle插件:大力推荐!用过都说好!JSFiddle是一款在线前端编辑器,可以分屏同时编辑HTML/CSS/JS代码,能够实时同屏查看效果,最牛之处在于可通过URL链接分享至各个博文页面,并在页面中显示运行效果与源码,强大的难以名状。

图片 33

后续计划

博客风格样式的设计并不会就此止步,无论设计多么精巧的样式都会有审美疲劳的一天,计划平均3-4个月重构一次博客样式,以保持博客样式的新鲜活力。

计划:设计流式或响应式博客,以适应不同屏的阅读习惯,特别是提高手机上阅读博客的体验。

花费大量篇幅赘述博客样式重构其实并非本文的重点核心,唯一精髓尔:用心改善博客,提高阅读质量!望各博主与读者能够亲身实践,善待自己的博客,罢了。

...

本文由正版必中一肖图发布于前端操作,转载请注明出处:css也能定制博客,蓝白之风

上一篇:好文翻译,十个免费的Web压力测试工具 下一篇:没有了
猜你喜欢
热门排行
精彩图文