久違改版！imXD7 自適應 WordPress佈景版型

很像很久沒有改版了耶！上一版是在2011年10月份的imXD5，第一次嘗試寫WordPress的HTML5版型，然後就默默地將版型沿用至今，算是開站以來用最久(兩年半)的佈景主題。不過隨著去年陸續推出一些免費版型之後，一直很想找時間修改自己的網站，不過每天改客戶的東西就改到昏天暗地了，哪來的時間改自己的東西(淚)。

趁著周末兩天，客戶比較不會吵的時候，看完瘋神無雙和台版的辛普森家庭後，趁著夜闌人靜的時候，開了一個測試網站，順手修改自己的網站。雖然這兩年半中，常常看到不錯的網站，就會開啟Firefox瀏覽器搭上Firebug修改，模擬一下發現感覺不對，就直接關閉，繼續做其他事情。就好比看到很棒的衣服，但是穿在自己的身上卻見不得人。

如同以往，每次只要大改網站，一定會寫篇文章記錄一下。話說前一陣子陸續幫客戶製作響應式(自適應)WordPress佈景主題，也有推出一個免費響應式版型「班傑明」。本來官網要做成響應式，當初使用SUSY刻，後來發現要PHP搭SUSY配上遠端伺服器環境，操作上實在是不方便，最後還是回到最一開始，直接使用Media Query 來做調整，製作上還是比較順手。

因為有這樣的嘗試經驗，所以終於把香腸炒魷魚網站順手更動成了響應式WordPress版型，此次版型名稱本來想叫「akito」的，後來想想聽起來很像很宅，直接放棄，實在是難以襯托出我的陽光。後來想說是imXD5的升級版，想說叫做「imXD6」？不過因為網站即將邁入第七年，索性直接取為「imXD7」。不知不覺網站邁入第七年，然後魷魚絲在今年也已經結婚了~~

每次寫這種紀錄文章，都會去翻一下過去自已寫過的來參考，仔細看看以前怎麼會做那樣的版型…越看越糟糕，人果然是一時興起，就不會去管後果了、人總有過去(已哭)。

本次版型：imXD7

首先讓大家看一下整體的感覺，沒錯！你真的沒看錯，他跟前一版其實是差不多的，只是顏色上稍微變換一下，相信大家很失望吧？我也有點失望，寶傑你怎麼看？這個版就單純香腸自己DIY，東湊西湊，沒有所謂的美術、美工設計XDD，這種設計美工人員不會喜歡，只有工程人員會比較愛吧Orz…

話說回來，其實弄這一版是為了讓我側邊可以塞下300×600的Google廣告，之前想說側邊欄沒什麼作用，可是拿掉又很怪，所以就保留著，此外當初選單沒有做多層選單，所以分類都只能在側欄展現，現在有上方的自訂選單可以發揮了！

首頁圖文呈現

首頁想要放圖已經是最近一年改版的夢想，最後終於呈現了，但是很普通。沒錯！我也覺得很普通，所以就加了CSS3的特效，滑過去會放大，讓它花俏點。本想說與寂寞喬治免費版型放左側然後用timthumb縮圖程式跑，不過對於系統效能可能會影響，再加上網站開啟速度可能不會太OK，所以就放棄了。當速度效能與特效PK的時候，我會選擇效能不會選擇特效XD。文字部分，原先要用我自己切的MORE，結果發現我切的段落太長，因此直接用內建參數做180個字之截斷。至於分類清單頁面，則用原先的截斷方式然後圖片不顯示。

Web Icon Font

這次除了LOGO沒有ICON FONT之外，其餘的小圖示都是ICON FONT。一剛開始覺得使用上會有些困難，沒想到免費提供的網站連接學都打包進來，完全無痛使用。用了一次之後會上癮，我想之後就會少用圖片拼貼啦！ICON FONT的好處在於它本身就是文字，所以顏色變換上都可以隨心所欲，圖案尺寸也可以隨著字型大小調整，向量圖，不怕鋸齒或變形。

然後側邊上面那根不明物體，是香腸XD。魷魚絲的圖案找不到QAQ~~

多層選單

終於在自己的主網站上使用多層選單，但說穿也只有兩層，因為第三層太麻煩了，而且訪客並沒有時間可以慢慢找，東西能在第一時間被發現是最好的，當然也不是把所有東西都丟到畫面上，有所取捨。

跟我滾！

啊？是要滾去哪邊？香腸是條狀物可以滾動式能理解，不過這….？是側邊啦！當側邊欄結束後，最後兩個區塊可以跟著滾，科科。注意到了嗎？小圖案不是Feedburner而是烤熟的香腸(笑)。另外粉絲差兩位就破萬了….太感動了。粉絲成長好辛苦QAQ，一定是我沒認真(低頭)。

麵包屑，走到哪裡掉到哪裡

麵包屑就是網站的導航工具，不是啪啪狗也不是倒航王。就是麵包屑(Breadcrumb)，延續上一版繼續用，前方的導引圖從原本的TAG換成一枝筆。

分類、標籤、彙整標題

針對其他頁面的標題，也簡單弄個樣式當然也要搭上麵包屑的列車。

留言區版面

留言區版面如果你有注意我的免費版型，你一定會發現怎麼似曾相識？是的，我是直接從班傑明的版型直接轉用過來，換個邊框顏色而已(低頭)。不過留言都改用了DISQUS，其實有沒有設計都不會被發現的啦XDD。

內文社群分享

社群分享總是避免不了，放兩個很單調，多放推特又沒人按，但我還是放了，畢竟三個排起來比較好看，視覺上也比較好。至於樣式，寬度不足就顯示再標題下方。

寬度足夠，我們就讓它外出曬太陽了。

ERROR 404 的北極熊不見了？

其實我個人不太想浪費404頁面的流量，所以還是沿用上一版的設計，把分類和時間彙整全部列上去，感覺畫面豐富一點，感受到我想把資訊呈現出來，溫柔的力量(?)

自適應版面寬度調整

沒錯，這是由史以來本站最寬的版面之一，寬度達到1140，配合著自適應設計(Responsive Web Design)，所以多寬、多窄都可以收放自如。本來是做1000的版本，同時也將各解析度做了尺寸調整，但想說既然都動工了，何不一次升級到寬版面呢？就順手升級到1100以上，本來想一口氣衝1200的版本，但礙於我是使用筆電，1366 x 768 不能看到最完整本的版本感覺會有遺憾，因此就止於1100 + 40白邊。

全寬的版面看過，讓我們看縮小點的版面，選單保持不變，但是內容區塊變成單欄。

當寬度再小一點的時候，進入到行動版的展開、收合選單。

最後就是手機版面，直接把社群按鈕弄下來，因為如果繼續放右側會塞不下去，剛好ICON FONT，尺寸蠻好調整的，所以就散布在LOGO下方了，雖然這樣排起來有點醜不過在手機上看其實很密合哦(揪咪..有點噁XDD)。

行動版選單

這就是採用CSS+jQuery的行動版選單，至少可以支援到兩層啦！之前有別人家的自適應因為太早把選單做好再加上選單本身設計實在是不好調整，最後只好使用SELECT類型的手機板選單，不過個人頗不喜歡那樣的設計，倒是喜歡這種一顆按鈕的。雖說本來也有考慮用FB那種左側滑出來的，不過那種還蠻容易讓網頁左右滑動亂跳，所以最後就用這款囉！

最後，就是這樣子了。這篇文章寫到這裡已經早上五點了，老人家不太適合這麼熱血，在雞啼聲、鳥鳴聲響起之前或是太陽伯伯出現之前，我應該先去睡覺一下。不過好在凌晨下大雨，至少太陽伯伯不會太快出現，讓人整個心安。imXD7版型介紹到這邊，至於imXD這是什麼意思，就單純幾個文字湊在一起，之前發現這名詞想出來沒多久後，就有人去註冊imxd的網址XDD。早知道我也去註冊一下~~~

換上這個imXD7之後，我想我會先將手機板先暫時關閉，哪天廣告收益不好，再拿出來跟各位客倌打賞一下好了，來困~早安(?)