本次改版完成的畫面
- 舊網誌搬完了！
- 網誌改版！(只有電腦版)
現在可以直接在這裡看到我2009~2013年發佈過的網誌。搬移過程很血淚，Blogger的文章編輯器和它的版面一樣很跟不上時代，幾乎每篇都是直接清除所有文字格式之後再重新編輯過，還有好多張日記圖差點找不到在哪XD
鼓起勇氣好不容易一篇篇搬動過來，畢竟一方面覺得很黑歷史，但又一方面覺得是花了很多心力寫的，冷落它們也很可惜
我有那種「發佈/創作前一定要確認自己已經打理出一個適合的環境」這樣…悲哀的(強)習(迫)慣(症)。其實好幾年前我的改版強迫症更嚴重，現在網路資源比較多，可以辦到的事也變多了，然後不斷重覆debug的時間也拉長了…
改版前的樣子
改版前的整頁照
本次改版完的整頁照
最初就是套Blogger自帶的預設版型一步步改過來的，沒記錯的話就是那個最白刷刷最無聊的Simple模版…畢竟模版長得越簡單越好改(大概) 說到原本的Simple模版長怎樣？我用我的測試部落格拍了一張照，就是長這樣(圖文是隨便複製貼上的)：
怎一個～醜字了得～
最近才注意到Blogger推出了新的預設版型，而且有支援自適應。
長得都好醜…！好醜！好醜！好醜啊…！(很嫌棄所以重複三遍)
模版設計師畢竟母語可能都是英文，不會去考量到中文網誌一堆豆腐字很不適合這樣排版吧！現在部落格為了衝人氣，首頁的每個帖子都會自動掛一張照片吸睛用，
因為沒圖就沒人點開來看！
於是乎大概從2013年之後的新版型，都會在首頁的每一篇文章預留版面，這個版面會自動挑一張內文的圖片過去當首頁縮圖。然後首頁的所有文字自動不分行不分段，只能固定顯示約200~300字，一切都是為了讓首頁看起來整齊劃一。
一般來說這類模版會被稱為雜誌型(或網頁新聞)模版。
顧名思義，就是請你只看標題的模版。
其實我的部落格手機版就是這種模版。
在跨平台情況下、尤其是手機上，一目了然的排版非常重要，畢竟是用小得可憐的螢幕在看，但是小螢幕上看還好，放大看就…就好醜啊…(流淚)
使用WordPress的專業部落客比較多，WP那邊漂亮的版型也比較多。而且聽說…WP好像還沒被對岸長城擋下來的樣子(這點非常吸引人但建一個能看的WP需要錢啊！)
最後我索性放棄電腦上的自適應，繼續沿用最基本的版型一步一步改，改成現在這個樣子，當然啦用手機版是看不出差別的(泣)
以下條列本次改版的內容，本來想說要不要把coding部份的心路歷程打出來但我…累了
有一個方便整理思路和創作的部落格還不壞啦但交流功能就(ry
~將Wordpress舊網誌整體內文搬移過來，並補齊所有圖片
~重新整理分類標籤(Label)
--分成Categories(依文章功能分類，條列式)、Tags(依關鍵字分類，文字雲式)兩大類標籤
---------------Customize模式、Layout、Settings調整項目
#Body
~更換超連結(Links)顏色
~增加背景
--圖片使用Background Image Generator製作-http://bg.siteorigin.com/
~更換圖片邊框顏色
~調整全體、邊欄和本文寬度
#Header
~更換部落格標題(Blog Title)字型、字級、色彩
~增加部落格描述(Blog Description)
~增加分頁(Tabs)欄，當作外部連結使用
#Sidebar
~更換小工具(Gadgets)字體、顏色
~多加一個標籤小工具
#Post
~更換張貼日期(Date Header)字體、顏色
~更換繼續閱讀(Read More)兩邊的裝飾符號(+)
#Post Footer
~修改頁角(Post Footer)字級、顏色
~刪除內建分享按鈕
~將Label改成Tags
---------------HTML編輯模式修改項目
#外掛資料
~增加FontAwesome CDN
~增加程式碼張貼器(code highlighter)：Google Code Prettify
--調整張貼器最大高度，超過400px會增加捲軸
~增加Google Font: Assistant
#Body
~增加OS、Linux系統黑體字
~增加文章內文水平線樣式
--增加水平線顏色漸層效果
~增加Back to top按鈕
~修改文章分頁(Pager)樣式
~移除圖片外框留白、陰影
#Header
~部落格標題置中
--增加標題上方的間距
~部落格描述置中，字距增加2px，增加中文黑體
--描述字體與字級原本無法透過Customize模式調整，可修改原始碼、追加指定樣式(Variable name="description.text.font")
~分頁欄上下各加邊線，增加滑鼠hover樣式
--增加整塊Header與下方的間距
--調整描述、分頁、標題的間距
#Sidebar
~將條列式標籤符號更換為Font Awesome的箭頭
~減少邊欄右側的留白
~去除Archive小工具箭頭陰影
#Post
~文章標題、日期、繼續閱讀按鈕置中
~增加繼續閱讀按鈕與內文的間距
~修改條列式內文的樣式
--增加條列式內文的總寬度
--調整標頭與文字的間距
--調整條列式內文與一般內文的間距
#Post Footer
~增加AddThis分享按鈕
~文章頁角、頁角內容置中
~在文章頁角上方增加邊框(1px dotted)
--調整文章頁角區塊與繼續閱讀按鈕的間距
--調整文章頁角區塊與下一篇文章的間距
Blogger有兩種版型編輯模式，一個是Customize模式：不需要修改原始碼，有直覺的操作版面：
一個是HTML模式，直接透過修改模版原始碼來訂製版型：
以下圖示本次用HTML模式修改的項目(有幾項沒列出來，因為沒拍到)：
好像不只修改了這些但我有點記不清楚啦實在改太多…！
有幾個部份比較值得一提，個人覺得對增加版面質感還蠻有幫助：
- Pager (網誌分頁)
https://helplogger.blogspot.tw/2014/04/how-to-add-numbered-page-navigation-widget-for-blogger.html
- Google Code Prettify
網路上知名的有highlight.js、Prism、Google Code Prettify(簡稱Prettify)等等，我安裝的是Prettify，Prettify顧名思義是Google推出的服務，已經停止更新，但還是可以從很多源碼開發平台(比方說Bootstrap)掛程式碼回來用。
直接舉例，就是以下這個框框(手機版不支援)：
這裡貼上的任何源碼都能以模仿程式碼編輯頁面的格式顯示出來， 不會吃到部落格本身的文字格式，除了方便觀看以外也比較節省空間。 訪客複製這裡的代碼到其他地方貼上，不會包含任何文字格式資訊。
- Font Awesome
http://fontawesome.io/
顧名思義，它就是這麼的…Awesome！(簡直不能再更沒梗)
以下舉例：
就是將常見的設計圖示以字型的方式顯示的雲端字型！只要掛個CDN回來就可以直接在貼文時使用Font Awesome！再也不用擔心圖示被放大縮小而糢糊變型！
最實用的部份是Font Awesome包含很多很多社群網站的小icon，照理來說是可以靠它自己搞個「分享此文章到**站台」的按鈕，但它沒有台灣同人粉愛用的噗浪。
和我一樣需要噗浪圖示的話請來這邊投個票吧↓
https://github.com/FortAwesome/Font-Awesome/issues/1902
題外話，可以直接在Photoshop裡使用Font Awesome！只需安裝以下外掛：
http://creativedo.co/FontAwesomePS
- AddThis 分享按鈕(手機版看不到)
而且長得也比較能看(外貌協會)
https://www.addthis.com/
支援很多華文圈的平台，噗浪、LINE、微博、豆瓣、QQ等等都有。
本次改版記錄大致如上，話說我把裡站版面也一併更新了，連結有貼在本家多逛逛多找找就會挖到(?)
裡站版面
裡站整頁照
結果我好像比較喜歡裡站的配色方案…！表站都要哭惹！！
No comments:
Post a Comment