其實坊間有很多免費的 3rd-party Blogger Templates (第三方部落格模板),但當你使用時,會發覺當中的 Xml 檔所用的語法有時有些會有點兒長和不太簡潔,有時候也會因為想更改增加 CSS 代碼,令到越來越多,例如改變某些字體,顏色,圖片顯示,格式對齊之類...
但有時候就係因為越加越多而令到加載太慢...所以優化是必須,今次介紹是壓縮你的 CSS 語法,其實坊間也有很多這類的網站...而這次介紹是 CSSDrive 的 CSS Compressor,它本身有2個模式
一個是基本模式 (Normal mode)

另一個是進階模式(Advanced mode)

那我就以普通模式做例子,首先去自己的範本,複製 <b:skin> 和 </b:skin> 之間的所有代碼

然後在 Insert CSS Code 中貼上

再按 Compress It (壓縮),就會得出壓縮率和最後代碼,再取代自己的 <b:skin> 和 </b:skin> 之間的代碼就可以了

不過大家修改前最後做了備份^^以防有甚麼閃失,
還有一點,其實它所謂的壓縮,只是將一些可以去掉的"空格,下一行,px字眼之類去掉",所以最終出來的結果是一堆密麻麻的字,對一些會經常跟進改動的人,觀看上就比較不好看,不過如果是不常改動又想優化的人來說,不失為一個好選擇的唷~~
但有時候就係因為越加越多而令到加載太慢...所以優化是必須,今次介紹是壓縮你的 CSS 語法,其實坊間也有很多這類的網站...而這次介紹是 CSSDrive 的 CSS Compressor,它本身有2個模式
一個是基本模式 (Normal mode)

另一個是進階模式(Advanced mode)
那我就以普通模式做例子,首先去自己的範本,複製 <b:skin> 和 </b:skin> 之間的所有代碼
然後在 Insert CSS Code 中貼上
再按 Compress It (壓縮),就會得出壓縮率和最後代碼,再取代自己的 <b:skin> 和 </b:skin> 之間的代碼就可以了
不過大家修改前最後做了備份^^以防有甚麼閃失,
還有一點,其實它所謂的壓縮,只是將一些可以去掉的"空格,下一行,px字眼之類去掉",所以最終出來的結果是一堆密麻麻的字,對一些會經常跟進改動的人,觀看上就比較不好看,不過如果是不常改動又想優化的人來說,不失為一個好選擇的唷~~
0 留言:
發佈留言