2015年5月3日

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

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

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



十、讓圖片以小尺寸呈現


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

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

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

詳細的原理及操作請參考「加快 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 的轉換值:



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)工具,並附上刪除的理由:


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


2. 保留的工具

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

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

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



十三、客製網站


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


自訂行動版系列文章:

8 則留言:

  1. 除此之外發現你行動版左右滑動到上下一篇文章的功能不見了(以前覺得看文章時很容易不小心滑到就跳到別篇文章,,,)!

    回覆刪除
    回覆
    1. 你沒說還真沒注意到,我也不太喜歡這個功能,不過這是 Blogger 行動版官方控制的功能,所以他是如何出現、怎麼消失的,其實也不太清楚,哈哈~~

      刪除
    2. 表現一下男美髮師是很細心的XDDD
      我以為說你找到移除辦法了說!我看別的網站還是有(亦是官方範本)

      刪除
    3. 可能我裝的語法太多,讓官方這個語法自動失效了~~XD

      刪除
    4. 誤打誤撞XD我記得先前找過,似乎找不到方式可以關了它

      刪除
    5. 找時間來研究看看好了~~

      刪除
    6. ^^應該很多人想知道!先前找的時候,看到了抱怨,但卻沒有解決辦法

      刪除

張貼留言注意事項:

◎ 勾選「通知我」可收到後續回覆的mail!
提問請附網址、詳細描述狀況,如提供的資訊不足,則無法回覆。
◎ 請在相關文章留言,與文章無關的主題請至「Blogger 中文論壇」。
◎ 若詢問 CSS 、非官方範本問題、或貴站為商業網站 ,請參考「本站諮詢頁面」→「1. 諮詢服務」
◎ 若留言要輸入語法,"<"、">"這兩個符號請用其他符號代替,否則語法會消失!
◎ 若發現留言不見了,通常是因為 "複製貼上" 的內容常被系統判定為垃圾留言,請不用擔心,我會定期將留言恢復。
◎ 本站「已關閉自刪留言功能」。