Blogger 自訂行動版範本實作﹍(3) 工具+圖片+字體

完成 Blogger 自訂行動版「標頭+導覽列+廣告」、「文章+側邊欄+頁尾」的所有版面區塊後，現在要完成最後的收尾工作。

根據「優化網站效能該注意哪些事?」，加快網頁載入速度需要從 "圖片" 與 "Javascript" 優先下手，本篇會談到這些優化的過程。

十、讓圖片以小尺寸呈現

無論對版型做了多大的優化、或是對程式碼做了最大的精簡，這些改善在行動版網頁都無法抵銷大圖的讀取時間。目前行動裝置的硬體設備比不上 PC 端的情況下，短期間內要改善比較困難，其原理可參考這篇「也許 DOM 不是答案」。

其中一種解決方法或許是，網站工程師特地另外做一個行動版網頁，並且行動版的圖片改用小尺寸呈現，那麼就能大大縮短網頁載入時間 → 但是這樣的網站得為所有圖片製作兩種尺寸的版本，工程師在維護上是極度麻煩的事。

如果你的部落格圖片很多、且尺寸都不小，恭喜你選擇了 Blogger 平台，這件事在行動版將不再成為問題，因為 Blogger 存在一個密技，能讓行動版網頁的原圖，就算是 1000px、甚至 2000px 寬，在行動版都能自動縮小為 280px 呈現。

詳細的原理及操作請參考「加快 Blogger 行動版圖片載入速度的密技」，以後在後台編輯文章時，利用這個線上工具就能轉換圖片尺寸了：

Blogger 圖片尺寸轉換器

十一、調整字體大小

由於 WFU BLOG 的內文為了讓眼睛閱讀時比較舒適，設定了比較大的字體(約 16px 再乘以 1.1)，這樣的字體大小在行動版上看起來稍嫌大了一些，比例較不協調，因此想將行動版各區塊的字體全部調整小一些。

如果使用判斷式的話，例如調整文章標題、內文、Body、頁尾...等多個區塊，那麼每個地方都得安插一次判斷式，就只是為了調整 font-size 這個 CSS 參數而已，將會弄得 CSS 設定滿滿的都是判斷式，因此另外尋思比較有效率的處理方法。

1. PX 與 REM

設定字體大小除了 PX(像素值) 以外，還有不少單位可使用，可參考這篇「CSS 字型大小 px, pt , em , rem」，其中 CSS3 出了一個新的單位稱為 REM，對於行動版字體的設定有很大的幫助。

PX 是絕對單位，比較沒有彈性，無法在不同的頁面、不同的行動裝置自動調整。而 REM 是相對單位，可以視為一個 "百分比" 的概念。我們可在網頁版設定一個 REM 的基準單位、行動版設定另一個 REM 的基準單位，然後將 PX 換算成 REM 後，行動版的字體大小就能自動調整了。

這裡有個線上轉換工具，可以快速計算出 PX 與 REM 的轉換值：

• http://pxtoem.com/

2. 網頁版準備動作

首先設定網頁版的 REM 基準，我設定為 1rem = 16px。

接著找出網頁版、行動版都會使用到的區塊，記錄 font-size 的 px 值，並利用上述的線上工具計算轉換為 rem，例如：

• body(整個版面)：16px → 1rem
• h5.date-header(日期)：14px → 0.875rem
• .post-title(文章標題)：24px → 1.5rem
• .post-body h2(文章內大標題)：20px → 1.25rem
• .post-body(內文)：(16 x 1.1)px → 1.1rem
• #HTML7(我的頁尾區塊)：(16 x 0.9)px → 0.9rem

3. 行動版

接著設定行動版的 REM 基準，我設定為 1rem = 14px。這樣就好了，其餘的都不必變動，行動版的字體大小就設定完了。

例如文章標題在網頁版的 1.5rem 顯示出來會是 24px 這樣的大小，而行動版則會是 1.5 x 14px = 21px 這樣的大小，也就是所有行動版的字體大小，都會同比例縮放。



4. 實作記錄

有了以上概念後，來看看怎麼修改範本。到後台「範本」→「編輯 HTML」，游標點進範本區塊，按 Ctrl-F 搜尋 </head> 這個字串，找到後在此字串的前一行，插入以下程式碼：

<style>
/*字體*/
<b:if cond='data:blog.isMobile'>
html{font-size:14px} /*行動版 1rem 基準*/
<b:else/>
html{font-size:16px} /*網頁版版 1rem 基準*/
</b:if>

body{font-size:1rem}
h5.date-header{font-size:0.875rem!important}
.post-title{font-size:1.5rem}
.post-body h2{font-size:1.25rem}
.post-body{font-size:1.1rem}
#HTML7{font-size:0.9rem}
</style>

• 使用 REM 的概念後，只有一個地方需要使用判斷式，就是一開始對 html 這個標籤的設定
• 紅色數字分別填入行動版與網頁版代表 1rem 基準的 px 值即可
• 所有區塊的 font-size 均改用 rem 來表示
• 藍色字串 "!important" 稍微解釋一下，由於 Blogger 官方有很多複雜的 CSS 設定，如果發現某個區塊的字體大小沒有發生作用，表示我們設定的 CSS 被官方的 CSS 覆蓋過去了，那麼這個區塊的 CSS 請加上 "!important" 來強制生效。

十二、工具的取捨

最後說明一下 WFU BLOG 如何取捨行動版使用的工具。

1. 刪除的工具

以下這些是網頁版有執行，但行動版不執行的(js)工具，並附上刪除的理由：

• 所有側邊欄工具：向官方行動版看齊
• 下拉選單：寬度不夠
• 浮動導覽列：非關鍵工具
• 單篇文章瀏覽數：非關鍵工具
• Lazy Load(圖片延遲載入)：行動版圖片已可改用小尺寸載入
• fancybox(燈箱)：非關鍵工具
• Feedly 按鈕顯示訂閱人數：非關鍵工具
• 相關文章：減少圖片使用
• 三種留言分頁(G+/FB留言板)：非關鍵工具
• 留言排序：非關鍵工具
• 較新/較舊文章按鈕顯示文章標題：非關鍵工具
• Alexa 排名：非關鍵工具

少了十幾個需要執行的 js 工具，相信對載入速度有很大的提升。


2. 保留的工具

以下這些是行動版有安裝的(js)工具，並附上使用的理由：

• 系列文加強版：跟 "相關文章" 的作用相同，可增加訪客停留在網站的機率。只顯示文字、不顯示圖片(加快載入的時間)，因此在行動版可取代 "相關文章" 的功用。
• Histats：安裝 Histats 官方追蹤碼後，可讓 Histats 追蹤到行動版的訪客數據。
• FB、G+ 按鈕：社交分享按鈕，增加文章曝光機會。

能夠稱得上非裝不可的工具，看起來並不多。這樣子，我們就完成了一個輕盈的 Blogger 行動版。

十三、客製網站

系列文的內容很長，需要參考的文件、具備的基本知識不少，因為修改自訂行動版是不小的工程。當然，將行動版網頁改成滿意的效果後，對網站形象會有一定的影響力。如果修改行動版這件事想交由本站處理的話，請參考「BLOGGER 行動版客製化作業流程」與我聯繫。

自訂行動版系列文章：