WFU BLOG

(Pic from: keytothecity.co.uk)之前做過兩個「回到頂端」按鈕的版本，分別是「Go Top 按鈕符合使用者體驗的友善設計」、「Go Top 按鈕放在浮動導覽列」。最近處理的 case 需要炫一點的特效，因此將之前的版本增加一些動畫效果。

以下為修改的筆記，如果熟悉 CSS / jQuery 的話，可以改為符合自己風格的效果。

一、特效展示

這個版本的特點主要有以下幾個：

1. 放大縮小

常見的放大縮小作法為，設定兩張圖片(一大一小)，滑鼠經過時切換為另一張圖片。

這個版本只使用一張圖片，用 CSS 控制尺寸，並在放大縮小時使用動畫效果，可以看到由小變大、及由大變小的平滑轉變過程。

2. 透明度

一開始設定半透明，避免按鈕太過鮮眼。滑鼠經過時再恢復為不透明。

3. 捲動動畫

一般的捲動效果為直上直下，當捲動速度很快時，這樣的效果比較突兀一些。

借用 jQuery 的 easing 效果 (有 32 種)，比較平順的捲動效果為，最後捲到上方時，刻意放慢速度、類似火車進站時的減速效果，可以增加捲動的質感。

以上這些特點，可先看這個網頁的效果：

點此看範例網頁

二、準備動作

在修改範本之前，如果第一次安裝本站工具的讀者，建議先閱讀「備份範本的訣竅」系列文章。

1. 請到後台「範本」→「編輯 HTML」，游標點進範本區塊，按 Ctrl-F 搜尋 </head>這個字串，找到後在此字串的前一行，插入以下程式碼：

<script src='//ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js'></script>
<style>
/* Go Top 按鈕 */
#goTop {
position: fixed;
bottom: 5px; /* 與下方的距離, 也可改為百分比, 即為距離螢幕下方的百分比 */
right: 5px; /* 與右方的距離 */
width: 40px; /* 按鈕原始寬度 */
height: 40px; /* 按鈕原始高度 */
opacity: 0.4; /* 按鈕原始透明度 */
z-index: 10;
cursor: pointer;
transition: all .5s; /* 動畫效果 持續期間 */
-webkit-transition: all .5s;
-moz-transition: all .5s;
}
#goTop:hover { /* 滑鼠經過按鈕時 */
opacity: 1; /* 透明度 */
width: 80px; /* 按鈕寬度 */
height: 80px; /* 按鈕高度 */
}
</style>

第一行可參考「如何使用jQuery版本」，檢查範本是否已安裝過 jquery，以免重複安裝。

其餘 CSS 參數，請按綠色字串的說明來修改即可。

三、安裝按鈕

接著請搜尋 </body>這個字串，找到後在此字串的前一行，插入以下程式碼：

<!-- Go Top 按鈕+動畫 start -->
<img id="goTop" src="http://4.bp.blogspot.com/-28LaVG5DtBo/VQ_XOQosQQI/AAAAAAAALY4/T4uKguB0Ttk/s100/up-button.png" title="Back to Top"/>
<script>
$.extend($.easing, {
easeOutExpo: function (x, t, b, c, d) {
return (t==d) ? b+c : c * (-Math.pow(2, -10 * t/d) + 1) + b;
}
});
$("#goTop").click(function(){
$("html, body").animate({scrollTop: 0}, 1000, "easeOutExpo");
});
</script>
<!-- Go Top 按鈕+動畫 end, Designed by WFU BLOG -->

藍色字串可改為自訂的按鈕圖示網址。
紅色字串為捲動過程花費的時間，1000 代表 1 秒鐘。
綠色字串為捲動效果的程式碼，請見下一節的說明。

四、easing 效果

jQuery 預設的捲動效果只有兩種：

linear：直線移動
swing：稍微晃動

其實也不能說是 jQuery 有這兩種捲動效果，該說這是物體移動路徑的演算法。jQuery 可經由擴充，來增加物體其他的移動方式，詳細說明請參考這個網頁，附有圖示說明：「jQuery Easing 使用方法及其圖解」。

瞭解各種路徑後，再回到「三、安裝按鈕」的所有綠色程式碼，我選擇擴充 "easeOutExpo" 這個效果，也就是捲動最後呈現「緩慢停止」的運動方式。

如果想嘗試其他的物體運動方式，可將綠色部分的程式碼，改為其他 31 種，即可測試不同的捲動效果。

更多 Go Top 按鈕語法：

(Pic from: pixabay.com)習慣 Windows 系統後，對於蘋果系統有很大的不適應性，例如簡單就能播放的 mp3 鈴聲，在蘋果設備要播放或製作都不是那麼容易。

最簡單的方法是藉由 iTools 這個軟體，就能輕鬆幫 iPhone 製作 mp3 鈴聲，而以前也是用這個軟體來進行，不過現在對於大陸軟體較有疑慮，因此捨棄了這個方案，可參考「iPhone 檢測電池容量」→「二、iTools」→「1. 簡體版」。

還好利用官方軟體 iTunes 也有方法可以製作 mp3 鈴聲，無論 mp3 時間多長都可以，就是步驟多了點，以下為詳細的操作流程筆記。

一、簡易教學

此流程來自於這篇「用 iTunes 製作 iPhone 鈴聲」，不過這篇應該是寫給習慣蘋果系統的使用者，對於我這樣不熟悉、且不會常常操作 iTunes 的使用者，許多精簡後的動作看不太懂、找不到地方操作。

熟悉蘋果系統的使用者，直接看這篇文章應該就能完成 mp3 鈴聲，如果需要更仔細的操作流程，請繼續往下看。

二、詳細 Step by Step

1. 假設跟我一樣沒操作過 iTunes 的話，請先下載 Windows 版本：

http://www.apple.com/tw/itunes/download/

安裝完畢後，執行 iTunes，將 iPhone 連上電腦，確定 iTunes 已經抓到手機裝置。

2. 剛使用時，音樂資料庫應該沒有任何資料：

按下左上角紅圈的「音樂符號」→ 按右上角的「播放列表」，應該是一片空白。

接著按選單上的「檔案」→「將檔案加入資料庫」→ 選擇所有你要剪輯的 mp3 檔

3. 如下圖，所有 mp3 檔將出現在播放列表：

最需要注意的是「時間長度」這一欄，經實測後請記住這一點：「超過 30~40 秒的鈴聲檔案無法被 iPhone 讀取，必須將音樂擷取為 30 秒的檔案最為保險」。

接著將要製作的檔案，按右鍵選取「簡介」。

4. 如下圖畫面，選擇「選項」：

請調整音樂的「開始」及「結尾」時間點，設定為 30 秒的間隔即可 → 按下「好」

5. 回到上個畫面後，如下圖，按右鍵選擇「製作 AAC 版本」來製作 iPhone 可以讀取的格式

6. 完成後，下圖可看到多了一個 30 秒的同檔名檔案。對著新檔案按右鍵選擇「在 Windows 檔案總管中顯示」，可開啟這個新檔案的資料夾位置。

7. 非常重要的一個步驟，產生的檔案附檔名為 ".m4a" → 我們要改附檔名為 ".m4r"

另外從上圖紅線可看到，這個檔案的位置太深，將來不容易找到，建議在這裡直接將檔案剪下，貼到自己找得到的地方，例如桌面。

8. 回到 iTunes 畫面：

如上圖，先點選紅框的圖示，出現下拉選單後，點選「鈴聲」

9. 還沒設定過鈴聲的話，如下圖，鈴聲清單可能是一片空白

接著按選單上的「檔案」→「將檔案加入資料庫」→ 選擇剛剛產生的 ".m4r" 鈴聲檔

10. 如下圖，鈴聲檔出現在清單：

接著點選圖中紅圈的裝置圖示，來切換到 iPhone 的內容。

11. 如下圖，先選擇上方的「同步鈴聲」，接著勾選要同步到 iPhone 的鈴聲，最後按下右下角的「套用」就完成了：

12. 如果還有其他鈴聲要製作，重複以上所有動作即可一一將鈴聲同步到 iPhone 使用。

三、製作時間不限的 mp3 鈴聲

以上流程製作的是符合系統限制(30 秒) 的鈴聲，如果想突破這個限制，可參考這篇教學「製作無時間限制的iPhone鈴聲」。

他的原理是先製作一個完整長度的鈴聲檔 → 接著刪除 → 再製作一個符合 30 秒規定的鈴聲 → 然後用完整長度的鈴聲檔取代 30 秒的鈴聲。

算是一個讓系統誤判的密技，有這方面需求可按該流程進行即可。

更多 iPhone 使用心得：

(Pic from: freevectorgraphics.org)最近發現計數器呈現停滯狀態，進了 Google 試算表才發現，原來官方已經強制升級為新版試算表，因此舊版試算表抓取 Google Analytics(簡稱 GA) 的功能跟語法已經失效，導致計數功能無法執行，請見這個「Google 試算表升級公告網頁」。

若你安裝的舊版「Blogger 單篇文章瀏覽數」還能運作，如官方公告所言，試算表升級動作從 2014 年就開始，日前我的試算表已被強制升級，因此所有的舊版試算表終將無法運作。

為了讓新版試算表能運作「單篇文章瀏覽數」，整個製作流程得全部更改，後端與前端的程式碼也都要重寫。算算這已經是「單篇文章瀏覽數」第 3 個版本了，雖然有點無奈，不過使用網路的免費服務就是這樣，得習慣每幾年就可能出現的大改版。

也因為如此，從現在開始，為了讓這個功能可長久運作，「單篇文章瀏覽數」必須開始酌收維護費用，請見後述細則。

一、收費的原則

1. 此為一次性的費用，只要 Google 試算表沒有再大改版，不需要重寫程式，就不會再收費。

2. 下次大改版之前發生的各種小狀況，只需要修改部分程式就能解決的話，本站會負責維護。

3. 安裝步驟非常多，若有辦法自行安裝者，暫訂維護費用為 NT. 200。

4. 無法自行安裝，或想節省時間由本站代為安裝者，費用較高，請用文末聯絡表單與我聯繫。

5. 已付費處理過舊版安裝的使用者，直接與我聯繫即可免費升級到 V2。

6. 曾自行安裝過舊版的使用者，一個月內(四月底前)與我聯繫，可免費升級到 V2。

7. 若未曾使用過舊版，特別優惠本站忠實讀者，一個月內(四月底前)安裝 V2 可半價優惠 (NT. 100)。

8. 若要移除版權圖示連結，請與我聯繫。

二、準備動作

有信心挑戰自行安裝的使用者，相信你已經安裝過舊版，知道流程有多長、有多少準備動作。以下內容共有兩篇文章，以及事先需要瞭解的概念。

1. 安裝 GA

首先確定部落格已經申請、並安裝了 GA，才能使用本文的功能。

為何需要使用 GA 來當計數器，而不是使用其他免費的第三方計數器服務？詳細理由、運作原理、及我過去發生的事件，請直接參考舊文「讓Blogger能顯示單篇文章瀏覽數」。

2. 心理建設

GA 的數據與 Blogger 後台的數據不同，且某些文章可能相差很多。但是相對而言，GA 的數據是最有參考性、反應真實狀況的。詳細的比較分析務必參考這篇「Blogger 後台文章瀏覽數與 Google Analytics 數據差別很大的原因」，來為自己打預防針。

三、製作試算表資料庫

為了方便操作，我已經製作了一個試算表範本。首先請登入 Google 帳號，接著進入以下試算表網址──

https://docs.google.com/spreadsheets/d/1SnWrmxkoURctpwixtoByPHt0TczgjsYFxZhEu_6CpHk/edit?usp=sharing

按選單的「檔案」→「建立副本」→「輸入新文件名稱」後，這份試算表副本會出現在自己的 Google Drive 文件

接著按「外掛程式」→「取得外掛程式」，如下圖：

如上圖紅框處，運氣好可直接看到「Google Analytics」的圖示，可直接點選安裝。沒看到的話，在搜尋框搜尋 "google analytics" 也可找到。

接著按下「免費」按鈕即可進行安裝。

彈出的視窗按下「接受」即可

回到主畫面，按下「外掛程式」→「Google Ananlytics」→「Create new report」，等待幾秒鐘後，右邊會產生新的視窗，有很多資料要填寫。

先看上半部，第 1 個欄位請填入字串 "sheet1"，也就是第一個工作表的名稱

接著第 2 個欄位紅框處，確認一下你已經勾選了要統計數據的網站名稱

Metrics 這個欄位，可用滑鼠拉到圖中的位置，也可直接輸入字串 "pageviews" 來快速找到這個項目

Dimensions 這個欄位，可用滑鼠拉到圖中的位置，也可直接輸入字串 "page" 來快速找到這個項目

最後按下「Create Report」完成設定

試算表會自動產生一個新的工作表「Report Configuration」，用來儲存 Google Analytics 的各項設定。檢查一下第 8~9 欄的設定值是否跟上圖紅框一模一樣？如果不是的話，你可能之前選錯項目了，請把這兩欄的字串改成跟上圖一樣。

接著請依上圖欄位設定其他項目：

Start Date:填入 2005/1/1
End Date:填入 =today() 會自動產生當日日期
Last N Days: 清除內容
filters:填入 ga:pagePath=~^/20
max-results:填入 50000

上圖為填完後的狀態

設定完後，來試試看能否抓到 GA 的數據。按下「外掛程式」→「Google Ananlytics」→「Run reports」

執行完畢後，切換到工作表「sheet1」

有數據跑出來的話，就差不多成功了，後續的步驟都不太會有問題。

接下來設定自動抓 GA 數據的間隔，按下「外掛程式」→「Google Ananlytics」→「Schedule reports」，會出現上圖。

先勾選「Enable reports to run automatically」

再選擇「evrey hour」，代表每個小時自動更新一次數據

然後按下「Save」儲存

由於篇幅的關係，剩餘的步驟請見下一篇。

聯絡表單：

(Pic from: freevectorgraphics.org)既然改了版，V2 程式碼順便改善舊版的某些功能。舊版要在一個頁面、多個位置擺放計數器不太方便，新版的優點為，一篇頁面要在多少個位置擺放計數器都沒有限制，程式彼此間不會打架。

因此裝了 V2 後，如果你熟悉程式碼，只要發揮想像力，可以自己想辦法擴充到其他 Blogger 工具，例如最新文章、熱門文章、相關文章、隨機文章...等等，只要其他能顯示文章的小工具，也能出現文章的瀏覽數。

以下接續「上一篇」的步驟。

四、讓試算表資料能被讀取

在試算表主畫面按下「工具」→「指令碼編輯器」

出現上圖後，按下「資源」→「現有專案的啟動程序」

在出現的視窗按下「尚未建立觸發程序，按一下這裡來新增觸發程序。」

如上圖顯示，依序設定為「時間導向」→「小時計時器」→「每隔4小時」

按下「儲存」→ 出現需要授權的畫面 → 按「繼續」→「接受」

完成授權後，按下「執行」→「getUrlPv」，看看能否將資料從「sheet1」複製到「sheet2」

執行完畢後，回到主畫面，檢視工作表「sheet2」有沒有如上圖產生資料。

成功的話，準備將資料發佈到網路上供存取。

按下「檔案」→「發佈到網路」→ 按下「發佈」按鈕

如上圖，紅線標示的字串是最重要的資訊，長得像這樣 "1UpIjRSixVWYlQnrcSceMb3ATRXlRiKqV_CTc03XyHDc"，這是試算表的代號，請記下自己的字串，位於 "/d/" ~ "/pubhtml" 之間的所有字串，之後會用到。

到了這裡，如果都成功的話，恭喜你可以自行安裝「單篇文章瀏覽數 V2」了，請用文末的表單與我聯繫，並附上你的部落格網址，轉帳資訊請見這個網頁：

匯款資訊網頁

五、安裝程式碼

1. 安裝新版程式碼之前，務必先移除舊版的所有程式碼。

2. 在修改範本之前，如果第一次安裝本站工具的讀者，建議先閱讀「備份範本的訣竅」系列文章。

3. 拿到新版程式碼後，請到後台「範本」→「編輯 HTML」，游標點進範本區塊，按 Ctrl-F 搜尋 </head>這個字串，找到後在此字串的前一行，插入新版程式碼：

第一行的 <script src='//ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js'></script> 可參考「如何使用jQuery版本」，若範本中已經安裝過 jQuery，可移除這段內容。
sheet 的參數，請改為上面「四、讓試算表資料能被讀取」最後面、自己的試算表代號。
img 的參數，可改為自訂的圖示網址。

4. 接著以下程式碼，請放在計數器想要顯示的地方：

<!-- 單篇文章計數器v2 顯示位置 start -->
<span class='postPV' expr:data-url='data:post.canonicalUrl'>
<script>
(function () {
var scripts = document.getElementsByTagName("script"),
thisScript = scripts[scripts.length - 1];
pvCount.main(thisScript.parentNode);
} )();
</script>
</span>
<!-- 單篇文章計數器v2 顯示位置 end -->

如果不清楚要擺放在哪裡，可以參考「Blogger 單篇文章瀏覽數」→「四、擺放位置」

六、聯絡表單

如果以上流程要自行安裝有困難，或是要索取安裝程式碼，請附上你的部落格網址，用下面的表單與我聯繫。

聯絡表單：

更多實用工具：

本站使用的 Blogger hack 及工具整理

(Pic from: maczapp.com)兩年前買的「初代 Nexus 7」平版，貧乏的 1G 記憶體在歷經升級 Android 5.1 後、加上越來越肥大的 Chrome 瀏覽器，才開三、四個網頁便老是呈現痴呆狀態，Chrome 果真不愧「記憶體怪獸」的稱號。

為了讓 Nexus 7 繼續服役，移除 Chrome 乃不得不然，最後比較令人放心的替代方案找上了 Opera，跟當初「桌面版 Opera 的抉擇」是一樣的。

然而，Opera 的 Android 行動版本產品線分歧，共計有三種：

Opera Browser
Opera Mini
Opera Mobile Class

相信沒幾個人分得出其差別，在使用之前，可參考本文的分析與心得後，再做出抉擇。iOS 的版本比較，請直接跳到「五、iOS 系統﹍Opera Coast / Mini」。

一、Android 版本差異

如果瞭解 Opera 桌面版瀏覽器的演進歷程，那麼對行動版本的差異會比較容易理解。以下順序從歷史演進的時間來說明：

1. Opera Mobile Classic

這是 Opera 瀏覽器最早的行動版本，其實一開始的名稱只有「Opera Mobile」，後來 Opera 放棄這個版本的研發後，才多了一個詞、成為「Opera Mobile Classic」。取名 "經典" 大概就是讓他走入歷史的意思吧！

如果是桌面版的愛用者，都會知道令人懷念的 Opera 12 版，執行速度快、介面設計友善、用過便愛不釋手，其使用的是自家研發的「Presto 引擎核心」。

Opera Mobile Classic 使用的正是古早的 Presto 引擎，還保存著友善介面的優良傳統。可惜網頁技術日新月異，在 Opera 放棄 Presto 之後，使用 Opera Mobile Classic 對於新的網頁技術、新的行動裝置版本會有相容性問題。

2. Opera Mini

這是為了低階手機而設計的行動瀏覽器版本，他甚至稱不上是一個瀏覽器，更像是一個 App。

詳情可參考「Opera Mini 維基網頁的說明」，使用 Opera Mini 時，無法看到實際的網頁效果，而是 Opera 伺服器先讀取網頁資料、進行壓縮整理，再將數據傳送到 Opera Mini 顯示出來，以節省傳輸時間、減少行動裝置的資源使用。

這算是最不得以的一種選擇，但是優點顯而易見，如同大部分的 App 一樣：

容量輕薄短小
操作方便、介面友善

3. Opera Browser

最晚上市的版本，Opera 脫離 Presto、投向 "Chrome 家族" 之作，使用了「Blink 引擎核心(Webkit 分支)」，得以與最新的網頁技術接軌。

如果行動裝置軟、硬體設備佳的話，那麼就不必考慮其他兩個版本，直接安裝 Opera Browser 就對了。

雖然其操作介面有改善空間，目前我給的評價不及其他兩者，但 Opera 的未來押在這個版本之上，只能期待逐漸改善其介面了。

簡單說明完版本差異，以下依序分享使用心得。

二、Opera Mobile Classic 使用及安裝

1. 現狀

Opera Mobile Classic 的缺點如前所述：

網頁技術這方面比較無法支援新的 Javascript / CSS 效果。
Android 5.x 以上會有相容性問題

也因為如此，最近 Opera 已經將 Opera Mobile Classic 從 Android 下架，無法下載了。

但其實大部分的手機並非使用最新的 Android 5.x 版本，而且行動裝置主要是拿來看資訊用的，只要不是使用太多特效的網頁，多數網頁都是能正常觀看的。

如果你的 Android 版本是 4.x 或以下，那麼 Opera Mobile Classic 其實是不錯的選擇，操作起來比 Opera Browser 順手。

2. Apk 安裝問題排解

如果你想試試 Opera Mobile Classic 的話，畢竟已經下架了，因此過程會有一點崎嶇，可參考以下我的安裝流程記錄，可減少一些冤枉路：


官網下載目錄：http://ftp.opera.com/pub/opera/android/classic/

官網下載連結：http://ftp.opera.com/pub/opera/android/classic/Mobile_Classic_12_1_9_Generic_Opera_ARMv5v7.apk

首先請前往以上的 "官網下載目錄" 連結，目前的最新版本是 12.1.9，萬一將來有新版，請再下載更新的版本。

apk 檔要能在 Android 系統安裝的話，必須先開啟設定，以 Nexus 7 的操作為例，如上圖：

設定 → 安全性 → 不明的來源 → 允許安裝play商店以外的來源提供的應用程式

接著將下載的 apk 檔傳送到行動裝置，例如我使用 Line 傳檔 → 點擊傳送的檔案，出現選項 → 選擇「啟動閱讀軟體」，即可進行安裝。

如果用其他管道儲存在行動裝置 → 可用「ES文檔瀏覽器」找到這個檔案 → 若找不到的話，可用搜尋功能，例如找 "opera" 字串。

之後的安裝過程，很有可能跟我一樣遇上小麻煩，某個「安裝」按鈕怎麼按都沒反應，完全不知道發生了什麼狀況！查了資料才發現是一個想像不到的原因。

請參考這篇「Why can't I install this downloaded APK」，原來是濾藍光 App 惹的禍。如果你也裝了類似的 App，請暫時關閉 "濾藍光" 功能，「安裝」按鈕就按得下去了，然後再恢復 "濾藍光" 即可。

三、Opera Mini


下載網址：https://play.google.com/store/apps/details?id=com.opera.mini.android&hl=zh_TW

Opera Mini 基本上只推薦給 "需要獲得資訊"、"不介意網頁效果" 的使用者。因為現在低階手機已經很少了，不太需要為了節省資源這件事，而犧牲畫面的效果。

使用 Opera Mini 時，如果某個網頁有 "手機版" 頁面(例如部落格平台)，那麼就會自動切到手機版，總之很難看到完整的網頁版效果。

但是 Opera Mini 的精簡、不耗資源、友善介面實在吸引人，國外使用者想盡辦法要用 Opera Mini 來看網頁版效果，為此他們做了這個網站「How to View the Full Version of Sites in Opera Mini」，專門整理各大網站的 "網頁版網址"，讓 Opera Mini 不出現閹割版畫面，例如 FB、Google Calendar、Gmail、Twitter 等等。

然而精簡的 Opera Mini，解析網頁的方式跟別人不一樣，其原理可參考這篇「開網頁會破版、顯示不正確」的說明。就算想辦法弄出了網頁版的網址，排版結果也可能奇奇怪怪。

因此，也許舊手機的使用者，再來安裝這個版本吧～

四、Opera Browser


下載網址：https://play.google.com/store/apps/details?id=com.opera.browser

如果跟我一樣，已經將 Android 系統升級到 5.x、行動裝置的記憶體只有 1G，那麼會推薦使用 Opera Browser。

原本用平版看 RSS 閱讀器、只要連結到 Chrome 開了幾個網頁，要嘛等待回應花上幾分鐘、要嘛只好關機，讓人開始考慮是否買新的平板裝置。

不過自從用了 Opera Browser，開至少五、六個網頁，外加 RSS 閱讀器、Google+、其他 App 同時執行，都還不會出現像 Chrome 讓系統停滯的狀態，因此已經很滿意了。

而用過 Chrome 後，對於書籤、各種記錄能雲端同步已經成為操作的習慣，因此使用 Opera 後最好也申請 Opera Link 帳號，讓書籤及設定能同步，以免將來要重建書籤。

使用上稍微不便的地方在於，Chrome 按下小按鈕時，會自動將該區塊放大，讓我們確認正確的點擊部位；而 Opera 則不會放大該區塊，我們只能手動將螢幕拉大，以正確點擊按鈕，增加了操作的麻煩性，這一點希望 Opera 將來能學學 Chrome。

五、iOS 系統﹍Opera Coast / Mini

2015.3.31 增補：這個章節為補充的內容，因為很少使用 iOS 設備，蘋果行動裝置的 Opera 瀏覽器無法提供太多使用心得。

1. Opera Mini


下載網址：https://itunes.apple.com/us/app/opera-mini-web-browser/id363729560

如同 Android 版的 Opera Mini，這不是真正的瀏覽器，無法看到實際的網頁效果，由 Opera 伺服器讀取網頁資料、進行壓縮整理，再將數據傳送到 Opera Mini 顯示出來。這個版本是針對硬體較差的蘋果行動裝置設計，可節省系統的資源使用。

不過 Opera 對 iOS 版還是有另外下功夫，比 Android 版多了不少功能與技術，例如「Opera Turbo 壓縮模式」、「優化影片播放功能」。

更多的使用心得可參考這篇「Opera Mini for iOS 之順到不可思議的速度」。

2. Opera Coast


下載網址：https://itunes.apple.com/app/coast/id674024845

「這個版本使用 Webkit 引擎」，因此是真的瀏覽器，可看到真實的網頁效果，但 Opera 又把他的造型、操作介面改得不像瀏覽器。

可參考這篇「Opera Coast 強調絕不浪費任何螢幕空間」，他的 UI 介面看不到網址列 / 上一頁 / 下一頁等常見按鈕，可利用各種手勢操作，讓使用者得到極佳的操作體驗。

如果是硬體佳、螢幕較大的蘋果行動裝置，那麼安裝 Coast 會是比較好的選擇。

六、總結

最後簡單做個結論，Android 系統建議使用的 Opera 版本，可依照使用的行動裝置而定：

舊款手機：Opera Mini
Android 4.x 或以下：Opera Mobile Classic
Andoird 5.x 以上：Opera Browser

由於 Opera 的記憶體調配做得很好，不太耗系統資源，手機使用 Opera 來瀏覽網頁後，記憶體不足的窘境就不會是需要擔心的問題了。

更多 Opera 相關文章：

經營部落格或網站，為了尋找、使用合適的圖片，得花上不少時間與心思，畢竟圖片是吸引注意力及增加訪客停留時間的重要因素。過去一向使用 Google 來搜尋圖片，因為這是樣本資料庫最大，且最省時省力的方式。但其實這麼做有風險，因為我們沒有足夠的時間來找出每張圖片、每個網站的使用條款，並仔細研讀。

雖然 WFU 一向把 Credit 歸於原作者(標示出處)，然而萬一某張圖片的條款了註明「不可修改」，那麼 "標示出處" 的作法顯然還是不夠；而若是沒有習慣標示出處的話，很有可能利用 Google 搜尋找到了可修改、再利用的圖片，但沒發現圖片的使用條款註明必須 "標示出處"，將來是有可能成為隱憂的。

最萬無一失的作法，是全面採用 CC0 (放棄著作權)、Public Domain(公眾領域) 的免費圖庫，且最好是高畫質(能吸引目光)，除了商業用途之外，還能對圖片進行編修。本篇整理了許多高畫質、收藏量豐富的 CC0 免費圖庫，可解決網站使用圖片上的問題，並會持續更新。

一、為何需要整理 CC0 圖庫

1. Google 圖片搜尋

雖然近期 Google 搜尋圖片時提供了「標示為允許再利用且可修改」的選項，如下圖紅框：

籃框標示的圖片來自 wikipedia，看起來應該安全？不過我們點入之後會發現如下：

下方紅線標示的小字為「圖片可能受版權保護」，表示我們還需要點進網站，尋找網站、或圖片作者的版權宣告條款，以確認這張圖片能使用到何種地步、或是否需要標示出處。

這代表什麼呢？就算我們選擇了看似最安全的「標示為允許再利用且可修改」，依然無法安心使用圖片、無法縮短處理圖片的時程。結論依然是，建立 CC0 圖庫的口袋名單，才是站長們處理圖片最快速的方法。

2. CC0 及 Public Domain

CC0 與 Public Domain 的定義有些微差異，詳情可參考「公眾領域貢獻宣告」與「公眾領域標章」。不過基本上只要我們使用了 CC0 或 Public Domain 的圖片後，就可以安心的對圖片做這些處置：

商業使用
任意修改
不必標示出處

雖然標示出處在條款上並非必須要件，不過相信把功勞歸於該當之人，長遠來看，對他人或自己都是受益者，足以產生正向的良性循環。這在專業領域算是倫理道德規範，只是不具強制力，需要自我要求就是了。

需要注意的地方為，CC0 雖然原作者放棄了著作相關權利，但不代表可以將著作權佔為己有，不可將圖片下載、或經過編修後，逕自宣稱「我才是圖片的原創者」，或「版權所有請勿盜用」之類的。得了便宜還賣乖，相信這不需太過著墨，普羅大眾也知道是天理不容之事。

3. 圖庫的使用方式

有了圖庫的口袋名單之後，將來要搜尋圖庫時，就不必一個個進入該網站。比較簡單的方法，是利用 Google 搜尋或「自訂搜尋」，使用 site 指令就能搜尋出該網站的圖片，將來 WFU BLOG 也會提供更簡便的搜尋工具。

不過前提是，這個圖庫網站必須願意讓 Google 進行索引。有的圖庫網站必須註冊才能搜尋、或是禁止機器人爬取，那麼這類的網站就無法成為便利的口袋名單了。

以下 WFU 針對各個免費圖庫進行篩選，列出來的網站都是檢視過條款或聲明，至少符合 CC0 的使用方式，並且多數圖片能被 Google 索引。

二、收藏量大的 CC0 高解析圖庫

用 Google 搜尋關鍵字 "CC0" 就能找到很多圖庫網站資料，以下的名單依照圖片被 Google 收錄的數量來排序，同時這些都是水準很高的圖庫：

1. Pixabay

收藏量最大的 CC0 圖庫，被 Google 索引的數量也最多，達 100 萬張以上。

網站介紹可參考「Pixabay 免費相片、向量圖與藝術插圖素材圖庫」

2. Pexels

雖排名第二，但索引數量剩 1/100，約 1 萬。

網站介紹可參考「Pexels 免費高品質圖片」

3. Unsplash

索引數量為 4,480。接下來的索引量皆不到 1 萬，就不一一列出搜尋結果，網站介紹可參考「Unsplash 高解析度免費圖庫素材」。

4. Picjumbo

索引數量為 3,310，網站介紹可參考「Picjumbo 高畫質照片素材」。

5. Finda Photo

索引數量為 3,010。這個網站滿特殊的，可以依照顏色、標籤來搜尋免費使用的照片。但這個網站算是搜尋引擎，並非自己提供圖片，而是收錄其他 CC0 網站的圖片。

6. Splitshire

索引數量為 1,840，圖片主要為自然景觀、戶外場景。

7. Pickupimage

索引數量為 1,740，這個網站的特別之處在於可選中文語系，且設定為中文後，便能以中文來搜尋。不過他並非真的對圖片內容以中文來索引，而是將英文索引內容翻成中文，看似可以用中文搜尋而已。

8. Stokpic

索引數量為 1630，網站介紹可參考「Stokpic 可用於商業用途」

9. Stocksnap

索引數量為 1,460，網站介紹可參考「StockSnap.io 免費圖片素材圖庫」

三、候補 CC0 圖庫

以下列表暫不專門介紹，主要列出 Google 索引數量，將來視情況調整權重。

Littlevisuals：1,260
Lifeofpix：1,240
Publicdomainarchive：1,220
Morguefile：1,220
Jaymantri.com：769
Foodiesfeed：751 → 都是食物...
Streetwill：405
Zerospace：301 → 台灣網站，自行收錄國外 CC0 圖片
Gratisography：254

四、補充

本篇主要作為圖庫搜索引擎工具之用，日後會不定期進行更新調整。

為了方便從網路搜尋，及使用合法、無爭議的免費圖片，製作了一個「CC0 免費圖庫搜尋引擎」，可以一次同時搜尋所有 CC0(放棄著作權) 免費圖庫。

有了這個搜尋引擎，可不必再單獨進入個別圖庫網站，來做個別搜尋的動作，這也代表製作網站使用的圖片，可節省不少流程與時間。

使用說明及介紹請見後述內容，想要立即體驗這個搜尋引擎，請按下面這個按鈕前往。如常常需要搜尋可商業用途、可修改、不用標示出處的免費 CC0 圖片，也建議將這個連結拖曳到書籤列(或加入書籤)：

CC0 免費圖庫搜尋引擎

一、使用說明

1. 搜尋引擎

這個搜尋引擎使用「Google 自訂搜尋 (CSE)」製作：

圖片搜尋結果最多顯示 200 個
一頁最多 20 張圖
最多有 10 個分頁

2. 使用方式

搜尋框上方的選單，預設為搜尋「所有圖庫」。
Pixabay 這個網站的圖藏量太大，因此獨立出一個選單。
如果覺得 200 個搜尋結果不敷使用，可切換到不同選單，選擇不同的圖庫，可獲得更多、不同的圖片搜尋結果。

3. 設計特點

這個工具的設計使用 Ajax 動態載入，以下的操作都不會重整頁面，因此執行速度很快：

切換圖庫選單時自動搜尋前一個字串
按下 10 個跳頁數字按鈕
重新搜尋新的字串

二、收錄的免費圖庫網站

除了「Pixabay」獨立出一個選單之外，「主要高畫質」及「備用高畫質」選單所使用的圖庫，是有可能變動的，詳細的圖庫網站列表、及介紹說明，請參考「可商業用途及修改的高畫質免費 CC0 圖庫整理」的大標題：

二、收藏量大的 CC0 高解析圖庫
三、候補 CC0 圖庫

收錄的圖庫網站依據，主要按照被 Google 收錄的圖片張數，如果有不錯的圖庫網站出現，除了會更新該篇文章列表，也會加入這個搜尋引擎工具之中。

如果讀者發現值得推薦的 CC0 圖庫，想要加入這個搜尋引擎、來讓圖片搜尋結果更豐富，也歡迎留言告知，WFU 會不斷進行更新。

三、使用意見

關於這個圖片搜尋引擎工具，使用上有任何問題、意見，或是認為可加強某些功能，或有其他需求，歡迎留言提出。

免費圖庫相關文章：

最近剛好有幾位讀者都詢問到 FB 分享文章時，會遇上的各種狀況，例如標題、摘要敘述無法正常顯示，或是想要自訂縮圖等等。

這些問題牽涉的層面不太簡單，需要瞭解的知識不少，例如 FB 自己制訂的 Open Graph 標記規範。不過網路可以找到的解答文章倒是不少，因此這些任務可以說是有點困難又不太困難。

而特地再寫一篇文章也是有些好處，能將所有常見問題統整在同一篇，查閱上比較方便，以下採用問答的方式來呈現。

Q1：如何讓標題及縮圖正常顯示？

1. 啟動 Open Graph protocol

FB 制訂了一套 Open Graph protocol，讓站長們將 Open Graph 標記語言 (og) 放入網站的範本之中，那麼當分享文章到 FB 時，就可以根據這些 og 標記的內容，來讀取對應的標題、摘要、縮圖等等資訊。

要怎麼啟動 Open Graph 標記語言、讓 og 這個標記生效呢？根據最新的「官方範例」，我們可看到這一行：

<html prefix='og: http://ogp.me/ns#'>
將上圖綠字的部分，加入範本中 html 這個標籤之內即可。不過這個語法比較新，屬於 HTML5 的語法，目前比較常見的是舊版語法，例如下面的綠字部分：

<html xmlns:og='http://ogp.me/ns#'>
但如果你的 html 標籤已經有舊版語法，那麼不一定要改成新版語法。而 html 標籤若有其他屬性參數，請保留不動即可。

2. 設定 Meta 標籤

接下來就可以將 og 標記放入各個 Meta 標籤之中，並置放於範本中 <head> ~ </head> 之間的位置。根據「Open Graph protocol 官方文件」，基本的設定有下面四項，：

<meta property="og:title" content="網頁標題"></meta>
<meta property="og:type" content="網站類型"></meta>
<meta property="og:url" content="網址"></meta>
<meta property="og:image" content="縮圖網址"></meta>

以上綠字的部分為 og 標記，藍字的部分是需要填入的內容，也就是分享到 FB 時，會顯示出來的資訊。如果是部落格平台，藍字的部分通常有語法可以自動產生，不必每篇文章自行填寫，否則就累翻了！

但不能自動產生的有 og:type，如果是部落格平台，"網站類型" 可填入 "blog"。

除了以上的基本項目，這兩個也是常用的項目：

<meta property="og:description" content="網頁敘述"></meta>
<meta property="og:site_name" content="網站名稱"></meta>

如果對其他額外項目有興趣的話，請再參考官方文件進行設定。

3. Blogger 語法

瞭解原理之後，以上藍字敘述的部分，請根據自己的部落格平台來設定。而 Blogger 平台的話，這篇「讓 Facebook、Google+ 轉貼圖文正確顯示首頁與網頁的名稱、圖片和摘要」說明得很詳細，可直接按安裝步驟來做即可。

這篇文章的優點是，額外說明了網站首頁的設定，讓首頁被分享時，能有較佳的分享資訊呈現。

Q2：如何讓摘要敘述顯示出來？

有的 Blogger 讀者按照以上設定進行後，可能會發現，明明 Meta 標籤的設定內容沒什麼錯誤，但分享到 FB 的文章卻無法出現摘要敘述。

這個項目的原理是，Blogger 為了加強單篇文章的 SEO 效果，讓每篇文章都能各自設定摘要敘述，但需要在後台開啟幾個選項。請到後台 → 設定 → 搜尋偏好設定 → 中繼標記 → 按下「編輯」：

如上圖，檢查「要啟用搜尋說明嗎？」要勾選 "是"。儲存之後，在後台編輯文章時，右半邊的「文章設定」就會出現「搜尋說明」這個選項。

詳細說明請參考「Blogger 文章設定選項」→「六、搜尋說明」，想要在 FB 分享文章時能出現摘要敘述，得確定該篇 Blogger 文章有填寫「搜尋說明」的內容才行！

Q3：我的摘要敘述好像被切斷了？

正常來說，為了配合版面的比例，"標題 + 摘要敘述" FB 最多只會顯示三行，就像下面這樣：

超過三行的部分，就會被截斷，版面才不會太難看。但有些例子看起來特別怪異，也看不太出原因，就像下面這篇文章：

摘要怎麼會只有一個英文字呢，明明就寫了好幾行啊！FB 是不是在亂搞，這樣的 PO 文貼出去能看嗎？

這件事看來有些蹊蹺，於是拿了多篇文章進行交叉比對測試，終於找出原因所在，以下是分析結果：

FB 開發環境為英文，並未針對中文進行優化。
依照每個英文單字用空格分開的特性，FB 偵測 "標題 + 摘要" 的長度滿三行後，自動抓取最後一個空格之前的英文單字，並顯示到該單字為止。
中文因為不需使用空格，因此直接抓取滿三行前的最後一個文字。
但中英夾雜時，判斷依據仍以英文規則優先，所以滿三行之前的最後一個英文單字後面若有空格，之後的內容會被截斷。

因此兇手抓出來了，就是 "空格符號"。為了驗證分析結果，以下為實測畫面，特地將英文單字後的空格去除：

將 "Google" 這個單字後面的空格刪去後，摘要敘述就正常顯示出來了！

Q4：如何讓縮圖顯示指定的那一個？

讀者問到「若一篇文章中有好幾張圖，該如何指定某張圖成為FB的縮圖？」，這個問題可以分幾個面向來討論：

1. 從 FB 選擇

有兩種情況可以從 FB 分享畫面來選擇圖片：

Meta 標籤設定了多個 og:image 標記時，FB 會讀取到多張圖
沒有正確設定 og 標記時，FB 可能從別種標記語言來判定，自行抓取多張圖

結果就像上圖一般，紅框處會出現箭頭，約可選擇三張圖片來成為該篇 PO 文的縮圖。但沒有正確設定 og 標記的話，會抓到哪些圖非我們能控制，因此不建議採用這個方式，將無法自訂指定的縮圖。

2. 文章中的第一張圖

如果有按照「Q1：如何讓標題及縮圖正常顯示？」來設定 og 標記，那麼正常情況下 og:image 標記只會抓到一張圖 → 文章中的第一張圖。

所以要控制 "某張圖成為FB的縮圖" 這件事就簡單了，把指定的圖片放在文章中最前面的位置即可。

3. 使用隱形圖片

但是有某些情境，想當縮圖的圖片，不一定適合擺在最前面的位置，因為版面或整體感可能變得突兀。那麼在這類的情況下，可以使用隱形圖片的技巧，將指定的圖片隱藏，並放在文章中最前面的位置即可，詳細的操作方法請參考這篇：

選擇喜歡的圖片當作 Blogger 文章縮圖

Q5：怎麼顯示大尺寸縮圖？

借用前面這張圖當範例，當圖片比例不對、大小不對時，就無法顯示大尺寸縮圖：

該用多大的圖片尺寸才能顯示最大的寬度，FB 的規則很多，如果要簡單說的話，根據這篇「Facebook Photos Size Guide / 2015」，至少得使用 484(寬) x 252(高)px的尺寸。

如果覺得全英文看起來吃力，可以另外參考這篇「Facebook 放大分享網址的預覽圖片」。

Q6：如何顯示作者資訊？

這個問題倒是從來沒注意過，原來 FB 分享貼文也是會顯示作者的，如下圖最下方的「由 Wayne Fu 上傳」：

要讓 FB 顯示作者資訊的話，簡單來說每篇文章的頁面上，必須提供作者資訊的相關 HTML 描述，才能讓 FB 讀取到。

1. 非 Blogger 平台

可參考這份「Google 個人資料設定」官方文件，先建立一份 G+ 帳號的個人資料，並在自己網站的每個頁面加入相關的 HTML 敘述。

2. Blogger 平台

可參考這篇「原創性作者頭像」的流程：

每篇文章顯示「張貼者」資訊
安裝「簡介」小工具

不必進行設定頭像的部分，因為去年「Google 搜尋結果不再顯示作者頭像」。雖然頭像不再有作用，但 G+ 帳號及作者資訊仍有不少隱藏性的好處，可參考這篇「是否需要移除 G+ 作者連結？」。

Q7：更改後 FB 還是顯示原來的資訊？

這是本篇重要性屬一屬二的問題，大部分相關文章也會提到。由於分享到 FB 的每篇文章，在 FB 伺服器都會有快取資料，這可以減少機器人重複爬取的工作、降低伺服器負擔，但也會讓文章修改後的資訊無法及時顯示出來。

因此當各項相關資訊修改後，若想立即看到呈現在 FB 的結果，務必進入這個 FB 官方偵錯網址：

https://developers.facebook.com/tools/debug/

輸入網址後，按下「Fetch new scrape information」按鈕，就可以強制 FB 重新更新快取資料了。

更多 Facebook 相關文章：

要加快網頁載入速度，最有感的兩個方向就是從「圖片」以及「Javascript」下手，詳細的說明可參考「優化網站效能該注意哪些事? (1)最關鍵的考量因素」。

行動版網頁由於螢幕比較小，如果跟網頁版一樣載入相同尺寸的圖片，那麼讀取一定很花時間。一般使用者能做的，最多就是想辦法提升 jpg 圖片的壓縮比例，盡量加快行動裝置上圖片的載入速度。

前陣子在打理 Blogger 行動版範本時，無意間發現了一個密技，竟然可以讓行動版的圖片，自動改用小尺寸來呈現。很有趣的是，這麼強大的功能，沒有任何官方文件提到相關內容，算是 Blogger 的隱藏功能。也因為有了這個功能，WFU 認為 Blogger 平台的行動版，算是所有部落格平台之中最棒的，沒有之一！以下就來看看怎麼啟動這個功能。

一、基本要件

1. PICASA 圖床

首先你使用的圖片，必須是從 Blogger 後台上傳，或是 PICASA / G+ 上傳的圖片，這些圖片的圖床就是 PICASA，圖片網址大致長得像這樣：

http://3.bp.blogspot.com/-7XB9wXTOy7I/VSNU2gc83jI/AAAAAAAALcw/gSIN8w63yXg/s640/cc0-image-search-engine.jpg
其中紅字的參數就是 PICASA 強大的地方，代表圖片尺寸，改成任何數字就能「讓同一張圖片，以任何尺寸呈現」，詳細操作方法可參考「Blogger圖示製作技巧」→「一、PICASA 圖片規則」

請特別記住 PICASA 網址中「"s" + 數字」這樣的參數概念，本文的主要內容就是圍繞這個概念打轉，如果這點不瞭解的話，後續會不太容易明白。

如果你使用了非 PICASA 的圖床，例如 Flickr，那麼 Blogger 就無法自動根據參數來改變圖片尺寸了。

2. 正常情況

來看一下 Blogger 行動版一般情況下的畫面，以這篇「高畫質免費圖庫搜尋引擎(CC0)」的行動版網址來測試：

http://www.wfublog.com/2015/04/cc0-high-quality-photo-search-engine.html?m=1

使用「Chrome 開發人員工具」來模擬行動裝置執行效果，如下圖：

模擬的裝置選擇了 iPhone4，螢幕尺寸為 320 x 480，我們來檢視圖中紅框這張圖片的資訊：

從紅色底線可看到，Blogger 行動版自動用 CSS 為圖片設定了符合寬度的尺寸 232px，但從圖片網址可看到紅框部分的 "s640" 參數，代表這張圖片的實際尺寸為 640px 寬，CSS 設定只能改變圖片顯示的大小，無法阻止網頁下載大圖，行動裝置還是得傳輸 640px 這麼大張的圖片。

順帶一提，從 Blogger 後台上傳圖片時，若尺寸選擇「原始圖片」，網址參數就會是 "s1600"；如果尺寸選擇了「特大」，那麼就會出現跟這裡一樣的 "s640"。

二、改變行動版圖片尺寸的密技

1. 操作方式

過去我其實常常抱怨 Blogger 文章編輯器的一個功能：「改變圖片尺寸」。為什麼呢？因為我覺得這功能很雞肋，要使用這個功能的話，請看以下流程：

A. 切換到「撰寫」模式
B. 點擊圖片，讓下方的選單出現
C. 調整選單的細項，例如將圖片尺寸改為「特大」(640px)，或是使用「另開視窗」的語法。

這個流程的麻煩之處在於，無法批次處理所有圖片，而且系統也不會記憶你的選項，每張圖片都要重複一樣的流程，連個最簡單的「另開視窗」語法都得手動一個個加上。久而久之，麻煩、不友善的設計及操作介面，是不會有人想使用的。

2. 暗藏玄機

奇妙的事情發生了，我無意中發現，使用了這個沒人想用的「改變圖片尺寸」功能後，進入行動版頁面後，竟然出現這個情形，一樣進入「高畫質免費圖庫搜尋引擎(CC0)」的行動版網址：

請注意紅框的數字，從原本的 "s640" 變成了 "s280"，這代表什麼呢？這張圖片現在的實際尺寸是 280px 寬，面積成為原來尺寸的 1/4 不到，這可是大大地縮短網頁載入的時間啊！

由於我模擬的行動裝置螢幕是 320px 寬，Blogger 自動將實際圖片尺寸調整為 280px 寬，且每張圖片都是固定這個寬度。如果原始圖片很大，而且文章中的圖片又多的話，節省的傳輸量真是無法想像。

如果是圖片為主的網站，那麼 Blogger 行動版使用了這個密技後，給予訪客的印象、以及使用行動裝置來瀏覽網站的意願，絕對是大大的提升！

三、改變行動版圖片尺寸的關鍵

1. HTML 模式的變更

到底為什麼使用了「改片圖片尺寸」這個功能後，就能改變行動版圖片的尺寸，原理照舊要來研究一下。在完成「改片圖片尺寸」這個動作後，特地切換到「HTML」模式，來看看到底發生了什麼事：

<img src="http://3.bp.blogspot.com/-7XB9wXTOy7I/VSNU2gc83jI/AAAAAAAALcw/gSIN8w63yXg/s640/cc0-image-search-engine.jpg" height="426" width="640"/>

改變的地方用顏色標示出來，只要不是選擇「原始尺寸」，選擇了其他任何一個尺寸都會有這些效果：

綠字 s640代表選擇了 "特大" 尺寸，圖片將成為 640px 寬
紅字代表 Blogger 自動運算出這張圖片的寬、高，並自動設定圖片顯示在螢幕上的寬與高數值。

2. 改變行動版圖片尺寸的關鍵

紅字的參數內容為本文關鍵，有了這些參數，Blogger 在運算行動版圖片時，就會自動調整尺寸。
若試著將紅字內容刪除，行動版圖片就會載入原本尺寸。
經交叉測試後，不一定要設定高度，只需要單獨設定寬度，例如紅字改為 width="640"，刪掉 height="426" 的部分，行動版圖片一樣會自動調整為小尺寸。

至此這件事 Blogger 行動版運作的原理可以確定如下：

使用 PICASA 圖床
為每張圖片設定寬度

只要完成以上兩個要件，Blogger 行動版的圖片，就會自動以小尺寸來載入。

本篇文章所有圖片，都是利用以上要領來處理，讀者可以測試分別使用網頁版、以及行動版網址(網址後綴加上 "?m=1" 即可)來檢視，看看圖片尺寸的差異。

四、比較有效率的改尺寸方式

回到原點，「改變圖片尺寸」這功能雖然不再雞肋，但操作麻煩這件事依然沒有解決啊！相信沒人有耐心每張圖片一個個點擊來修改選項，究竟是否有無批次修改圖片尺寸的方法呢？

其實只要瞭解原理，就能有對應的方法產生。WFU 會另外寫一個線上轉換圖片語法的產生器，將整篇文章內容貼上後，就能立即把所有的圖片語法一次轉好，敬請稍待幾天，等這個線上轉換器的網站完成後便會發佈。

Blogger 行動版相關文章：

在網站放 Adsense 廣告後，很怕自己不小心點到，因為網頁上有不少動態載入的區塊時，有時你明明點的是 A 位置，但由於時間差，突然會出現 B 區塊而誤點。萬一點到自己網站的廣告，就得提心吊膽是否會被停權。

前幾個月偶爾會出現，進入 WFU BLOG 後，忘了自己下意識做過哪些動作，突然間跳出不相干的網頁，便會驚覺是不是誤點了 Adsense 廣告！那陣子就得常常查詢 Adsense 官網，是否有誤點通知的訊息。

直到最近幾天，終於搞清楚了這件事，原來我並沒有誤點，而是 Adsense 某些廣告商搞的鬼，會讓網頁自動轉址。花了一番手腳才搞定這件事，將整個經過記錄一下，無論有沒有遇上這情形的讀者，其實都應該參考一下如何處理，因為每個網站都可能出現這些廣告。

一、Adsense 自動轉址的經過

1. 事情徵兆

根據「我的 Histats 操作心得,」，每天大概會瞄一下相關數據，以往「訪客每次瀏覽頁面數」(Page views per visit)大致落在 1.6 ~ 2 之間，而最近連續近一個禮拜，不尋常地徘徊在 1.3x ~ 1.5，雖然覺得事有蹊蹺，但終究無法知道原因。

2. 網頁被轉址

由於 WFU BLOG 就是我的個人筆記資料庫，因此會常常上來查閱資訊。最近幾天都會出現同樣的現象 → 開啟網頁後，網址有一定的機率會被轉到這裡：

http://www.wfublog.com/eyeblaster/addineyev2.html

狀況大致就像上圖這樣。試想，訪客如果常常進不了文章頁面，自然會離開網站，這也難怪過去一個禮拜，「訪客每次瀏覽頁面數」會下降不少。

通常網頁會被自動轉址，八成是範本被植入了木馬，就像這個「Blogger 中文社群案例」。不過本站的工具都是 WFU 寫的，沒道理自己拿石頭砸腳啊？

3. 查緝兇手

因此兇手只剩 Blogger 本身，或 Adsense、G+、FB 這些知名的第三方外掛。查詢了關鍵字 "eyeblaster"、"addineyev2" 後發現，原來是 Adsense 廣告商的問題。

另外也查詢了 "adsense"、"redirect" 這些關鍵字，發現原來國外受害者不少，例如這個Adsense 官方論壇討論串「Google ads redirect my site to another site」有不少受害者，以及這篇「Google AdSense Ad Hijacking Hack Resolved」說明了 Adsense 曾經修復一個惡意廣告商綁架網頁的問題。

二、關閉特定 Adsense 廣告

1. 肇事原因

知道兇手是誰後，來參考一下國外站長怎麼解決的。這篇「404 Error for /eyeblaster/addineyev2.html」詳細說明了原因及解法，內容不短，簡單說明一下：

某些廣告商使用了特定的 Flash 內容(EyeBlaster)，他會去讀取特定路徑 html 檔，網址為：

http://網站網址/eyeblaster/addineyev2.html

為了不產生錯誤，我們的網站必須自行在根目錄建立 "eyeblaster" 這個資料夾，並建立 "addineyev2.html" 這個檔案(檔案內容請參考原文)。

完成這些步驟後，Flash 就能連結到正確路徑。如果找不到該檔，當前的網址就會自動跳轉到 "addineyev2.html" 的這個不存在網址，而造成 404 錯誤。

事實上，一方面 Blogger 平台無法自行建立資料夾與檔案，一方面基於安全考量，沒有人會放心在自己網站建立這樣的內容，來連結外部檔案。

2. 關閉特定廣告商

說實在，這些廣告商的這種放置廣告方式，不但沒必要、而且是在增加資安風險。為了避免訪客離開我們網站，關閉這些亂搞的廣告商是必須的。

原文作者尋跡找出了目前有問題的廣告商 "Mediamind"，請按以下步驟進行：

登入 Google 帳號，進入「Adsense 官網」

如上圖，「允許/屏蔽廣告」→「廣告聯盟」→ 輸入紅線的 "mediamind" 後，按「搜尋」，會列出 9 筆資料。

如上圖，將這 9 家全部屏蔽，以後這些廣告商就不會出現在我們網站了。

3. 仍有隱憂

雖然原作者找出了這個解決方法，不過仍有兩個缺點：

Adsense 的設定要一段時間後才會生效(例如一、兩天後)
可能不止這 9 家，還有其他廣告商也會使用相同的語法。

因此，這算是治標的方法，要真正解決這個問題，得繼續跟這些會自動轉址的語法奮戰，徹底讓網頁不被自動轉址，類似「防止網站被 7headlines 用 IFRAME 框架」的事件一樣。

三、安裝一勞永逸的語法

為了找出不被 Adsense 轉址的方法，過程很長、且內容太技術性，以下直接貼語法就好。

在修改範本之前，如果第一次安裝本站工具的讀者，建議先閱讀「備份範本的訣竅」系列文章。

請到後台「範本」→「編輯 HTML」，游標點進範本區塊，按 Ctrl-F 搜尋 <body ...>這一行，找到後在下一行，插入以下程式碼：

請參照以上程式碼行號：

B：綠字的部分可參考「如何使用jQuery版本」，檢查範本是否已安裝過 jquery，以免重複安裝。

F、J：這兩行的紅色字串，代表監控 Adsense 區塊，防止這些區塊的 Iframe 竄改網址。如果需要監控別的 Iframe 區塊，可自行修改紅色字串。

四、小結

如果沒有像 WFU 一樣常常查詢自己網頁的站長，或許不容易發現本文這件事。而為了減少訪客的跳離率，如果網站有放 Adsense 的話，最好還是按本文的步驟來設定、及安裝程式碼，防患於未然。

Google Adsense 相關文章：

從這篇「加快 Blogger 行動版圖片載入速度」我們瞭解到，Blogger 有辦法讓行動版的圖片改用小尺寸，進而讓網頁載入速度非常有感地提升，只要符合這兩個要件：

1. 使用 PICASA 圖床
2. 為每張圖片設定寬度

手動設定圖片寬度的方法，請參考該篇文章的操作說明，但這個流程是不方便的，無法批次處理。WFU 製作這個「Blogger 圖片尺寸轉換器」後，可縮短處理的時間，將文章中所有圖片語法一次轉換。

使用說明及介紹請見後述內容，下面這個按鈕可前往轉換器頁面，也建議將這個連結拖曳到書籤列(或加入書籤)：

Blogger 圖片尺寸轉換器

一、使用說明

如果一切使用預設值的話，那麼這個轉換器的操作非常簡單且直覺。首先進入 Blogger 後台 → 編輯文章 → 切換到「HTML」模式 → 複製全部內容

接著將全部內容貼入左邊「貼上 html 碼」這個區塊，如上圖，右邊的「轉換結果」區塊會自動出現轉換結果，並自動全部選取。此時只要按下 Ctrl + C複製，再貼回文章中存檔即可。

從上圖紅線的部分可看到，使用預設選項時，會自動產生：

另開視窗」的語法 target="_blank"
改變圖片實際寬度為 640px
設定圖片 CSS 為寬度 640px

文章中無論有多少張圖片，都會一次處理完畢。

這個轉換工具的優點是，你設定過的選項、填入的資料都會自動記憶，因此將來只要使用同一個瀏覽器，都不必再重複設定。

如果需要調整選項設定的話，請參考下圖，並繼續往下看。

二、圖片寬度(px)

每個人的文章區塊寬度設定都不一樣，請根據自己的版面來選擇適當的寬度。預設的三個尺寸是根據 Blogger 文章編輯器中的選項，如果你勾選了 400，代表所有轉換後的圖片，都會以 400px 寬來呈現。

一般兩欄式的部落格，使用預設值 640px 就差不多了；三欄式的部落格，文章區塊比較小，或許可選擇 400px。但如果你的部落格版面設定非常寬，例如使用全版面、沒有側邊欄的話，那麼就需要改用自訂寬度，例如填入 1000 或更大的數字了。

三、A 標籤(超連結)

1. A 標籤

第一個選項「有 A 標籤的圖片才處理」，適用於你有某些圖片不想設定寬度時，就能派上用場了。

例如有的網站會使用表情圖案、或是某些文章需要小 logo 點綴，在這種情況下，如果把這些小圖示設定了 640px 寬度，那會成為一場大災難！

我們從 Blogger 後台上傳的圖片，外面會自動包覆 A 標籤。而前面提到的小圖示，通常使用於顯示，不會有 A 標籤(不能點擊)。因此勾選了這個選項「有 A 標籤的圖片才處理」，就不會去動到這些小圖示了。

2. 另開視窗

Blogger 後台上傳的圖片，A 標籤預設不會另開視窗，這是很糟糕的設計，對於訪客來說是很不友善的閱讀體驗，按下圖片看完整大小時，就跳離了原本頁面。為了節省篇幅，這部分的說明請參考「超連結 A 標籤你不知道的操作技巧」→「一、另開視窗的重要性」。

有勾選這個選項後，轉換後的圖片語法就能另開視窗了。

四、其他項目

1. 刪除官方無用參數

Blogger 後台上傳圖片後，產生的語法我一直都很有意見，裡面包含的一些參數其實沒什麼作用，等於網頁載入時得傳輸無用的字串，例如這些：

imageanchor="1"
border="0"

勾選這個選項後，以上這兩個字串都會被清除掉。

2. 自訂 Class

可參考這篇「將文章的圖片全部套用立體陰影效果」，這個選項的作用在於，如果你想為文章中的圖片使用一些 CSS 特效，例如加邊框、陰影等等，可將這些 CSS 參數設定放在某個 Class，那麼勾選這個選項、並填入 Class 名稱後，所有圖片 img 標籤就會自動加上這個 Class 名稱，來套用這個 CSS 效果。

五、舊文章的處置

以後 Blogger 的新文章，在發佈之前只要使用這個「Blogger 圖片語法轉換器」，就能自動幫圖片加上本文以上這些效果，且讓行動版的圖片能自動以小尺寸載入。

如果你的部落格文章數不多，例如只有數十篇，那麼或許勤勞一點，使用這個轉換器，一篇篇複製貼上，還不會花太多時間處理。

但如果舊文章有數百、上千篇，那麼這就是個大工程了！在行動裝置瀏覽量每年都大幅提升的情況下，如果你想改善行動裝置的載入速度及閱讀體驗，使用這個轉換器將不太符合效率。

Blogger 要能批次修改數百篇舊文章內容，不是做不到，但並非光寫程式就能處理，還需要向官方申請使用 Blogger API 的資格，因為修改文章內容需要開通作者權限。如果你有大量 Blogger 舊文章需要批次修改內容，例如類似這個圖片語法轉換的話，請再另外與 WFU 聯繫，會分別以個案處理。

更多 Blogger 工具：

原本 WFU BLOG 側邊欄有個「Wyboard 留言版」，因為比較花俏、耗資源，所以用「分頁功能」隱藏起來，當讀者需要留言、點擊分頁時才動態載入。

後來想想，隱藏在分頁的功能，八成讀者都不太會發現，留言版這個算是滿重要的功能等於形同虛設。於是動動腦筋，開始尋找有沒有不耗資源的簡易型留言版。

最後發現了 Blogger 官方留言版，可以把它搬到側邊欄來使用，似乎就成了這個計畫的最佳選擇，以下就來看看如何安裝。

一、各種即時留言版比較

簡單說明一下幾種可以放在側邊欄、作為即時留言版的工具：

1. 聯絡表單

這個官方工具的操作及使用情境，可參考「Blogger 私密留言的三種替代方案」→「三、聯絡表單」。放在側邊欄當留言版算是非常實用的工具，不過只能當私密留言(email)使用，無法在網站保存留言記錄。

2. Wyboard 留言版

最新的版本可以「使用表情符號」，功能類似 Cbox，不過限制比較少，不會被機器人洗版。

功能比較多的留言版可以吸引訪客目光，適合性質比較活潑的網站，需要使用多一點的系統資源。

3. Blogger 留言框

會使用官方留言框的話，大概是純功能性考量。跟「聯絡表單」一樣，都不太耗系統資源；不過比起「聯絡表單」，官方留言框至少能保存訪客的留言內容。

二、安裝程式碼

1. 請到後台「範本」→「編輯 HTML」，游標點進範本區塊，按 Ctrl-F 搜尋 </head>這個字串，找到後在此字串的前一行，插入以下程式碼：

<script src='//ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js'></script>

可參考「如何使用jQuery版本」，檢查範本是否已安裝過 jquery，以免重複安裝。

2. 請到後台 → 版面配置 → 新增小工具 → 選擇「HTML/JavaScript」→ 填入標題、以及以下程式碼：

以下參數修改請參照以上程式碼行號：

E：紅色網址請改為自己要當作留言板的那篇文章網址

F：留言板會依據版面配置而自適應高度，若覺得留言板部分內容沒有顯示出來，請調整藍色參數的數值，增加顯示的面積。

安裝完的效果，可參考本站右邊側邊欄的區塊。

三、使用說明

1. 原理

這個留言板的原理為，抓取某篇文章的留言板，讓這個留言板能出現在每個頁面的側邊欄，而成為即時留言板。

因此就像本站的「留言板」，請新開一篇文章後，複製這篇文章的網址，貼入程式碼 E 行，這個小工具就能運作。

2. 運作流程

在這個小工具留言，其實就等於在充當留言板的那篇文章留言。當訪客留完言，畫面會自動跳轉到該篇文章、並前往最後一則留言的錨點位置，讓訪客看到剛剛自己的留言內容。

3. 設計構想

這個設計的好處是，當訪客想留言時，如果在不相干的文章留言很突兀。但對網站動線不熟的訪客，往往找不到留言板的連結，甚至很多網站根本沒設置專門用於留言的頁面，那更是找不到留言的地方。

使用這個工具後，留言框很大、很明顯，放在側邊欄顯目位置，訪客要找留言板就很容易了。

4. 搭配最新回應

就像「Wyboard 留言版」，如果留言板上方有最近幾則留言，這樣的留言板會比較有吸引力一些，想留言的訪客也會有興趣，其他人都在說些什麼。

因此這個官方留言板小工具，也許可以搭配「Blogger 最新回應＋留言者頭像＋文章標題」，在留言板的上方擺放最新回應程式碼，那麼就像是一個完整的留言工具了。

更多留言相關文章：

Blogger 的行動版網頁，呈現方式可以有三種選擇：

1. 自適應網頁 (RWD)
2. 官方行動版
3. 自訂行動版

該使用哪一種，可根據你的網站屬性，參考「Blogger 應該選擇自適應範本(RWD), 還是行動版範本?」→「四、你適合哪一種選項？」來抉擇。

最近 WFU BLOG 完成了「自訂行動版」的大工程，不過為何排除了 "官方行動版" 與 "RWD" 呢？考量的因素大致有這些：

RWD 範本內容比較肥大，會使行動裝置載入時間過久，帶來較差的使用者體驗。
原本一直使用的官方行動版範本，版面簡潔、使用者體驗佳、不需管理成本。可惜版面效果跟網頁版不一致，不像同一個網站。
如果網站屬性為純粹的內容分享網站，那麼使用 Blogger 官方行動版的影響不大。不過若是經營個人品牌、形象網站，那麼使用 Blogger 自訂行動版，可讓版面風格一致，對品牌有加分的效果。
使用自訂行動版後，可以自行修改許多官方行動版做不到的事，優點算是不少，後面的實作內容會詳述。

如果你也決定要改造行動版的頁面，可先閱讀「Blogger 行動版範本修改技巧」有個初步概念，最好也具備基本的 HTML / CSS / Javascript 概念，接下來可參考本文我的實作過程，相信會有所助益。

如果自行修改範本有困難，或自訂行動版這件事想節省時間、由本站代為處理，可再與我聯繫。

一、自訂行動版的目標

WFU 自訂行動版想達到的目的有兩個：版面風格一致、提升行動裝置的網頁載入速度。

1. 版面

行動版與網頁版的版面要一致，可以說很容易，也可以說是很麻煩，聽起來似乎很矛盾？

容易的部分：

只要在後台將行動版範本設為 "自訂" 後，就算什麼事也沒做，行動版的頁面就自動成為網頁版了，那麼版面的所有配色、圖案全部都相同，自然可以說是很容易了。

麻煩的部分：

行動版的頁面寬度最小為 320px，而網頁版可能是寬 1024px 以上，各個區塊勢必得進行 CSS 的調整，需要有 CSS 的概念。
行動版與網頁版的文章區塊，在範本中是不同的內容，需要有 HTML/CSS/JS 的概念，才能自行調整。

如果熟悉範本修改的話，有兩種方式進行：

利用 Blogger 判斷式，設定行動版的 CSS 版面
區塊寬度不使用固定值(例如像素 px)，改用百分比設定，達到自動調整的目的

2. 速度

官方行動版範本速度快的主因為，去除了所有側邊欄、及大部分的額外功能。其實行動版就是需要這樣的設計，手機的螢幕面積小，塞太多外掛、小按鈕也看不清楚或不好按，且行動裝置使用者主要的目的就是查詢資料，若頁面充斥太多額外資訊也沒時間或心情去看。

因此我的自訂行動版以仿效官方行動版為主，去除網頁版所有側邊欄、及不必要的 js 外掛(例如瀏覽數、線上人數等等)，只增加一些必要的額外資訊、分享按鈕等等，以減少行動版範本的載入時間。

二、自訂行動版的優點

官方行動版是綁死的，無法做任何版面調整、也無法裝任何的外掛，因此自訂行動版可以做到一些官方行動版做不到的事，以下是我增加的一些功能，也可算是自訂行動版的優點：

1. Adsense 廣告

官方行動版的 Adsense 廣告，位置及尺寸都是綁死的，不一定是最好的配置。使用自訂行動版後，可以隨心所欲使用大尺寸、放在任何想要的位置，更能增加收益。

2. 社交分享按鈕

官方行動版的預設分享按鈕，說真的實在遜，數量又少。可以自訂後，當然是所有想安裝的分享按鈕全部放上去囉！

3. Histats 計數器

官方行動版無法安裝任何外掛，自然「Histats 計數器」也就無法統計行動版的流量。現在可以自訂後，Histats 數據就比較真實了。

4. 提供額外資訊

在文章結束處放「系列文功能」、「相關文章」這類的資訊可以增加訪客停留在我們網站的機會，使用自訂行動版，就可在文章結束處放各種額外的資訊，提供給訪客參考。

三、標頭區塊

在開始之前，確定你已經詳讀了「備份範本的訣竅」系列文章，並且有 HTML/CSS 的基礎。

以下開始實作的內容，網頁區塊從由上到下來敘述。

上圖為原本的網頁版標頭，寬度約 980px，放了一些導覽用的按鈕。但這樣的寬度及按鈕數量，不好移植到行動版。

於是行動版將按鈕移除，而 Logo、網站標題及敘述，改為置中顯示。

修改範本的要訣主要有兩點，而修改其他區塊同樣可參考：

參考「Blogger 範本﹍(2) 標頭、導覽列、側邊欄、頁尾區塊的程式碼」、「Blogger 範本﹍(3) 文章及留言區塊的程式碼」來找到範本中對應區塊的程式碼。
參考「Blogger 行動版範本修改技巧」，使用判斷式來增加行動版的 HTML / CSS / JS 程式碼。

四、導覽列區塊

如果沒有使用「下拉選單」的話，那麼可以跳過這個章節，因為沒有下拉選單的導覽列，行動版是能正常運作的。如果使用了下拉選單，會導致行動版的導覽列項目，按下去沒有作用，那麼就必須為行動版另外做一個導覽列。

簡單說明一下原理：

假設網頁版的導覽列為 A，另外做一個導覽列 B。
將 A 區塊在範本中的參數設定為 mobile='no'，將 B 區塊在範本中的參數設定為 mobile='yes' → 代表 A 只會在網頁版顯示，B 在兩個版本都會顯示。
B 必須只在行動版顯示，因此利用判斷式，讓 B 在網頁版隱藏 (display: none)
然後 B 的導覽列項目另外設定，專供行動版使用即可。

以上流程光看敘述也許不是很明瞭，詳細實作方法請參考這兩篇文章：

修正導覽列下拉選單的矛盾__在Blogger網頁版及行動版正常運作的訣竅
Blogger 行動版如何讓 Adsense 最佳化→ 四、版面配置的異常現象 → 五、解決行動版版面配置問題

會引述第二篇文章，主要在說明若將導覽列設定為 mobile='only' 時，會引起行動版版面配置的問題。因此前面的操作流程，將 B 區塊設定為 mobile='yes'，是繞遠路的方法，不過是目前唯一不會出錯的方法。

五、Adsense 廣告

如前所述，官方行動版的 Adsense 廣告，不一定是最好的配置，本站的行動版做了以下改變：

1. 如上圖，將最上方的 320 x 50 廣告，改放到導覽列下方，且尺寸改為 320 x 100。

2. 在文章中各種位置能安插 Adsense 廣告。

詳細的操作流程，請參考這篇「Blogger 行動版如何讓 Adsense 最佳化」。

由於篇幅的關係，文章區塊及側邊欄、其他區塊的修改，請見下一篇的內容。

Blogger 行動版相關文章：

「多層樹狀標籤」是開站以來，Blogger 最熱門的工具，由於與第二名的差距太大，相信將來寶座的位置也不太會變動。

不過樹狀標籤有一個小缺點，其標籤命名格式為「AAA-BBB-CCC」，當顯示在網頁上時，稍嫌佔版面了一些。如果一篇文章使用了多個樹狀標籤，那麼效果就類似本文開頭的示意圖。

+Alisha艾莉莎提出了這個問題，希望標籤的版面能簡潔一些，於是有了本文的靈感。如果讀者安裝過樹狀標籤的話，那麼這個可算是必裝的工具。

一、運作規則及準備動作

1. 實際標籤名稱

這個工具會讓樹狀標籤，只顯示最後一個實際標籤的名稱。例如原本標籤名稱與實際顯示的字串分別為：

「AAA-BBB-CCC」→ 顯示 "CCC"
「AAA-BBB-CCC-DDD」→ 顯示 "DDD"

2. 準備動作

根據以上規則，最好重新檢視一下樹狀標籤的命名，例如原本的標籤名稱若是「電腦-Blogger-筆記」，使用這個工具後，會顯示真實標籤名稱 "筆記"，但這樣的命名方式，讀者會看得一頭霧水對吧，到底是哪方面的筆記呢？

說不定還有另外一個標籤名稱叫做「電腦-網頁設計-Javascript-筆記」，根據規則，一樣只會顯示 "筆記"，這樣就造成混淆了。

因此，最後面的真實標籤名稱，需要重新斟酌如何名命，比較好的調整建議是：

「電腦-Blogger-筆記」→「電腦-Blogger-Blogger 筆記」
「電腦-網頁設計-Javascript-筆記」→「電腦-網頁設計-Javascript-JS 筆記」

二、效果展示

使用前的樹狀標籤版面大致是這樣：

使用後的樹狀標籤，改以真實標籤名稱顯示，讓版面精簡：

三、安裝程式碼

在修改範本之前，如果第一次安裝本站工具的讀者，建議先閱讀「備份範本的訣竅」系列文章。

請到後台「範本」→「編輯 HTML」，游標點進範本區塊，再搜尋以下字串：

<a expr:href='data:label.url' rel='tag'><data:label.name/></a>

如果你搜尋到不只一個結果，代表你的標籤在多處顯示，那麼可全部修改。

接著將以上字串，置換為以下程式碼：

<!-- 樹狀標籤只顯示真實標籤 start -->
<a expr:href='data:label.url' rel='tag'>
<script>
(function() {
var oldLabel = "<data:label.name/>".split("-"),
l = oldLabel.length,
newLabel = oldLabel[l - 1];
document.write(newLabel);
})();
</script>
</a>
<!-- 樹狀標籤只顯示真實標籤 end, designed by WFU BLOG -->

儲存後即可看到效果。

樹狀標籤相關文章：

接續上一篇「自訂行動版的實作」，前面說完了 "標頭"、"導覽列"、"廣告" 的部分，接下來繼續 "文章"、"側邊欄"、"頁尾" 這些區塊的實作分享。

由於第一篇的前言比較長，沒機會介紹系列文示意圖的 Credit，在此感謝「CC0 免費高畫質圖庫」，WFU 自己拍的 iPhone 效果還真是沒臉拿出來見人。文章開頭的 iPhone 示意圖，出處作者為「inthesky」，再次感謝 CC0 高畫質圖片的提供者。

六、文章區塊

1. 正規作法

行動版文章區塊的內容是獨立出來的，跟範本中的網頁版分屬不同區塊，如果想要把網頁版的版面配置，完整移植到自訂行動版，那麼真的是大工程。請參考「Blogger 行動版修改技巧」→「五、讓網頁版沒有的內容出現在行動版」→「2. 進階修改」，行動版有四大區塊要修改。

這部分若真要寫，又得花上好幾篇的篇幅，如果想研究的讀者，根據四大區塊的 id，簡單說明一下概要：

mobile-main：跑行動版文章區塊的流程(含留言及上下頁區塊)
mobile-index-post：行動版索引頁面的流程，也就是首頁、標籤等等頁面的版面樣式。對於 index 索引頁面的詳細定義，可參考「Blogger 七種頁面形態判斷語法」→「二、各種索引頁面」。
mobile-post：單指行動版文章區塊
mobile-nextprev：行動版上一頁、下一頁區塊

如果你會修改網頁版範本的話，經過以上概要說明後，相信你能從「Blogger 範本」系列文章，找到對應的相關資訊來修改。

2. 懶人作法

其實 WFU BLOG 並沒有修改範本中行動版文章的四大區塊，因為 WFU 也是懶人一枚，發現有便捷的替代方案時，便沒有去研究行動版的文章區塊了，那麼我是怎麼讓行動裝置的版面跟網頁版一致呢？

如果你有注意前面的敘述，你會發現我用了多次 "流程" 這個詞。行動版有他的流程在跑，而網頁版也有自己的流程在跑。當 Blogger 系統會執行 "行動版的流程" 時，代表範本中使用了判斷式，當偵測到行動裝置時，執行 "行動版流程"。那麼要讓行動版不執行既定流程，最簡單的方法就是取消該判斷式，讓行動裝置 "依然執行網頁版的流程"，這就成了「Blogger 行動版懶人包」。

3. 修改判斷式

以下說明懶人包的方法，在範本中搜尋 id='Blog1' 這個字串，大致會看到以下內容：

圖中藍色箭頭的語法就是行動版判斷式，這是 WFU 特地開了新網站、非常乾淨的範本內容，如果你的範本長得跟上圖不一樣，可以按下「將迷你組件範本回復為預設值」→ 將「Blog1」恢復為預設值，那麼可以得到跟上圖一樣的結果，但是你文章區塊過去的所有修改也都會消失。

所有的說明都在圖中了，要讓行動版文章區塊跟網頁版執行一樣的流程，最簡單的方法就是將判斷式刪掉，也就是將以下內容刪除：

第 1 個箭頭這一行 ↓
<b:if cond='!data:mobile'>
以及第 3、4 個箭頭這三行 ↓

<b:else/>
<b:include name='mobile-main'/>
</b:if>

4. 各有利弊

懶人包節省了時間，自然也會帶來管理上的麻煩，必須在網頁版文章區塊，四處穿插判斷式，來決定哪些內容在網頁版出現、哪些在行動版出現，造成範本會比較亂一些。

使用行動版範本，需要花費比較多的時間研究，不過範本比較乾淨整齊，日後維護比較方便。因此如果將來有足夠時間的話，也許 WFU 會將行動版範本這部分弄得比較完善。

七、文末資訊區塊及分享按鈕

1. 文末資訊區塊

雖然文章區塊有懶人包作法可以快速完成，但進入行動版頁面後，會發現文末資訊區塊怪怪的，無法跟網頁版一致：

如上圖，是不是跟網頁版差很多呢？我們進入後台看看 → 版面配置 → 網誌文章 → 按「編輯」，畫面如下：

就算我們把所有選項都勾選了，結果在行動版的畫面只會出現作者、發佈日期、標籤這三項而已，這是什麼原因呢？

用「Chrome 開發人員工具」檢視之後，大部分勾選的項目，其 HTML 內容都是空白，也就是 Blogger 並未執行這些項目。

實際上，如果測試官方行動版的效果，大部分的項目也都是不會執行。WFU 的推測是，Blogger 官方為了節省行動版的載入時間，文末資訊區塊原本就是設定為不執行這些項目。(另外也可參考「讓 Blogger 在文章下方顯示作者簡介」→「一、無法顯示的原因」。)

2. 社交分享按鈕

其他項目不能顯示 WFU 覺得沒什麼關係，但社交分享按鈕是非常重要的項目，一定要想辦法顯示出來。

如同前面的圖，我們勾選了「顯示分享按鈕」後仍無法顯示的原因，比其他項目複雜，除了 Blogger 不執行分享按鈕的程式碼以外，Blogger 另外還用 CSS 把這個分享按鈕設定為隱藏(display: none)，夠離奇吧！

不過這兩個原因 WFU 都已經解決了，可參考這篇「改造 Blogger 官方分享按鈕﹍新增熱門社交分享按鈕」，請詳讀全部的流程，就能在自訂行動版顯示官方分享按鈕，並新增各種熱門社交分享按鈕，包含 Line、微博(weibo) 等等。

八、側邊欄區塊

WFU 的自訂行動版向官方行動版看齊，基本上網頁版的所有側邊欄，在行動版全部取消，以加快行動裝置的載入速度。

1. 取消小工具

取消的動作很簡單，請參考「Blogger 行動版修改技巧」→「三、讓小工具出現在行動範本」，將小工具加上參數 mobile='no'，就能讓小工具在網頁版顯示，而行動版不顯示了。

2. 保留小工具

只要你有一個側邊欄小工具沒有做取消的動作，那麼這個小工具就會出現在行動版的最底部；如果有多個小工具，就會全部擠在最下面，版面或許不太好看。因此行動版會出現的小工具，最好設定一下 CSS，讓版面寬度好看一些。

如果要建議保留哪些小工具的話，WFU 會傾向只留功能性的項目，例如「聯絡表單」、「關於我」等等，這是行動裝置訪客比較有可能關心的，其他的項目請讀者自行斟酌了。

九、頁尾

這是 WFU BLOG 網頁版的頁尾畫面：

1. 改 CSS

上方的按鈕每個寬度為 48px，到了行動版由於太大粒，6 個按鈕會擠成兩排，版面比較不好看，因此行動版的 CSS 將按鈕寬度設定為 32px，保持一排 6 粒。

2. 減少 Javascript

另外，中間那一排「Alexa 排名」、「Histats」線上人數等等功能，由於需要執行外部 JS，且在行動版屬於非必要項目，因此取消這一行。

最後完成的行動版結果，大致如下圖：

現在看起來換成中間的 6 個超連結字體看起來大了一些，畫面不太協調，且有些擁擠對吧？

下一篇會說明行動版最後的收尾，看看字體 CSS 如何調整、圖片尺寸最佳化、以及網站外掛在行動版如何取捨等主題。

Blogger 行動版相關文章：

前陣子處理一個案子，需要在 Blogger 安裝多層下拉選單，說真的這不是一個輕鬆的任務，因此值得記錄一下過程，減少日後重新摸索的時間。

一般而言，如果像本站屬於主題集中、文章數幾百篇的規模，應該使用單層的下拉選單就足夠，太多層的下拉選單對於讀者而言，其實在尋找資訊時不是那麼直覺與方便。可考慮使用「Blogger下拉選單安裝懶人包」，不必瞭解語法也能安裝；如果網站文章需要大量的分類項目，也可另外使用「多層樹狀標籤」。

不過如果網站的主題多元，或是大型購物網站，或是大型旅遊部落格，或是文章多到像「電腦玩物」這樣的規模(數千篇)，那還真的需要「多層下拉選單」來輔助導覽。

在 Blogger 裝多層下拉選單的難處不少，會進行簡單說明，想先看效果請點這個以下網頁：

多層選單展示網頁

一、多層下拉選單的難處

1. 多層下拉選單教學

這篇「如何用純 CSS 製作無限階層的下拉選單」詳細說明了製作多層下拉選單的原理，有 HTML/CSS 的基礎就能自己做出無限層下拉選單。

不過 Blogger 有自己的預設 CSS 參數，若將這篇的語法直接搬來 Blogger 的導覽列使用，除了自己得美化版面，還得找出 CSS 會打架的地方。

2. 現成下拉選單套件

國外有一些現成的下拉選單套件包，可以直接下載來用，例如參考 +Mark X 這篇「BLOGGER 下拉式選單」的教學，或是直接從國外下拉選單官網尋找合適的樣式：

同樣的，直接套用在 Blogger 可能會版面大亂，需要有堅強的 CSS 修改實力做後盾，來讓下拉選單正常運作。

二、CSS 範例

本文記錄的多層下拉選單樣式，出處為「Apple Light Drop Down Menu」，這個套件其實只能顯示單層下拉選單，WFU 將這個套件的語法改成能夠顯示多層下拉選單。要將這個效果安裝到自己 Blogger 的話，請按以下流程。

修改範本之前，如果第一次安裝本站工具的讀者，建議先閱讀「備份範本的訣竅」系列文章。

到後台「範本」→「編輯 HTML」，游標點進範本區塊，按 Ctrl-F 搜尋 </head>這個字串，找到後在此字串的前一行，插入以下程式碼：

<style>
/*下拉選單 start*/
#dropMenu ul, #dropMenu li, #dropMenu span, #dropMenu a {
margin: 0;
padding: 0;
position: relative;
}
#dropMenu:after, #dropMenu ul:after {
content: '';
display: block;
clear: both;
}
#dropMenu a {
color: #333333;
display: inline-block;
font-family: 'Lucida Grande', 'Lucida Sans Unicode', Helvetica, Arial, Verdana, sans-serif;
font-size: 14px;
min-width: 35px;
text-align: center;
text-decoration: none;
text-shadow: 0 -1px 0 #eeeeee;
}
#dropMenu ul {
list-style: none;
background: none!important;
overflow: visible!important;
z-index: 2;
border: none!important;
}
#dropMenu &gt; ul &gt; li {
float: left;
}
#dropMenu &gt; ul &gt; li.active &gt; a {
background: #d9d9d9 url(http://2.bp.blogspot.com/-o_z6JrMNzkg/VRPtCtXxTNI/AAAAAAAALZw/bag3Q6eUhSY/s1600/grad_light.png) repeat-x left bottom;
background: -moz-linear-gradient(top, #d9d9d9 0%, #bfbfbf 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #d9d9d9), color-stop(100%, #bfbfbf));
background: -webkit-linear-gradient(top, #d9d9d9 0%, #bfbfbf 100%);
background: -o-linear-gradient(top, #d9d9d9 0%, #bfbfbf 100%);
background: -ms-linear-gradient(top, #d9d9d9 0%, #bfbfbf 100%);
background: linear-gradient(to bottom, #d9d9d9 0%, #bfbfbf 100%);
filter: progid:dximagetransform.microsoft.gradient(startColorstr='#d9d9d9', endColorstr='#bfbfbf', GradientType=0);
box-shadow: inset 0 0 10px #979797, inset 0 10px 10px #979797;
-moz-box-shadow: inset 0 0 10px #979797, inset 0 10px 10px #979797;
-webkit-box-shadow: inset 0 0 10px #979797, inset 0 10px 10px #979797;
filter: none;
}
#dropMenu &gt; ul &gt; li.active a:hover {
background: -moz-linear-gradient(top, #d9d9d9 0%, #bfbfbf 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #d9d9d9), color-stop(100%, #bfbfbf));
background: -webkit-linear-gradient(top, #d9d9d9 0%, #bfbfbf 100%);
background: -o-linear-gradient(top, #d9d9d9 0%, #bfbfbf 100%);
background: -ms-linear-gradient(top, #d9d9d9 0%, #bfbfbf 100%);
background: linear-gradient(to bottom, #d9d9d9 0%, #bfbfbf 100%);
filter: progid:dximagetransform.microsoft.gradient(startColorstr='#d9d9d9', endColorstr='#bfbfbf', GradientType=0);
filter: none;
}
#dropMenu &gt; ul &gt; li a {
box-shadow: inset 0 0 0 1px #ffffff;
-moz-box-shadow: inset 0 0 0 1px #ffffff;
-webkit-box-shadow: inset 0 0 0 1px #ffffff;
background: #bfbfbf url(http://2.bp.blogspot.com/-o_z6JrMNzkg/VRPtCtXxTNI/AAAAAAAALZw/bag3Q6eUhSY/s1600/grad_light.png) repeat-x left top;
background: -moz-linear-gradient(top, #ffffff 0%, #e5e5e5 50%, #d7d7d7 51%, #ededed 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #ffffff), color-stop(50%, #e5e5e5), color-stop(51%, #d7d7d7), color-stop(100%, #ededed));
background: -webkit-linear-gradient(top, #ffffff 0%, #e5e5e5 50%, #d7d7d7 51%, #ededed 100%);
background: -o-linear-gradient(top, #ffffff 0%, #e5e5e5 50%, #d7d7d7 51%, #ededed 100%);
background: -ms-linear-gradient(top, #ffffff 0%, #e5e5e5 50%, #d7d7d7 51%, #ededed 100%);
background: linear-gradient(to bottom, #ffffff 0%, #e5e5e5 50%, #d7d7d7 51%, #ededed 100%);
filter: progid:dximagetransform.microsoft.gradient(startColorstr='#ffffff', endColorstr='#ededed', GradientType=0);
border-bottom: 1px solid #d2d2d2;
border-top: 1px solid #d2d2d2;
border-right: 1px solid #d2d2d2;
line-height: 34px;
padding: 0 16px;
filter: none;
}
#dropMenu &gt; ul &gt; li a:hover {
background: #ffffff url(http://2.bp.blogspot.com/-o_z6JrMNzkg/VRPtCtXxTNI/AAAAAAAALZw/bag3Q6eUhSY/s1600/grad_light.png) repeat-x left bottom;
background: -moz-linear-gradient(top, #d9d9d9 0%, #bfbfbf 50%, #b0b0b0 51%, #c7c7c7 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #d9d9d9), color-stop(50%, #bfbfbf), color-stop(51%, #b0b0b0), color-stop(100%, #c7c7c7));
background: -webkit-linear-gradient(top, #d9d9d9 0%, #bfbfbf 50%, #b0b0b0 51%, #c7c7c7 100%);
background: -o-linear-gradient(top, #d9d9d9 0%, #bfbfbf 50%, #b0b0b0 51%, #c7c7c7 100%);
background: -ms-linear-gradient(top, #d9d9d9 0%, #bfbfbf 50%, #b0b0b0 51%, #c7c7c7 100%);
background: linear-gradient(to bottom, #d9d9d9 0%, #bfbfbf 50%, #b0b0b0 51%, #c7c7c7 100%);
filter: progid:dximagetransform.microsoft.gradient(startColorstr='#ffffff', endColorstr='#ededed', GradientType=0);
filter: none;
}
#dropMenu &gt; ul &gt; li:first-child a {
border-radius: 5px 0 0 5px;
-moz-border-radius: 5px 0 0 5px;
-webkit-border-radius: 5px 0 0 5px;
border-left: 1px solid #d2d2d2;
}
#dropMenu &gt; ul &gt; li:last-child a {
border-radius: 0 5px 5px 0;
-moz-border-radius: 0 5px 5px 0;
-webkit-border-radius: 0 5px 5px 0;
}
#dropMenu &gt; ul &gt; .has-sub:hover &gt; ul {
display: block;
}
#dropMenu .has-sub ul {
display: none;
position: absolute;
left: -1px;
min-width: 100%;
text-align: center;
*width: 100%;
}
#dropMenu li .has-sub:hover &gt; ul {
display: block;
position: absolute;
top: 0; 
left: 100%;
}
#dropMenu .has-sub ul li {
text-align: center;
}
#dropMenu .has-sub ul li a {
border-top: 0 none;
border-left: 1px solid #d2d2d2;
width: 140px;
display: block;
font-size: 14px;
line-height: 120%;
padding: 9px 10px;
text-align: left;
}
/* 下拉選單 end*/
<style>

多層下拉選單 CSS 如何修改的原理就不多說了，請直接參考前面給的相關教學文章連結，有詳細的說明。

三、安裝 HTML

請到 Blogger 後台 → 版面配置 → 新增小工具 → 選擇「HTML/JavaScript」→ 填入標題、以及以下程式碼：

存檔後，請將這個小工具拉到導覽列的位置，這個多層下拉選單才能出現在導覽列上。

如果要調整選單內容的話，請對照展示網頁的效果，參照以上程式碼行號，閱讀後續說明。

四、調整選單內容

1. 修改通則

每個項目的網址，請填入 HTML 碼之中 "網址" 這個字串的位置即可
選單文字、及項目的文字，請自行修改
全部的項目都已經縮排整理，將來自行刪減時，也建議保持這個縮排格式，以免編修錯誤，造成選單無法執行。

2. 三種樣式

這個範例設計了七組選單，每個區塊都是 <li>開頭、</li>結尾，複製時小心不要弄錯了。

第 1 組為 C 行，通常設定為首頁連結。

第 2 組、第 3 組都是「單層下拉選單」，分別為 D~K、L~S行。

第 4 組、第 5 組都是「多層下拉選單」，分別為 T~AJ、AK~BA行。

第 6 組、第 7 組都是「無選單項目」，分別為 BB、BC行。

不需要的組別，按以上行號刪除即可。需要增加的組別，一樣建議按照以上提示的行號來複製，然後再來修改細節，免生枝節。

由於本篇並非安裝懶人包，如果不熟悉 HTML 的話，建議別自己來，交給專家處理比較妥當。

五、補充

雖然本文提供的範例，在 WFU BLOG 的展示網站可以正常執行，但不太代表在所有 Blogger 網站都是一樣的情形，尤其非官方範本更是需要自行調整 CSS。

如果套用在官方範本有問題可提出，如果 CSS 沒有太複雜，會盡量回答。

如果非官方範本、商業網站需要製作多層下拉選單，請另外與我聯繫。

Blogger 導覽列相關技巧：

完成 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 行動版。

十三、聯絡表單

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

聯絡表單：

自訂行動版系列文章：

這個主題其實有些爭議，某些觀點認為鋰電池是消耗品，沒什麼好保養的，說不定電池還沒壞，就準備換新的行動裝置了。在這樣的前提之下，的確電池能用多久不是需要關心的事，不過事實上，如果好好對待電池的話，還是能帶給我們不少便利。

相信很多人會遇到，電池充飽後很快又沒電，也就是電量消耗得很快，其實這就是電池循環次數很多，電池容量越來越低的狀況。當沒有好好保養電池的時候，在電池生命的中、後期，你就得經歷這樣的情形很長一段時間。而為了常常得充電這個動作，勢必得減少很多使用時間。

這一篇的概念延續「讓 Android 設備鋰電池能正確充電、延長壽命的 App」，同樣的概念套用在蘋果行動裝置也是可行，以下就來看看 iOS 設備我們可以做到哪些事，來延長鋰電池的壽命。

(圖片出處: itunes.apple.com)

一、充電要點與延長壽命的原理

以下簡短引用上一篇的要點，及根據這個「G+ 討論串」的實驗證明來幫助理解概念：

1. 充電幅度對電池壽命的影響

A.每次充電幅度 100%：例如從 0% 充到 100%
B.每次充電幅度 25%：例如從 30% 充到 55%
C.每次充電幅度 50%：例如從 20% 充到 70%

以上的電池壽命長短為 C > B > A，每次都充放電 50% 可得到電池壽命的最大值。

2. 溫度

鋰電池溫度越低，壽命越長。當充電時間越久，電池溫度越高，對壽命有不好的影響。

3. 最佳化

根據以上歸納的要點，假設想讓電池壽命最大化，舉例來說，可在每次電力剩 25% 時充電，到了 75% 時停止充電。

4. 最適化

理論上的最佳化可讓電池壽命增加，但不一定是最好的選擇，因為我們能使用行動裝置的時間變少了。也許從 10% 充到 90% 就足夠，這樣的充電量手機使用的時間夠多，電池的壽命也不致減少太多。

每個人可以根據自己的狀況，決定自己的最適化範圍，總之不要讓電力充到百分之百、也不要讓電力過低，導致循環次數增加了。

二、iOS 的 APP

瞭解理論後，接下來就是尋找 iOS 能否像 Android 一樣，有自動提醒電量的 App，可讓我們在低電量時知道要充電，在接近電池充飽之前知道要停止充電。

直接說結論，非常可惜的是，翻遍了 iOS 的 App，在不越獄 (JB) 的情況下，這樣的事情辦不到。iOS 的設計先天上就不允許 App 讀取電量資訊，只有越獄才能讀到資料。在習慣了 Android 系統之後，總覺得 iOS 真是綁手綁腳，連這個簡單的功能都不開放。

某些免費的 App 號稱可以在特定電量時提醒，但經實測後，手上的 iPhone 在閡上螢幕(螢幕鎖定)的情況下，均無法發出提醒。或許付費的 App 能找到自動提醒電量的 App，不過非本文的主題，如果有讀者知道的話歡迎提供資訊。

以下提出不使用任何 APP 的情況下，我所想到的替代方案。

三、低電量時自動提醒

「低電量時自動提醒」這一點還算可行，雖然不一定是百分之百能接收到訊息。

1. iPhone 在低電量時，分別於 20%、10% 的時候，會自動彈出提醒訊息，這個時候如果正在操作 iPhone，就會看到這個訊息，可以準備充電。

2. 如果電力下降到 20%、10% 的時候，行動裝置並不在使用中，螢幕剛好是關上的狀態，那麼這次的提醒就不會看到。這樣的機率相對而言比較低，遇上了也沒有辦法。

四、高電量時自動提醒

沒有 App 輔助時，要如何得知行動裝置已經充電到 90% 以上，並不是容易的事。目前比較可行的方法，就是自行記錄充電需要的時間，然後利用倒數計時的功能，來提醒自己電量不要過充。

iOS 官方已經有很方便的倒數計時工具，因此是不用另外下載 App 的。可在首頁執行「時鐘」：

接著選擇右下角的「計時器」，設定倒數的時間。

以我家目前的 iPhone 4s 電池為例，設定 1 小時 30 分鐘可讓 10% ~ 20% 的電力，充到約 90% 的電力，確定不會充到 100% 之前就會「發出音樂提醒」。

請讀者依據自己的行動裝置、電池狀況作一次測驗，以後就知道大約可如何設定倒數計時的間隔了。

更多 iPhone 使用心得：

前幾天讀者回報「Google Drive 外連產生器 V1」在新版雲端硬碟失效，試了一下果然如此，距離上一個版本不過短短半年而已。

失效的原理稍後會說明，而為了繞過造成失效的情境也稍微有些麻煩。希望這個版本能撐久一點，否則需要頻繁修改的話，可能得像「Blogger 單篇文章瀏覽數 V2」走收費路線了。

一、失效的原因

V1 版本的原理為，當偵測到滑鼠經過檔案名稱時，觸發程式執行字串的運算，求出檔案外連路徑。

最近 Google Drive「整合了 G+ 照片」，新版雲端硬碟會出現 Google 相簿的選項。估計這次的改版，官方也順便修改程式碼。除了原本滑鼠的 hover 監控事件無法再使用，各種用 js 監控事件的方式也都被封鎖。

這部分的機制感覺上沒什麼必要，也許官方對於 "防止外連" 這件事下了點功夫。如果是這樣的話，WFU 認為 Google 有前後矛盾的地方，當初決定關閉 Google Code 的時候，官方的聲明可是「建議改用 Google Drive」，因此沒什麼理由阻止取得 js 外連路徑。

我不否認很多人濫用 Google Drive，在上面放奇奇怪怪的檔案，當作免空在使用。輕易讓這些檔案取得外連，的確會浪費 Google 的流量。不過 js 的檔案這麼小、流量無法相之比擬，如果「白狗偷吃，需要黑狗受罪」的話，以 Google 工程師的世界頂尖天賦，要研擬一個小小機制來保障 js 檔，相信不是什麼難事。

二、安裝程式碼

有幾種安裝方式：

1. 想先測試一下效果的話，可直接將上面這個連結用滑鼠拉到書籤列，按照「三、V2 使用說明」即可使用。

2. 由於程式碼裡面的 js 連結放在 WFU 的空間，而過去發生「Google Drive(js檔)流量限速」的情形，為了避免將來某天這個小工具無預警罷工，建議讀者有空的時候，參考以上文章連結，自行將綠色字串的 js 檔分流，改成自己的連結。

3. 改完 js 連結後，如果熟悉如何製作書籤的話，請將全部的紅色字串(含分流的 js)複製，貼到書籤的連結即可使用。

4. 如果對書籤製作不熟悉，以 Blogger 為例，可開一篇新文章，貼上所有程式碼(含分流的 js)，儲存後即可看到文章內的這個超連結。然後跟第 1 點的方法一樣，直接將超連結拖曳到書籤列即可使用。

三、V2 使用說明

1. 舊版雲端硬碟

如果使用舊版雲端硬碟，出現的畫面與 V1 是一樣的，如下圖：

操作的流程也與 V1 一樣，請直接參考「Google Drive 外連產生器 V1」→「一、使用方式」

2. 新版雲端硬碟

如果使用新版雲端硬碟，畫面將如下圖：

所有的操作提示都在圖中，提示文字下方會多出一個檔案列表，只要點擊檔案，就會自動顯示外連路徑，並自動選取複製。
請先切換到 "清單檢視" 模式即可正常產生連結。
雲端硬碟一次只會載入 50 個檔案，因此檔案列表一開始也只會出現 50 個檔案。
把雲端硬碟的畫面往下捲動，直到看到你要的檔案為止，那麼「Google Drive 外連產生器」的檔案列表也會自動載入新的檔案，此時即可捲動檔案列表來點擊該檔案。
如果要切換到其他雲端硬碟資料夾，來產生別的外連路徑，請關閉這個工具後重新執行。

四、注意事項及簡易排錯流程

從過去讀者的提問，簡單整理一些注意事項。使用上若有問題，請先逐一檢視以下內容再發問(並回報瀏覽器版本、使用的是新版或舊版 Google Drive)：

1. 請檢查新版雲端硬碟是否切換到 "清單檢視" 模式。

2. 請檢查是否已經對安裝程式碼綠色字串的 js 檔分流。

3. 有些基本規則需要注意，否則會誤以為產生的所有連結都是有效的。請先閱讀「Google Drive 外連網址原理分析」，要取得外連的檔案必須放在資料夾、且需要設定公開權限，並注意哪些檔案或形式可外連，因為 Google Drive 產生的文件不能外連。

4. 有讀者反應，取得外連的 js 檔，只有自己能使用 → 這代表權限沒有設定好，請依照第 3 點的說明進行。

Google Drive 相關文章：

過去在「Blogger 應該選擇自適應範本(RWD), 還是行動版範本?」曾經歸納出的其中一個結論，對於 "有修改能力、能處理自適應範本" 的站長，Blogger 行動版方案可以選擇「自適應範本(RWD) + 自訂行動版」，這是行動版的最佳選擇。

然而，RWD 範本不是那麼好製作，要修改現成的 RWD 範本也需要一定的功力，因此 WFU 思考的是，Blogger 平台下實現 RWD 有沒有比較簡單的方法？

其實官方提供的判斷式語法，就能實現類似 RWD 的效果。只不過判斷式也非萬靈丹，有少數場景無法使用。本篇將分享一則實例，如何在無法使用 Blogger 語法時，製作出 RWD 頁面。

一、RWD 概念

1. 基礎知識

要說明 RWD 實例，得先具備 RWD 的知識。這部分網路上的入門教學文章很多，可直接參考以下：

RWD 簡單介紹與優缺點、實作入門
CSS Media Queries 介紹與基礎應用→ CSS 相關語法詳細說明

有了以上基礎後，可以繼續往下看。RWD 簡單說，就是在不同螢幕尺寸的網頁，分別為版面設定不同的 CSS 參數。在市面上手機、平板尺寸多元，還得兼顧螢幕平放、直立效果的情況下，可想而知 RWD 要含括這麼多種效果，是多大的工程了。

2. 是否存在懶人法？

這篇「RWD 必備技術」提到一句話 "其實你不太需要去對每個裝置都去做調整，基本上使用行動裝置的 max-device-width: 480px，就綽綽有餘了" 引起 WFU 的注意，這也是 WFU 想要追求的懶人法，如果可以用最少的設定完成 RWD，也就是只設定螢幕寬度 480px 這種情況，那麼的確能增加站長製作 RWD 的意願。

先說結論，懶人法可以應付多數版面，不過也有一點難處，某些情況下需要特別處理，後面章節會有實例說明。

3. Blogger RWD 範例

+綜合口味分享了他的 Blogger RWD 範本製作經驗，為各種不同螢幕尺寸設定了對應的 CSS，有興趣的讀者可以參考這篇「Responsive Design Blogger 經驗談」，可瞭解 RWD 需要調整的區塊有哪些地方，以及需要具備的技巧。

二、Blogger 判斷式

1. 欄位數量的影響

這是身為 Blogger 平台的小確幸，官方提供了行動版頁面的判斷式，也就是說我們有一個「二分法」的 RWD 功能，可單獨為行動版頁面設定 CSS。

一個正規的 RWD 範本可能至少需要為四~五種螢幕尺寸設定 CSS，也就是「四分法」、「五分法」。但是部落格平台的版面，其實多數使用二~三欄而已，不像一般網站那麼複雜，說實在不太需要到四分法以上。

如果跟 WFU BLOG 一樣只使用了二欄式的版面，那麼其實「二分法」就足夠，可以利用官方的判斷式，來實現懶人 RWD 效果。判斷式語法的使用方法，請參考「Blogger 行動版範本修改技巧」。

2. Blogger 語法的侷限

Blogger 語法並非標準 W3C 語法，不能放在任意的網頁位置，例如「HTML/Javascript」小工具、文章之中，這些地方都不能執行 Blogger 判斷式。唯一能使用的地方，就是 Blogger 範本之中。

如果你的 RWD 效果在 Blogger 範本之中就能搞定，那麼這件事就沒什麼問題。WFU BLOG 有一個特殊案例，「會員中心」需要有 RWD 的效果，但是因為 "會員中心" 只會在特定頁面執行，為了縮減範本的容量，不想把 CSS 放在範本之中，導致無法在範本之中使用判斷式來製作 "會員中心" 的行動版。

3. 行動版判斷式

行動版判斷式的另一個侷限是，得先開啟 Blogger 行動版。

這是非常重要、也是會被忽略的一點，因為有的站長選擇在後台「關閉行動版」。當關閉行動版之後，Blogger 不會執行行動版範本內容，自然判斷式語法就失效了！

會選擇關閉行動版範本的站長，多半是使用了 RWD 範本。在這種情況下，若還想 "借用判斷式語法" 來解決一些問題，那麼可參考本文的實作案例語法。

三、會員中心實例

1. 原始效果

本站的「會員中心」算是一個三欄式的版面配置，其實原本就有為行動裝置另外設定 CSS，但是當初只有利用 "浮動調整欄位寬度" 的技巧，並沒有做到 RWD 的真正精神 "調整欄位位置"。

例如原本網頁版的效果如下：

模擬 iPhone4 直立的效果，可看到欄位位置不變，但各欄位變得很彆扭：

這是 iPhone 4 橫躺的效果，螢幕較寬時欄位比較正常，但左邊按鈕變得高度不一：

我們可以得出結論，利用 CSS 設定區塊寬度的百分比，來 "浮動調整欄位寬度"，並非 RWD 好的解決方法，要有好的效果還是得真正改變區塊的排列位置。

2. 改變區塊位置

於是重新規劃了一下「會員中心」的各個區塊，行動版的畫面調整如下：

左邊按鈕改成兩排直列，使用全部寬度
會員頭像、編號那個區塊，改為置中、使用全部寬度
輸入資料改為置中、使用全部寬度

同時，延續「一、RWD 概念」→「2. 是否存在懶人法？」的概念，除了通用的 CSS 內容之外，另外為 480px 寬度以下的螢幕尺寸，單獨調整部分 CSS 內容，例如以下的語法：

@media screen and (max-width: 480px) {
// 填入版面 480px 寬時所調整的 CSS
}

修改後的模擬效果如下，這次改用 Nexus 5，先看直立的畫面：

接下來看 Nexu5 橫躺的畫面：

糟糕！左邊按鈕的版面錯亂了~~

原來 Nexu5 橫躺以後的寬度超過 480px，我用的懶人設定法有缺陷，超過 480px 以後，沒有把這個情況判讀為行動裝置，CSS 跑去讀取通用參數，造成了顯示網頁版效果時異常。

四、RWD 二分法的解決方法

1. 完整的 Media Queries 語法

為何有 480px 以上的異狀？原因可能是：沒有為二分法建立兩套不同內容的 CSS。我只單純針對 480px 以下來 "修正"、"調整" 原先的 CSS 通用內容，而不是建立一套 480px 以下的 CSS 內容，相信不同的瀏覽器在處理時，多少會引起一些邏輯上的錯誤。

正確的作法應該是，建立兩套 Media Queries 語法：

@media screen and (max-width: 480px) {
// 480px 以下的 CSS
}
@media screen and (min-width: 481px) {
// 480px 以上的 CSS
}

這麼做的話就可以避免邏輯上沒有涵蓋的部分，不過缺點就是，兩套內容會讓 CSS 變得很龐大，而且製作兩套 CSS 比較費功夫。

可想而知，二分法已經這麼麻煩的時候，四分法、五分法的處理有多繁瑣了。

2. 使用 Blogger 行動版判斷式

回過頭來，這時就覺得 "Blogger 行動版判斷式" 實在太棒了，完全不必理會各種行動裝置螢幕的寬度，不必為各種尺寸做不同設定，只要偵測到是手機的螢幕，一律執行我們設定的 CSS。這樣的做法讓我處理 CSS 非常省事，不必製作兩套 CSS，也讓我的 RWD 懶人法復活。

用判斷式的概念，程式碼我只需要這麼寫就行了：

<b:if cond='data:blog.isMobile'>
// 原本我替 480px 以下設定 的 CSS
</b:if>

看一下修改後的「會員系統」畫面：

Nexus 5 橫躺後的畫面，640px 寬一樣被判定為行動版，這才是完美的懶人二分法。

五、Blogger 判斷式的替代語法

如前所述，本站的「會員系統」只想在特定頁面執行，將無法在範本中使用行動版判斷式，那麼該怎麼解決這件事呢？

其實原理也很簡單，行動裝置的網址一律會出現 "m=1" 的字串，利用 js 偵測到這個字串時，加入行動版的 CSS 語法即可。

簡單看個範例，首先參考「如何使用jQuery版本」，確定範本中已經安裝了 jQuery。

接著使用以下程式碼：

<!--行動版 css start-->
<span id="mobile_style" style="display: none;">
// 這裡填入所有行動版要執行的 CSS
</span>
<script>
(function ($) {
var $span = $("#mobile_style");
if(location.href.search("m=1") > 0) {
$span.after("<style>" + $span.html() +"</style>");
}
$span.remove();
} )(jQuery);
</script>
<!--行動版 css end, designed by WFU BLOG-->

以上的綠色字串，請置換為你的行動版 CSS。當偵測到行動版時，這些 CSS 就會被執行。

六、小結

本文內容很長，做個總結複習一下，Blogger 平台的懶人 RWD 作法有兩種：

1. 使用 Media Queries 語法：建立兩套 Media Queries 語法，例如 480px 以下一套 CSS、481px 以上一套 CSS，會比較麻煩一些。
2. 使用 Blogger 行動版判斷式：只需要針對行動版的 CSS 進行修正即可。在不能使用官方判斷式語法的情境下，利用 js 判斷網址是否有 "m=1" 字串，也可得到跟判斷式一樣的效果。

Blogger 行動版相關技巧：