隨著行動裝置的普及化，網站不得不需要跟進讓不同螢幕解析度的裝置皆可瀏覽。這次針對部落格版型的設計，推出也是一樣支援多重解析度的裝置佈景：林旺、馬蘭。別懷疑，這次是一口氣兩個，正當版型做到一半的時候，WordPress官方推出了3.9的版本。正巧，每次推出一個佈景主題，官方都剛好向上升級一個大版本，如果官方升級太頻繁，那我應該會做WordPress免費版型做到手軟XD。

這次兩個版型分別叫做「林旺」和「馬蘭」，相信大家一定不陌生這兩隻大象。至於介紹我想就免了，有興趣直接上維基百科上看應該會更為詳細。版型兩個，但其實是差在配色部分，一個是黑色系，另一個則是純白色系，看大家喜歡哪一款呢？白色系應該較為好搭配文字顏色，黑色系則不是每一個網站都適合，但感覺網站比較有質感的感覺，最重要的還是要搭對圖片。

此次跟大家分享的免費版型阿腸網頁設計工作室第五個與第六個免費版型。或許跟香腸一樣有一個疑問，既然顏色不相同，但是架構是一樣的，為何不推出可以後台更換版型顏色就好？不是比較方便嗎？事實上有考量過這個設計方式，但原因在於：較為消耗效能、版型檔案較肥、細部設定要太多判斷，總歸來說開發上較為麻煩，同時也對網站效能不一定好。

我們換個方式解釋，當一個好用的防毒軟體，你可能僅需電腦病毒防護，但是他卻包了防火牆(這玩意不能防火)、郵件防護、網頁瀏覽器頁面檢測、系統清理、系統監控等等，用不到的東西都包進去，會造成電腦系統的效能浪費，如果程式寫不好，可能會造成電腦常常當機。回到網站上來說也是如此，為什麼國外的付費版型功能很強？但是放在網站上很像一堆功能用不到，而且網站會卡卡的，原因就是在於此。

• 版型名稱：Lin Wang 林旺
• 免費下載：按這裡  (黑色系)
• 展示網址：http://linwang.achang.tw/
• 使用規範：按這裡 (限個人部落格、如遇用於商業網站請來信洽談。)

• 版型名稱：Ma Lan 馬蘭
• 免費下載：按這裡  (白色系)
• 展示網址：http://malan.achang.tw/
  使用規範：按這裡 (限個人部落格、如遇用於商業網站請來信洽談。)

林旺版 Lin Wang ：黑色系

這款是林旺版的黑色系，背景圖片可以自己換，支援多層選單(兩層)，側邊欄寬度較寬，可以放入300寬度的廣告(因為最小會縮到300)。左側的部分則是自動擷取一定的文字數量顯示，沒有提供縮圖顯示，相對的網站顯示上會更為快速，支援響應式網頁設計。

馬蘭 Ma Lan：白色系

與林旺相對，白色系的馬蘭會讓你有一種舒服的感覺，不過網站顏色比較輕，背景圖也要調整好才會顯得好看。如同林旺黑色系版型，背景可以換，左側一樣不顯示圖片，並且支援多層選單(兩層)的設計，當然網站支援RWD 響應式網頁設計。

首頁文章清單區塊

標題與一小段落的描述，簡單的日期與分類的標示。林旺的黑色版示意圖。

馬蘭的白色系版本示意圖。

內文內容區塊

上面的選單是固定的，隨時可以透過選單點選切換，不用當要點選選單的時候，還要滾到網站最上方去。

白色版型的示意圖。

留言區塊

當版面夠寬，留言區塊會呈現兩排的排版，如果寬度不夠則會換成直立式的表單排列。

再讓我們看一下免費版型的白色系。

選單設計

當解析度不夠的時候，選單會變成SELECT BOX的型態選擇。

這樣行動版的使用者也很好點選。

平板、手機版

手機、平版或是用瀏覽器調整畫面寬度為窄版，都會自動縮放，也就是所謂的RWD(Responsive Web Design)響應式網頁設計。支援不同的瀏覽器解析度。兩個版本均有支援。

更換網站背景底圖

第1步  點選【外觀】→【頁首】。

第2步  這邊可以上傳圖片並裁切。畫面上指定的尺寸是「2048×1365」，圖片裁切可以參考教學。

內建換LOGO、自訂廣告欄位

如同之前版本，提供換LOGO、放Google Analytics追蹤碼、側邊滾動分享按鈕、自訂廣告欄位程式碼(提供內文上方、內文中間與內文下方的廣告欄位)。

免費版型的介紹就到此告一段落，若有任何問題歡迎留言回報，謝謝。

相關文章

[教學]如何用 Chrome 批次把 HEIC轉成 JPG 圖片 ？

[教學]GA4 和 Google AdSense 資料串接，輕鬆掌握網站流量和收益報告

[教學]如何用 ShowKeyPlus 查詢 Windows 10/11 產品金鑰序號？

[教學]如何申請台北捷運誤點證明？

Xuite隨意窩部落格搬家怎麼做？要先備份嗎？

菲律賓遊學攻略｜語言學校太多難以抉擇？看這篇就對了！

Line Mobile 月租24元！中華電信隱藏資費方案(附邀請碼+申請教學)

免用Photoshop！Adobe Express 免費線上圖片裁切服務

免註冊帳號！ChatGPT 開放免費使用並且無任何限制！