「免費的喘息」網站改版，「OutLine」佈景上線
這幾天大家又發現香腸開始懶惰不新增文章，但其實香腸是在為網站改版做準備。這次放了六天的假期，有一半以上的時間都是在寫佈景，總共改了三個網站，一個喘息、一個香腸自己使用的公版，一個藍藍路網站改HTML5，第一次覺得自己這麼有效率的在四天內做了這麼多事情，結果文章一篇也沒寫到，實在是有點愧疚。既然香腸寫了新佈景，就順便拿來當文章發表介紹一下囉！
這次的新佈景「OutLine」，是針對免費的喘息論壇轉型成WordPress所設計的版型，基本上並不適合一般部落格來套用，因為很多東西都屬於客製化的，所以，扣除掉這些客製化的東西，其實「OutLine」真的是outline。雖說看起來很普通，但是越普通的佈景越是難以調整，很多小細節要注意，就算加入個小圖片也要調整超多次，讓網站達到最佳效果。
如果您有關注過這篇文章「論壇，是否逐漸被社群網站吞噬？」，應該不難看出香腸有打算將免費的喘息做一番的改版，因為免費的喘息討論區既然已經失去它的效益，那麼轉型是必然的，選對轉型的方向是一個重要的決策，而喘息本身專注於WordPress與主機討論，故網站轉型則朝著這個方向著手改版。
在改版的過程中，藍藍路提供了很大的協助，除了網站版型美工之外，也提供了關於改版方向的一些想法，於是我們倆就花了兩天的時間將這個網站的版型做完，整個熱血到從早上11點不間段的到隔日凌晨四點，大家都睡了我們還在拼命，目的就是讓WordPress有一個完整的資源中心，讓大家可以更快速的對WordPress上手。
關於免費的喘息改版相關說明，您亦可參考 「免費的喘息」轉型成WordPress資源中心 此篇文章。
OutLine 佈景
為什麼要叫做「OutLine」？其實是直接從Online這詞直接反推變成OutLine，意思就是香腸退伍版。之前提到香腸破百，而現在寫這篇文章已經剩下62天了，距離退伍日子不遠了，所以才叫做OutLine版。本來這詞是想要用到香腸炒魷魚改新版，不過我自己對網站現在這個佈景很滿意，閱讀上也很舒服所以並不打算改版，名稱就優先留給喘息使用囉！
在此要說明一下，Outline真正的翻譯是「大綱」。如前面提到，扣除了網站內一些客製化的圖示後，其實這版本真的很精簡，單純就CSS畫出來的HTML5網站。
網站首頁十分精簡，連版權宣告都沒有，只有網站logo以及選單。這個頁面是透過WordPress的自訂文章首頁與自訂模板合併製作，搭配JQuery滑動選單特效以及WordPress自訂選單。
至於文章內頁，不提供留言功能，因為網站的目的主在提供WordPress資訊與技術教學，可以把這個網站當成WordPress的知識庫。右手邊提供社群推薦功能，自用他用兩相宜。在標題前方標示了文章分類，有助於使用者須查詢同分類文章可以直接點擊查閱。
網站的側邊欄，全部使用圖片，有一種Windows Phone 7的感覺，但點下去並不會轉換頁面，有些連結點下去開新視窗，有些連結點擊則跳出特效框框，請看下一張圖片。
就是這個，透過JQuery達到的效果。網站內的聯絡我們、搜尋、訂閱文章均採用這種模式。
這個是分類頁面的效果，因為目前文章有限，只能展示簡陋的畫面。超過一定篇數會有分頁按鈕，分頁按鈕就和香腸炒魷魚一樣囉！畢竟是同一個模組嘛！
與分類頁面有所區別，搜尋結果頁面會標上分類，同時您可以直接點分類查閱文章，也可以點標題查閱文章。
這是聯絡我們頁面，表單採用Google表單，只是做了客製化的CSS，提交表單後有不一樣的畫面，在此就先做個保留囉！對了，網站的404錯誤頁面，也有不一樣的感覺，大家可以自行去發掘囉！這邊我們就不卡圖破梗了。
寫到這邊，又是到了收假的時間點，大家下次見囉！
免費的喘息： http://sofree.tw
![[教學]如何用 ShowKeyPlus 查詢 Windows 10/11 產品金鑰序號？](https://i0.wp.com/sofree.cc/wp-content/uploads/2023/11/20231103232630_0.jpg?quality=90&zoom=2&ssl=1&resize=350%2C233 "[教學]如何用 ShowKeyPlus 查詢 Windows 10/11 產品金鑰序號？")
![[教學]如何申請台北捷運誤點證明？](https://i1.wp.com/sofree.cc/wp-content/uploads/2024/04/20240403164113_0.jpg?quality=90&zoom=2&ssl=1&resize=350%2C233 "[教學]如何申請台北捷運誤點證明？")
![[教學]如何用 Chrome 批次把 HEIC轉成 JPG 圖片 ？](https://i0.wp.com/sofree.cc/wp-content/uploads/2024/04/20240402230128_0.png?quality=90&zoom=2&ssl=1&resize=350%2C233 "[教學]如何用 Chrome 批次把 HEIC轉成 JPG 圖片 ？")
![[教學]GA4 和 Google AdSense 資料串接，輕鬆掌握網站流量和收益報告](https://i2.wp.com/sofree.cc/wp-content/uploads/2023/06/20230620130326_57.jpg?quality=90&zoom=2&ssl=1&resize=350%2C233 "[教學]GA4 和 Google AdSense 資料串接，輕鬆掌握網站流量和收益報告")
