[生活] 網站邁入第九年大改版！！全新風格 iLife 佈景上架

回想起上次網站改版，得追溯至六年前的此刻 (連結)，當時還是個懵懂的學生而已，同學們都在打電動與看動畫片刻，我也開始在找尋適合自己的興趣，發現藉由攝影與文字搭配，在部落格寫成一篇篇遊記與開箱文也蠻好玩的，後來也花更多的心思再經營。至於佈景部分過往都是憑自己感覺，再拿現成版型拼湊修改出來的，這回很感謝老弟 Funtory 設計生活 版面美編、香腸炒魷魚程式協助，採用 HTML5 框架語法及許多小功能，誕生全新風格代號為「iLife」佈景正式上架，感謝過往至今許多朋友照顧，也希望有這舒適閱讀環境，你們會更加喜歡這地方。

回顧過往

 

上一版 SOFUN 佈景風格，是採用香腸開發 MadoKing 魔動王版型修改而來，無論是頂部橫幅 Header 圖片，按鈕造型、側邊欄還是內文樣式等，即使正式亮相公開後，仍會不時做修改微調的動作。

 

畢竟讀理工科，沒有美術細胞，只能從逛別人網頁，看到不錯再憑感覺調整適合自己網站，讓我再次感受到好的視覺效果，還是得靠專業美工與程式設計師搭配，才能呈現最完美的版型樣式出來。

 

我想也因為如此，激起想客製化徹底美化一番的念頭，從設計到程式搞定約半年左右，過程間常太忙導致耽擱情況，終於以新版 iLife 版行正式登場亮相 ~ XDD

 

P.S: 至於新朋友們，想瞧瞧過往的模樣，也可以至網站時光機瀏覽。【連結1】【連結2】

 

 

原本使用手機行動裝置版面，則是屬於比較陽春的風格，首頁載入幾篇最新文章，包含縮圖、標題與文章日期，內文也是大同小異。

 

關於 iLife 版型 & 首頁圖文呈現：

 

 

新版 iLife 版型首頁，與過往可說是截然不同，尤其是背景由原本的灰底，改為木質條文色系圖片，首圖撐大撐滿強化視覺效果，側邊欄寬間距也變大，也美化 CSS 呈現樣式，讓瀏覽網站整體質感提升。

 

為何版型要取名為 iLife ？？主要也是希望將生活所見所聞，以及實用資訊用圖文方式分享，這也是記錄生活的一種方式，才不會年紀大了要回顧過往，只能看照片來說故事，少了當時內心想法與文字紀錄；未來看著過往文章，才會知道想法，或是哪方面又進步了，喜歡自己並且讓自己更棒，我想就從 iLife 做起。

 

內文相關文章 & 作者介紹：

 

 

內文頁面在文末地方，過往是以文字顯示相關文章，現在則採用 Jetpack 內建模組呈現，210*120 大圖搭配文字樣式，在視覺效果上更好，也比較能吸引讀者目光。

 

 

下方欄位依據發文作者顯示不同資訊，尤其是特定主題與邀約合作，會請到神秘好友來站台，若是對同類別主題感興趣，也可以找到同分類上/下一篇，然後再點進去閱讀瀏覽。

 

特定主題類別並排顯示：

 

 

此外也針對特定分類主題，如：美食旅遊等類別，設計 3*3 九宮格樣式頁面，方便讀者快速挑選喜愛內容。

 

側邊欄最新/精選文章 & 頂部社群按鈕：

 

 

過往側邊欄想顯示最新文章 & 精選內容，都是以內建純文字樣式來顯示，現在則是搭配 Photon 縮圖及 CSS 微調，讓讀者瀏覽感覺更美觀一些。

 

 

社群平台推廣預設常見這幾種，放太少又覺得空空的有些單調，所以又多補上去 Twitter、Pinterest 以及 LinkedIn 等按鈕。

 

隨頁面固定 & 多層主題選單：

 

 

期盼已久的選單，終於在 iLife 版型上實現，採用 CSS + jQuery 可顯示三層，其動線和顯示樣式也讓人一目了然，滑動頁面時頂部選單 Fixed 固定住，右側則是搜尋框與社群聯絡鈕，常用的聯繫按鈕圖示。

 

ERROR 404 錯誤頁面：

 

 

至於連結錯誤，或是失效的文章，會導向 404 錯誤頁面，相較於過往擁擠排版，這回樣式稍微寬鬆一些，並且將分類與時間彙整列上去，資訊內容也更加豐富，讓迷路的讀者可以快速找到感興趣的訊息。

 

行動裝置版型：

 

 

手機版則直接採用 imXD Mobile 版型，樣式與過往 imMobile 有些許類似，但首頁加入灰框與白底後有更明顯區隔，內文則是將作者、時間與分類資訊移至頂部。

 

 

文末同樣有相關文章、社群分享、作者資訊與標籤等按鈕樣式，動線操作上比上一版更加明確。

 

 

下面額外加入推薦閱讀 & 更多文章資訊，透過分類、標籤與隨機等條件判斷，來顯示出相對應的訊息出來，對於透過搜尋引擎進來的朋友，說不定會對這些內容感興趣。

 

 

尾巴則是有上一篇 / 下一篇文章快選連結，滑動頁面時頂部也會 Fixed 固定住，左邊為自定義選單，右邊才是搜尋框，若程式判斷不正確，也可點選切換為電腦版。

 

差不多就是這樣，經營網站長達九年，也是小孩讀國小階段，雖然說僅記錄生活片刻，但也把精彩時光捕捉下來，並且認識許多的新朋友。

 

最後再次感謝阿右與香腸協助，成就了這個舒適版型與閱讀空間，如有問題也歡迎留言給予建議，歡迎各位舊雨新知常來逛逛，相信未來會有更多旅遊玩樂，以及軟體開箱等相關創作的，也期盼自己能夠維持定期寫作好習慣 ~ ^^