修改了blog的CSS

我从来都不是一个网页页面设计的爱好者。原因大概是我足够懒,对于像页面设计这种精细的工作很不擅长,而且我对美工没有天分,从小美术课上鉴赏还行,自己动手画就不行了。或许是这个原因同时也导致我对网页的关注的重点一直在内容上。可能是性格使然,我特别痛恨那种”过度设计”的页面。一方面过于花哨的页面元素降低了页面的载入速度(我发现即使我们从电话拨号上网的5K/s下传速度进步到500K/s的宽带下传速度,仍然有人在制作更花哨的页面),另一方面太花哨的页面也确实不美观,反而显得内容不正式,适得其反。

因此,从过去在WordPress驱动的BSP那里放blog开始,我一直不曾在页面设计上花功夫。我的作风是选择一个尽量简单的模板就不管了(可以参考我过去在Blogger上的blog)。好在总有一款比较不错的模板让我用,因此也没有太大的问题。

我在07年刚到了加拿大后,在另外一个域名上用当时的Movable Type建立过一个英文blog,当时就发现Movable Type上没有我非常喜欢的模板。因此那个blog我一直用着默认的红色模板。其实那个模板也不太丑,就是那个枣红底色的宽大Header太恶心了。另外就是模板的字体很一般,显式英文还勉强说的过去,显式中文就很难看了。不过我当时不在那个blog上写中文,因此也没有太操心。

这次我把这个主blog的后台换成了Movable Type后,发现问题还真是挺困扰。当时在后台默认的一堆模板里翻了一下,只找到了一个Unstyled还可以。顾名思义,Unstyled就是没有style的意思。字体基本上都是一般大小的,没有底色。不过相比较起来还算很清爽的,于是就暂时用了它。

但心理一直没有再找一个中意的模板的打算。但Movable Type自从3.0时代转向收费为主后,导致很多blogger们转向了WordPress平台,因此良好设计的模板不多。有那么几个还不错的,也”响应号召”,成为了收费的作品(我到现在还不理解怎样经营收费的模板)。中文blogger圈子里面用Movable Type的有那么几个,于是我就不断从他们的blog里面找每一篇关于Movable Type的文章,现在总算稍微有点入门了。

知道了Movable Type的页面设定主要用一个css文件完成的,当时就有点头晕。css我了解,但每一个元素都要设定,然后就是px宽度、字体什么的,都不是我的强项。后来看到Fenng公布了他的stylesheet,马上就下载下来研读一番。好在Fenng写的很整齐,看的也不算太吃力。然后自习琢磨了一下,要让我的页面好看点,而不是设计成那种花哨的,也不需要调整太多的东西,于是稍微有了点信心。

今天下午正好没事,就想着手调整一下。我之前没写过css,因此对HTML的相关tag也不熟悉,以至于连div是做什么用的都不懂。以前用WordPress自己修改一下模板,看到满屏的div标签就心烦。今天下决心克服这个难关,于是上网搜索了一下,原来就是对应样式的作用,真没想到还这么容易。

知道了div标签的含义后,一下子感觉”豁然开朗”。很容易的自己写了几行,让标题栏(header)变得好看一些。当中对我来说最麻烦的就要数弄一个header的背景图案了,这对我这个设计生手是相当有难度的事情。上网去”偷”人家的太逊了,我就打开iPhoto,从图库里找一张比较合适的截取下来。去年我们去King’s Park踏青的时候照的几张春色还不错,我就从其中的一张里截取了一个banner。

King's Park

然后就截取了现在的banner。其实不是一次完成的。我一开始截取的是图像中间的那一排树,结果传上去后由于header高度的限制只显式初树冠那一小块。我当时看着还不错,就只截取了上面的那一部分。然后觉得天然的颜色太”鲜亮”了,与我的白色背景十分不搭。于是就在Preview里面乱调图像的参数,当我把曝光度调到最低后觉得颜色挺素了,还不错,就留下了目前的背景。

然后我突然领悟到既然div和css这么方便的对应,那么应该很容易的就能从别人的页面上借鉴他们的设置。于是我印象里比较漂亮的两个人的页面——Eric Raymond的首页和蔡智浩的Taiwan 2.0 部落格都被我打开了。然后背景啊、字体啊什么的借鉴起来就都方便了。:)

当我最后一次设定好了字体后(就是直接从蔡智浩的stylesheet上复制的,丝毫未改)后,再看我的页面,我自己都惊叹了。这种感动劲简直无法形容啊。

当然目前也不是很完美。主要是右边时间列表里像单词长度比较长的月份,比如二月,页面就不大够显式,后面的文章数就被换行了,算是一点小瑕疵。我想解决方法要么把两遍的空白减少,要么就把那一部分的字体变小。目前都没有找到做的方法,于是暂时先不管了。

另外,我开始时是直接修改根目录下的style.css文件,结果后来每次发布文章后页面就变回去了。略微一想后,把文件放到mt-static/themes/目录里面的相关的模板目录里就OK了。我不知道常规的做法是什么,我是直接用quick and dirty的方法把我的style.css改名成默认的screen.css了,然后就正常了。

本着共享的精神,我把我的css文件也上传,放在这里,不过估计没有人要用啦。:) screen.css

更新: 我已经把样式文件和背景打包成标准的Movable Type的style文件包,可以下载它并直接用在Movable Type里。详情请看这篇文章

《修改了blog的CSS》有2条评论

发表评论

此站点使用Akismet来减少垃圾评论。了解我们如何处理您的评论数据