修改了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。

然后就截取了现在的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里。详情请看这篇文章。