Nora's Reading Room

很久很久以前曾答應過毛毛，要寫一篇關於部落格裝潢的文章。遲遲沒有動手，是因為自己對 CSS 仍然一知半解，深怕寫出來的說明變成「吳老師的數學課」，徒增笑果。我自知能力還不足以寫教學文，這裡只是將我布置閱覽室時曾經使用的資源整理出來，供有需要的部落客參考。

◈ 排版

2005-05-12　老貓學出版：傳統編輯對部落格新手的寫作建議
截至2006 年 3 月老貓這篇文章在 Google 已經有 5010 筆引用或轉載了，相信很多部落格新手都看過這篇文章。不過，好東西值得不厭其煩地推薦。我自己在為部落格排版的時候也會留意字級、行距和底圖的設計，也常常回顧老貓這篇文章，檢視自己是否犯了「讓形式妨礙閱讀」的毛病。

◈ 配色

色彩搭配我並不在行，賞心悅目的配色我懂得欣賞，但若要自己動手配色，我只敢採取安全作法，例如同色系不同色階的搭配，那種令人驚豔的大膽配色我是做不出來的。如果覺得自己的配色單調或跳不出窠臼，不妨借助以下的配色程式：

Color Schemes

（點擊看大圖及中文說明）

很專業的配色網站，選定主色 (hue) 後，按下 "Use It" 按鈕就能搭配出適合的顏色，還可調節亮度 (Brightness) 與飽和度 (Saturation)。最棒的是，在最上方的配色下拉式選單裡，你除了用預設的同色系 (monochromatic) 之外，還可以選擇對比色 (contrast)、雙對比色 (double contrast)、相近色 (analogic) 等等。

Color Schemes 2

（點擊看大圖及中文說明）

新版的配色程式改用顏色輪呈現，除了原有的配色方案，還多了三色 (Triad) 以及四角互補 (Tetrad)，選擇更多。我最喜歡的新功能則是配色變化 (Variations)，除了預設值，還可以做出粉彩畫質感的各種的明暗效果，喜歡柔和色調的人，一定要試試暗粉彩 (Dark pastel) 以及亮粉彩 (Light pastel) 兩種效果，絕對讓人驚喜。無論是想為個人網頁或部落格找尋配色靈感，或單純地玩顏色，這兩個配色程式可說既實用又有趣。

◈ CSS語法與編輯器

想要擁有獨一無二的部落格背景，懂 CSS 語法是必要的。不必強求精通，但至少要有基本概念。已經有許多熱心的部落格前輩將樂多樣式結構的 CSS 整理出來，建議大家不妨從下面這三個連結著手（按發表時間排列順序）：

2005-04-16　寶貝喵：CSS 語法〝小〞解析 ( 上 ) ( 下 )
2005-05-27　jaceju：樂多Blog排版入門
2005-06-18　colaccl：樂多blog樣式結構表

寶貝喵將樂多的樣式結構表一一拆解、分項解說，耐心閱讀一定會有收穫；jaceju 的排版入門解釋了 CSS 的基本概念；colaccl 的樂多樣式結構表詳列了每個不同區塊的語法，如果你想修改某個特定區塊，從這裡按圖索驥非常方便。

「工欲善其事，必先利其器」。弄懂 CSS 基本概念並不難，難的是真正動手修改。最令我痛苦的是沒有好用的 CSS 編輯器。剛開始我每次都只能從樂多的「網頁樣式設定」去改，必須不斷地套用、不斷地更新 Blog 網頁才能看到結果，即使只是改個小小的地方也要大費周章。

後來我從 colaccl 那兒看到了一個 Firefox 的套件 Web Developer，可以同步預覽 CSS（請見附圖），所做的修改會直接顯現在右邊的網頁，非常方便。你可以在左邊將所有想要更動的部分都改好，再把整個樣式表貼到樂多的「個人化設定」之中，就大功告成了。有了 Web Developer 之後，修改 CSS 樣式表變得輕鬆多了。除了修改自己部落格的 CSS 語法外，也可以利用 Web Developer 的 "View CSS" 功能觀摩其他優秀部落格的 CSS 語法。但是請記得，觀摩絕不等於抄襲，可別把其他部落客的心血整套照搬過來，那就太令人齒冷了。