每個人換新模版的狀況都不盡相同, 有人換得很順, 有人卻需要 砍掉重練 ....
至於我, 換模版不到兩天, 就發現有些功能的相容性太難追溯, 不如回復成原來的模版, 再設法把外觀換掉, 來個『換湯不換藥』(只改外觀) 還比較有把握。
前一篇介紹了『更換模版的參考資料』, 接下來說明改版的特色和過程
『換湯不換藥』的改版特色 :
- TicTac 只改外觀, 變得和 Gadget 2.0 幾乎一樣
- 用 色塊 來區隔標題, 並且不使用外部圖形, (參考 羊男 Gadget 2.0, )
- 拿掉標題圖片, 縮小標題的總高度
- 增加內文副標題 (h3, h4, h5) 的辨識度
- 暫時維持兩欄式的自動欄寬
- 自動隱藏 NaviBar, (同樣參考 羊男 Gadget 2.0)
- 在最左邊加了『導覽列』的新功能
.
改版的過程 :
- 原本打算從 Blogger 內建的 Denim 和 Rounders 選一個, 或者是綜合它們的特點
- 真的嘗試的則是 羊男 Gadget 2.0 和 我的配色
- 接下來陷入了『換湯兼換藥』v.s.『換湯不換藥』的抉擇
- 另一個傷腦筋的問題是『側邊欄的寬度』和元件的排列方式
- 最後還是決定 回復成原來的模版, 來個『換湯不換藥』(只改外觀)
- 暫時維持兩欄式的自動欄寬, 稍後再決定要不要變成跨欄三欄式
- 在最左邊加了『導覽列』的新功能
.
Blogger 內建的 Denim 和 Rounders
幾個月前, 很想效法某網友的版型, 但一直沒付諸行動, 這一拖居然連網址都忘了記錄在哪裡, (果然,『排好的事就要去做』), 所以只好另起爐灶。
這次, 原本打算從 Blogger 內建的 Denim 和 Rounders 選一個, 或者是綜合它們的特點 ---- Denim 用『色塊』來區隔標題, 而 Roundes 則是用『虛線』來區隔, (至於圓角倒不是我要的重點)。
不過, 這兩個模版都沒有真的拿來套用。
| Denim | Rounders |
  |   |
.
羊男的 Gadget 2.0 和 我的配色
接著, 看到了羊男『進階三欄式』的 Gadget 2.0, 因為底下的特點, 就決定要使用了。
- 兩欄/三欄互通
- 不需使用外部圖形, (除了 Blogger 內定的 郵件/鉛筆 等)
- 用『色塊』來區隔標題
- 內建自動隱藏 NaviBar,
- 內建繼續閱讀 <span class="fullpost">
- 在 Archive 頁面與 Label 頁面當中，文章會自動收合成到剩下標題的模樣
| 其中『進階三欄式』指的是側邊欄的最上方有『橫欄』可以擺放寬度較寬的物件, 分成兩個側邊欄之後, 最後再收為一個欄位 如果不在跨欄內放入任何網頁元素, 就會變成單純的『三欄式』。或是只使用跨欄而成為『二欄式』, 這就達到了『兩欄/三欄互通』。 |  |
|
再來是修改配色和字體, 在 colorschemer (http://www.colorschemer.com/online.html) 配出右邊的 16 色, 字體則盡量改為原本習慣的大小 .... |  |
.
『換湯兼換藥』v.s.『換湯不換藥』的抉擇
換了 Gadget 2.0 之後, 兩天下來, 完成了配色, 和大部份字體大小的調整, 卻發現有些功能的相容性太難追溯, 例如: 內嵌式的留言功能。既使把程式碼從舊模版複製到新模版, 內嵌式的留言功能還是無法使用。於是, 在繼續投入時間除錯之前, 我開始思考『新模版的風險與必要性』。
所以, 就陷入了『換湯兼換藥』v.s.『換湯不換藥』的抉擇。
| Gadget 2.0 調整字體及配色之後 | 原本的 Gadget 2.0 |
  |  |
.
側邊欄的寬度和元件的排列方式
另外還有一個讓我猶豫不決的理由, 原本版型的『自動寬度』, 是不是變成三欄之後也還要使用自動寛度呢?
| 總寬度 | 主欄 | 側邊欄 | |
| 原本的二欄式 | 750~950 | 73% (547~693) | 27% (202~256) |
| 轉換成三欄 | 950~1200 | 58% (550~696) | 21% 兩個(200~252) |
| 羊男三欄式 | 550 | 125 + 175 |
實際使用三欄式之後, 發現羊男設定的 550 + 125 + 175 不大符合我的習慣, 但一時又調不出適當的三欄寬度。
- 希望的主欄寬度是 600~650px 左右,
- 側邊欄則是 200~250px 比較理想,
- 加起來至少有 600 + 200 + 200 = 1000px, 再考慮瀏覽器的邊框和捲軸, 1024 的螢幕剛好有點不夠。再打開瀏覽器的側邊欄, 或是使用 800 的螢幕, 就會變得更不方便 ....
- 如果兩個側邊欄都是 200 左右, 跨欄 400px 的感覺似乎又太寛,
- 如果要縮減其中一個側邊欄到 150 左右, 似乎只有『關於我』,『搜尋』,『追蹤者』, 『計數器』適合放在較窄的這一欄, 這又和另一個側邊欄的份量不是那麼平衡, 元件的排列順序也不是那麼容易處理 ....。
.
『換湯不換藥』(只改外觀)
最後還是決定 回復成原來的模版, 來個『換湯不換藥』---- 只改外觀
事後證明, 可以把原本的 TicTac 版型『外觀』, 改成和 Gadget 2.0 幾乎一樣, 就只差『進階三欄式』還沒有加進來。因為有 Firebug『神器』的幫忙, 大約只花了一個上午的時間。
 |  |
| 新版型 | 舊版型 |
.
還有, 增加內文副標題 (h3, h4, h5) 的辨識度
h3 副標題h4 章節h5 小段落 |  |
.
加上『導覽列』
思考『側邊欄元件排列方式』的同時, 我也在想如果能 快速找到想看的側邊欄區塊, 那排列方式就不會有那麼大的影響 ---- 於是就去找了『導覽列』!!
參考 挖哩勒~胡說八道 和 lamueno, 加了『導覽列』的新功能。不過, 我改用文字式的按鈕, 再加上收合選單的功能, 目前還在小修之中。
 | |  |
| 平時透明 | 滑鼠接近時顯現出來 | 也可以收合 |
.
需要的人請先參考 挖哩勒~胡說八道 的說明, 或是參考我的原始碼
| CSS 設定 .fixed_menu 到 * html .fixed_menu {position:absolute;} |
| <div class='fixed_menu' id='nav_menu'> .... <h2><a href='#連結名稱' title='說明'>按鈕名稱</a></h2> </div></div> 這一段 (放在 <div id='content-wrapper'> 之前) |
| 適當的地方加上 <a name='連結名稱'></a> |
.
我還想要讓『導覽列』在螢幕寬度不夠時, 自動縮到側邊 (而不會遮住文章), 但還沒有成功。(嘗試寫程式在 <body> 的 onresize時, 判斷文章欄位的 offsetLeft, offsetWidth, ....)
接著, 或許在『導覽列』加上按鈕來跳到上/下篇文章, ....
.
0 意見:
發表您的回應張貼留言