當初我會開設這個部落格，其實是 2016 年時，看完我人生第一場五月天演唱會後感想很多，想要寫出來，而自己也沒有一個可以記錄事情的地方，所以就選了 Google 的 Blogger，用著當時還算笨拙的 HTML 跟 CSS，來作出了這部落格的第一個版本。
一轉眼也三年過去了。這個 2016 做出的部落格，現在來看排版也實在稱不上符合我的水準，也沒有行動版可以在手機上看，相當不成熟的 CSS 也造成在不同瀏覽器上，排版會有各種不同的悲劇出現。
所以，也該是時候替他整形一下了。
 |
| 全新樣式！ |
時間回到 2016 年，當時我是 HTML 跟 CSS 這些語法的新手。也因為我一直都不是個技術型的人才，所以在這之前，想要做個放作品的網站，就是用 Adobe Muse 來解決，畢竟這類網站也不求有太多功能，所以當時覺得還算夠用。
但是當要做部落格時，只能做靜態網站的 Adobe Muse 就派不上用場了。
當時做我的這個部落格的時候，算是邊學邊做的。當時對 Blogger 的架構也不是很清楚，會修改的也只是修改預設模板的 CSS，調配出自己想要的樣式來。
之後做出來的部落格存在許多問題。例如部落格在 CSS 字體裡寫 font-family 要用新細明體，是為了要提供像閱讀紙本書籍一樣的體驗。但是 Google Chrome 又直接無視這一點，硬把字體換成系統預設，而且還一併修改行距，整個版面直接跑掉。舊版部落格也缺少行動版，在行動裝置瀏覽時排版也相當有藝術。
當時還因為不小心把部落格那個查看「較舊的文章」的功能不小心搞不見了，也不知道怎麼放回來。就直接設定為在首頁顯示最近的 500 篇文章。每次讀者打開我的部落格首頁，就會需要從最後一篇讀到第一篇去..好在台灣的網路速度挺快的，所以應該沒有什麼人發現我這樣亂塞啦。
 |
| 之前的部落格排版歪七扭八 |
從當時至今的這幾年裡，我也已經把 HTML 跟 CSS 練的還算純熟，對 Blogger 的架構也有不少的理解，也有了從頭設計 Blogger 模板的經驗，可以對其進行更深層的自訂，隨心所欲打造出自己想要的部落格。
也因此，在 2018 的年末，我決定要從頭開始打造一個，真正屬於我自己的部落格。
 |
| 部落格的草圖 |
製作這個部落格的時候，心裡已經有了他大概的樣子，所以草圖倒是畫得蠻快的。這次走的是當代的簡潔風。畫面上沒有多餘的元件，讓讀者專注在閱讀上。
在設計時，我整理了幾個部落格會用到的元件，在設計稿裡直接畫出他們的樣式。分別是文字、連結、字數少的引用、字數多的引用、圖片、圖片敘述、大標題、子標題、小標題、重點，以及打程式碼會用到的等寬字區塊。其中很多元件都是 Blogger 沒有提供的，就只能自己寫 CSS class，要用的時候再特別把那些話用 tag 包起來。
 |
| 這次部落格首頁多了個封面照，可以與其互動，查看相關的說明，是我最喜歡新部落格的一部份！ |
 |
這次側邊的 Widget 們只有在部落格首頁才會出現。有部分以前部落格有的 Widget，跟新部落格的樣式有點搭不上，需要等重新設計後再放回來。 |
新的部落格是從全空白的模板，開始從頭訂製的。比起使用現有模板再加以修改，更可以針對自己的需求打造需要的 layout。像是我就針對 Blogger 產生元件的方式做許多修改，來讓它產生出的元件可以有我需要的排版，或者是加上我需要的 class name 等。
不過，也不是做完就直接沒問題了。
Blogger 的 WYSIWYG 文章編輯器其實非常爛，排出來的 HTML 都問題一大堆。以前都用這個編輯器打文章，結果生出來的文章都一堆莫名其妙的 div tag 出現。部落格換上新主題後全部現形，一堆文章跑出超多空格來...
 |
| 你現在在看的這篇文章，前三段也是用 WYSIWYG 編輯器打的，HTML 居然成了這種樣子。 |
這些文章的問題，只能慢慢去一篇篇檢查 HTML 來修了，是個會花上不少時間的工程 QQ
現在打文章都儘量避免使用 WYSIWYG 編輯器，而是直接用 HTML 進行編輯。也有在考慮自己做一個 WYSIWYG 編輯器來用。
不過也很開心我的部落格可以換上符合時代的新樣貌啦！下一個要重新設計的，就是我的個人網站 chelinchan.com 了。繼續努力，希望可以早日完成 ！