WFU BLOG

github-page-js-link-免費空間最後一塊淨土﹍用 Github 存取網頁 JS/CSS 外連檔案 + 使用技巧

最近需要幫客戶裝某個特殊的輪播外掛，由於是付費程式，不會有 CDN 外連，那麼必須自己有網路空間才能安裝。而且最重要的是，這個空間必須能支援資料夾(目錄)路徑，然而現在已經沒什麼免空可做到這件事了！

由於網站流量不大，不太可能要求客人每年為了幾個 JS/CSS 檔，花上 2 千、甚至以上的金額來購買網路空間。真要花這筆錢，就不必在 Blogger 架站了。

想來想去，符合需求的免費空間只有 Github。然而：

4 年前介紹了「Google Code」，結果沒幾個月就宣布關閉。
接著寫了「Google Drive 外連產生器」以及「V2 版本」，結果去年 8 月「Google Drive 關閉外連功能」。
去年寫了「Dropbox 外連產生器」，結果 Dropbox 宣布「今年 3 月起終止公開資料夾功能」，所以 Dropbox 的檔案也不給外連了。

那麼，就算目前 Github 的檔案是可以外連的，我究竟要不要寫這篇文章呢？

如果你也想用 Github 的話，願意看到他步入 Google Drive(以下簡稱 GD)、Dropbox 的後塵嗎？

一、免費空間的宿命

為何 Github 會是最後一塊淨土，我想有兩個原因：

英文介面：有先天的進入障礙
工程師介面：一般人無法瞭解他的運作邏輯

其實這篇內容就算我沒寫，從網路相關文章還是可以拼湊出整個操作流程。

但這個外連的操作流程要找出來，我相信還是有不小的難度，因為只要是網路服務都會不斷改版，Github 也是，所以教學文章大多圖文跟現況對不起來，而我的確也花了不少時間摸索。

如果你是工程師的話，我相信不會濫用 Github 的資源，不過工程師也不會需要本篇教學就是了。

然而，如果不是工程師的話，某些族群的使用方式就可能讓 Github 成為下一個 GD、Dropbox。如我之前說過的：「免空濫用的行為只會不斷移轉，如同蝗蟲一般，掠奪一空後另尋他處」。

那麼，有鑑於之前寫過的各種外連產生器，這次我覺得有責任延緩 Github 的殞歿，所以決定不公開本篇的部分內容，製造 Github 的進入障礙我認為是有必要的。

如果已經是本站的「加值會員」，可免費兌換本文的隱藏內容；如果是本站的客戶請與我聯繫，會直接開通閱覽權限。

已經瞭解 Github 操作流程的讀者，如果將來還想使用 Github 的話，建議不要免費公開分享 Github 的檔案外連使用方法，只要被任何濫用資源的使用者知道，就是加速 Github 的滅亡。

二、取得外連的完整設定流程

1. 註冊帳號

首先請在「Github」註冊一個帳號，如果英文操作有困難，可參考這篇「GitHub 申請帳號」。

2. 完整流程

3. 外連 JS 範例

以上流程我上傳了一個 JS 檔 "welcome.js"，依照外連路徑的格式，他的外連路徑就是：

https://wfublog.github.io/test/welcome.js
貼到瀏覽器就能看到這個檔的內容。

如果要執行這個檔案，可用以下語法測試：

<script src='https://wfublog.github.io/test/welcome.js'></script>

三、Github 流量限制

根據官方文件「Usage limits」，Github 的使用限制如下：

一個目錄的檔案存放上限為 1GB
流量限制為 1 個月 100GB

目前這個限制我覺得真的太佛心了，鐵定會被濫用...請讀者好好愛惜 Github 資源。

如果只使用 js/css 的話，無論是檔案存放上限、或是流量限制都不用擔心，可以安心存放在 Github。

四、建立子目錄的技巧

1. 建立子目錄

如果準備在 Github 架設網站的話，通常會另外下載網頁端的軟體，操作上會比較簡單。

但 WFU 並沒有要架站，不需要常常同步或更新 JS/CSS 等檔案，因此本篇只介紹了從網頁操作的介面。

那麼從網頁建立子目錄，可能會遇到小麻煩，因為沒有直接的指令。

可參考這篇「Creating folders inside github.com repo without using Git」，在上傳檔案按鈕的左邊，有一個「Create new file」按鈕，輸入檔名的時候，字串內穿插斜線 "/" 就能自動產生子目錄了，上面的參考連結甚至有動畫輔助。

2. 上傳整個目錄

如果要上傳整個目錄的所有檔案，也不一定要這麼麻煩，先建立目錄再選擇全部檔案上傳。

比較簡單的方法，是先按上傳檔案的按鈕「Upload files」，然後將檔案總管中要上傳的目錄，直接用滑鼠拖曳過來，就可以整個目錄一併上傳，包含所有子目錄裡面的檔案了。

不過拖曳的方式需要注意的是，一次最多只能上傳 100 個檔案，所以目錄裡面不能有太多檔案。

五、自訂網域

如果有買網址的話，可以把 github pages 的網址，設定在自己的網域之下。

操作方式可參考這篇文章「Github Page Domain CDN Acceleration」。

首先進入要改網址的那個目錄的設定頁面，例如：

https://github.com/帳號/目錄/settings

往下捲到「Github Pages」，找到「Custom domain」這一欄，填入你要設定的網址，例如 "github.wfublog.com"，按儲存。

因為我的網址商是 Godaddy，因此用 Godaddy 舉例，新增一筆 DNS 紀錄：

github-page-js-link-8-免費空間最後一塊淨土﹍用 Github 存取網頁 JS/CSS 外連檔案 + 使用技巧

設定 Cname
主機設為你要用的子網域名稱
指向設為 "Github帳號.github.io"

Godaddy 雖然不是最便宜，但我設定後都很快就能生效，不必等很久。

六、CDN 加速外連檔案

1. Github Pages

根據 Github 官方公告「Faster, More Awesome GitHub Pages」，使用 Github Pages 建立靜態網頁，就能享受官方提供的 CDN 加速。

可使用預設的 "Github帳號.github.io" 網址
根據「五、自訂網域」流程，利用 Cname 設定子網域的方式也可以

2. Rawgit

我看到不少人使用「RawGit」的服務來加速 Github 外連檔案，方法可參考這篇「善用RawGit存取GitHub Raw File」。

然而，RawGit 是私人提供的第三方服務，把網站的外連檔案都交給他，我認為是有風險的，你不知道哪天會無預警中止服務，導致網站開天窗。

可以的話，按照基本的 Github Pages 流程走，取得檔案外連來使用，就可享有 CDN 加速了。

更多免費空間相關文章：

這是一篇公告，本站會員系統新增一項功能，只優惠 VIP 級別的會員。

如果等級是「加值會員」，不必任何點數即可看到某些隱藏的「加值文章」內容。

(圖片出處: pixabay.com)

一、「一般會員」權益

進入本站「會員中心」後，上圖紅框處可看到會員的級別，在預設的情況下都會是「一般會員」。

一般會員的權益如下：

可進入「會員公告」、「會員討論區」
可閱讀「會員限定文章」的隱藏內容
有免費獲得點數的機會，可參考「會員系統啟用」→「二、會員點數」
一般會員的點數也可兌換「加值文章」，但最多只有 24hr 的時效，每日清晨 5 點會自動清除點數兌換記錄，因此需要自行備份兌換過的內容。

二、「加值會員」權益

可參考「會員系統點數加值說明」，付費加值點數的會員，可成為「加值會員」。

本站客戶也會自動具備「加值會員」的資格，如果你曾發案給本站，但仍是「一般會員」的話，由於 WFU 無法知道你的會員編號，麻煩與我聯繫，並告知會員編號即可。

加值會員的權益如下：

可使用會員系統所有功能
加值會員兌換過的文章或工具，無時效限制，可重複閱覽。
可保存點數兌換記錄，進入會員中心的「點數使用明細」即可進行查詢
新增權益：不用點數即可兌換某些「加值文章」

三、加值會員限定的文章

member-free-value-post-會員系統公告：加值會員及本站客戶的專屬好康

如上圖，在「會員加值文章」的畫面，可找到一些不需點數即可兌換的文章(兌換點數為 0)。

雖然不用點數，但「一般會員」無法兌換這些文章，身份必須是「加值會員」才能兌換。

因此，只要你具有「加值會員」的資格，別讓自己的權益睡著囉！

會員系統相關文章：

在本站這個工具「Blogger 樹狀標籤 V2」有讀者於留言 #18 表示，點擊版權連結後無法顯示網頁。當下覺得納悶，於是看了他的網頁後，發現網址開啟了 HTTPS 功能，這也間接使得我的版權連結自動變成 HTTPS 開頭的網址。

由於本站並沒有申請 HTTPS，那麼本站的任何連結若改用 HTTPS 來開啟，自然變成一個無效的連結。

這下麻煩可大了，當初「Blogger 最新文章 V2」、「Blogger 最新回應 V2」等小工具，為了相容於 HTTPS 協定，特地把跟網址有關的字串，都去除掉 "HTTP:" 這幾個字元，只留下雙斜線 "//" 開頭的網址。沒想到會造成只要是開啟 HTTPS 的 Blogger 網站，我的版權連結也自動成為 HTTPS 連結。

因此我陷入了長考，有沒有需要為了修復這些流落在外、有可能變成無效的版權連結，而將 WFU BLOG 改成有綠色鎖頭的 HTTPS 網站？

(圖片出處: pixabay.com)

一、自訂網域 HTTPS 的優缺點

1. blogspot 網址

如果不是自訂網域的話，也就是使用官方的 blogspot.com 網址，基本上已經自動擁有 HTTPS 功能，隨時可以從後台開關設定，且 HTTP 與 HTTPS 這兩個網址是同時有效的，愛怎麼切換都沒什麼影響。

2. 自訂網址

Blogger 自訂網址使用 HTTPS，不但操作流程很長，要考慮的點也非常多，可參考一下 Blogger 中文論壇整理的這兩篇：

+coke tech 已經分享了非常多測試心得，可在他的網站找到所有相關操作流程，簡單列一下自訂網域使用 HTTPS 的優缺點──

優點：

對 SEO 有加分
瀏覽器的網址列有綠色鎖頭，讓網站看起來等級比較高
資料傳輸比較安全(不過部落格很少能被偷走什麼資訊就是了)

缺點：

需要處理網站所有連結，是大工程
目前只有 CloudFlare 提供的免費 SSL 這個管道
CloudFlare 的速度不會比 Google 的伺服器快
使用 Cloudflare CDN 後，會有快取的問題，常修改網站的話，要除錯會比較麻煩，容易看到快取畫面
目前 Cloudflare 是免費，萬一將來收費的話，需要考慮退路問題

二、退路問題

其實上面列的那幾個優點，基本上 WFU 是不太在意的，對我而言其實感覺不出，如果真的花這麼多時間來研究、設定後，做這件事到底能獲得多大的回報。

而列的那些缺點，大部分對我來說，如果 SEO 真的有一絲.絲.絲提升，那麼這些不便就稍微忍受一下好了。

但我真正在考慮的，是「退路」的問題，我真的把網站改用 HTTPS 後，到底有沒有退路呢？

1. SSL 憑證

SSL 憑證是要錢的，而且很貴。CloudFlare 能提供免費 SSL，主要也是因為那不是真的 SSL，只走了一半的流程而已。

但如果你願意花錢在其他地方買 SSL 憑證，Blogger 後台也沒有地方可以讓你設定，所以使用 CloudFlare 的 SSL 功能，目前是一件沒有退路的事。

2. 將來是否還是免費

「免費的最貴」，若當初圖片、外連都放在 Google Drive、Dropbox，「一旦取消免費使用後」，站長們就會非常痛。

同樣的，目前 CloudFlare 可免費使用 SSL，若將來開始收費，站長們是否多少錢都願意買單呢？還是乾脆取消使用 HTTPS？

三、自訂網址是一條不歸路

1. SEO 的移轉

先岔開一下主題，請站長們回想一下，當初選擇自訂網址時，是否已經做好了破釜沈舟的心理準備。

以本站為例，原本的 Blogger 網址是這樣：

http://wayne-fu.blogspot.com

網站寫了約 4 年後，我買了網址：

http://www.wfublog.com

其實後台的原理很簡單，原本舊的文章網址，Blogger 系統都會自動幫我們用 301 轉址轉到新的自訂網域，所以 SEO 會無縫接軌。

而到了今年，這個自訂網域 wfublog.com 也經營了 3 年，原本 wayne-fu.blogspot.com 的 SEO，都老早轉到新網域。

2. 放棄自訂網址

如果我買這個網址純粹是玩票性質，寫了 3 年後決定放棄這個網址，那麼會發生什麼事呢？

wfublog.com 一旦消失後，所有流通在外、各處分享的文章網址，一旦有訪客要連到 wfublog.com 都會變成 404 錯誤連結。

雖然不用自訂網址後，網站會自動回到原本的 wayne-fu.blogspot.com，但是這個網址的 SEO，老早就轉到 wfublog.com，那麼對於搜尋引擎而言，blogspot 的網址就跟一個新網站一樣，要重頭開始累積 SEO，那麼我過去 7 年網站累積的聲譽、權重，等於就全部歸零了！

3. 網址必須買一輩子

瞭解以上的狀況後，相信站長們在買網址之前，如果沒有買一輩子的決心、沒準備長期經營自訂網域的話，那麼還是先別買比較好，否則將來一定會後悔的。

四、使用 HTTPS 也是一條不歸路

1. HTTPS 也是一輩子的事

在考慮 HTTPS 退路時，搜尋到了這篇文章「How To Migrate From HTTP To HTTPS On Blogger Blog With Custom Domains」，他提出了很重要的一點：

Once you completely migrated to HTTPS then you’ll no be able to remove the HTTPS, and when you try to remove then you’ll lose your traffic, and maybe Google will deindex your blog.

意思是說，一旦網站使用 HTTPS 後，你就不可能再回到 HTTP。一旦移除了 HTTPS，網站的流量會消失，而且 Google 會移除網站的索引。

正是這段話提醒了我，也足以做出判斷與決定。

2. 不可逆的過程

看完「三、自訂網址是一條不歸路」，有沒有發現 HTTPS 也是一模一樣的情形？

當我們從 HTTP 改用 HTTPS 後，原本的網址會用 301 轉址到 HTTPS，所以 HTTP 網址的 SEO，會隨著時間移轉到 HTTPS 網址。

而一旦長時間使用 HTTPS 後，所有 SEO 都歸於 HTTPS，所有分享在外的文章連結，也都是 HTTPS，這已經形成一個不可逆的狀態，你不可能、也沒有機會取消 HTTPS 了，否則：

所有 HTTPS 外連都會變成 404 錯誤網址
搜尋引擎的 HTTPS 網址搜尋結果也都變成錯誤網址
你的網站像是消失在這個世界上一樣
HTTP 網址要從頭開始來過

3. 準備好銀彈

跟網址要買一輩子一樣，將來 HTTPS 只能付費購買的時候，你也得一輩子買下去。

網址的費用很便宜，HTTPS 的費用就很驚人了，除非網站的收益能夠負擔這些每年的固定支出，我認為是否採用 HTTPS 這件事，站長們真的需要從長計議。

五、後續

考慮清楚後，我暫時不使用 HTTPS 了，真的要做決定，也得等 Blogger 將來開放後台可以設定 SSL 憑證，到時還有機會從各家憑證公司比比價，而不是被一家服務商綁住。

那麼開頭提到的問題，就是花點時間，一一修改小工具的版權連結，讓將來新安裝的讀者，在網站執行時沒有問題。而舊的讀者，若網站啟用了 HTTPS，這部分的損失也只能看開了。

更多自訂網域相關文章：

blogger-official-rwd-template-Blogger 推出全新自適應 RWD 官方範本及佈景主題，並支援行動裝置

前幾天 Blogger 官方發佈了公告「Share your unique style with new Blogger themes」，從現在起後台可以套用的佈景主題，多了 4 個大分類，共 20 款新樣式可選擇。

雖然款式很多，不過版面設計的邏輯都差不多，也可看成官方提供了一種 RWD(自適應) 型態的新模版，只不過有 20 個不同的色系或排列組合可挑選。

好處是使用者不必費心尋找 RWD 範本，也不必擔心行動版版面看起來不搭。當然，不喜歡跟別人撞衫的站長，還是得上範本網站尋寶、或找人修改，才有辦法同時處理 RWD 範本及行動裝置的效果。

那麼本篇就來分享，WFU 從新的 RWD 範本看到 Blogger 的改變有哪些。

一、新 RWD 範本效果

從後台每位站長都能看到新版型的預覽圖，這裡就不重複貼圖了。接下來以分站「Blogger工具效果展示」舉例，套用的是「Contempo」範本第 1 個樣式，來看看 RWD 的效果如何。

blogger-official-rwd-template-1-Blogger 推出全新自適應 RWD 官方範本及佈景主題，並支援行動裝置

這是網頁版正常的畫面，左邊是側邊欄，左上角是作者簡介，但側邊欄跟以往的形式截然不同，預設會將小工具內容隱藏起來，並加上「檢舉濫用情形」這個工具。

可注意一下上圖的導覽列，目前的寬度足以顯示全部的項目。

blogger-official-rwd-template-2-Blogger 推出全新自適應 RWD 官方範本及佈景主題，並支援行動裝置

瀏覽器反覆按 Ctrl、+可模擬螢幕尺寸較小的行動裝置(例如平板)，如上圖的效果，可看到左上出現了「選單」圖示，不過這個選單功能跟一般的想像不一樣，按下去後出現的是側邊欄內容，而不是導覽項目。

在螢幕變小的情況下，導覽列會根據不同寬度，出現中間紅框的「更多...」按鈕，用以顯示裝不下的導覽列項目。

而文章、主要區塊也成為 100% 螢幕寬，這正是典型的 RWD 版面設計。

blogger-official-rwd-template-3-Blogger 推出全新自適應 RWD 官方範本及佈景主題，並支援行動裝置

以往的官方行動版是不給修改的，而新式的 RWD 範本可說是買一送一，附帶了同版型、但可修改的行動版。在後台不需要另外選擇行動版範本，但其實也沒得選擇，因為官方關閉了行動版範本選項。

上圖為模擬 iPhone4 的 320x480 尺寸的直立畫面，導覽列窄到只能如此顯示。

blogger-official-rwd-template-4-Blogger 推出全新自適應 RWD 官方範本及佈景主題，並支援行動裝置

上圖將 iPhone4 橫擺，導覽列也能顯示對應的變化。

在免費的前提下，能做到以上這些 RWD 效果，我認為已經很不錯了。

二、後台版面配置

套用新範本後，後台的版面配置功能也不一樣：

blogger-official-rwd-template-5-Blogger 推出全新自適應 RWD 官方範本及佈景主題，並支援行動裝置

整個版面多了很多零碎的小區塊，主要的改變是這樣：

只有兩欄：側邊欄與主要區塊，當螢幕尺寸不夠大時就會隱藏側邊欄。
新增隱藏選項：如紅框標示的小工具，劃掉眼睛的圖示代表這個小工具不會顯示，編輯小工具就能勾選顯示與否。
預設只有側邊欄可以新增小工具

blogger-official-rwd-template-6-Blogger 推出全新自適應 RWD 官方範本及佈景主題，並支援行動裝置

再多看一張圖，畫面往下拉後就會發現，主要區塊的每個小工具，預設情況下都沒有 "可拖曳" 的活頁孔圖示，也不能新增小工具，為什麼這樣設計呢？

自然是為了 RWD 的相容性，因為 RWD 範本的製作是很麻煩的，Blogger 官方也怕使用者把範本改壞，乾脆在預設的情況下，不讓你改主要區塊，只讓你放側邊欄的小工具。

當然，熟悉範本的站長們，修改主要區塊、新增小工具到主要區塊也是做得到的，不過建議有多年的經驗再來做 RWD 這件事。

(需要讓小工具改為 "可拖曳"，或是移除不能移除的小工具，請參考「Blogger 範本區塊的修改」→「三、修改小工具的設定」)

三、新式 RWD 範本內容

打開新式 RWD 範本看看有什麼玄機，結果真是大吃一驚，整個語法內容真的可以算是 Blogger 3.0 了！我看到的改變大概是這樣：

不管是 HTML/CSS/JS 都變化很大
區塊的架構也都跟以往不一樣，依照以往的教學文章，很難學會修改新範本的內容
更麻煩的是，多了許多新的變種 Blogger 語法、標記語言，目前不一定找得到說明書
可以稱讚的優點是，用了 HTML5 標籤
最棒的一點是，以往小工具內容我們要自行備份，現在則是直接存在範本之中，不必擔心範本匯出匯入後，小工具會消失的問題
不過隨之而來的，就是範本檔變得肥大，編輯範本有時會當掉，瀏覽器記憶體不夠也可能當掉。

其實 RWD 範本已經非常難改了，現在又有以上這些新的語法、架構需要理解，那麼建議最好不要修改，使用官方 RWD 預設版面及效果就好。

四、新式 RWD 範本特色

整理一下官方 RWD 範本，需要知道的特色有哪些：

使用 HTML5 標籤，這對 SEO 控的站長是好消息。
不用另外再處理行動版範本的版面效果
官方留言工具的設計變得簡潔美觀
找不到文章編輯圖示、小工具編輯圖示(不曉得之後會不會補回來)，也沒有快速進入後台的「設定」按鈕
多了一些特別為 RWD 設計的區塊，但這些區塊預設不允許新增小工具(可在側邊欄新增工具後，再拖曳過來，但請注意 RWD 支援程度)
原因在於不是每個小工具都有 RWD 效果，官方會擔心小工具出現在不該出現的地方，而把 RWD 版面給破壞了
所以除了側邊欄，主要區塊的配置就會比較死板
也建議不要去改任何區塊的寬度，以免改壞了 RWD 在各種螢幕尺寸的效果。

五、總結

看了以上內容，你應該也會覺得，官方的設計明顯希望站長們不要動這個 RWD 範本，預設的效果就放手去接受它吧。

以 WFU 的立場而言，常常遇到有客人要求網站改成 RWD 效果，我都是直接回絕，因為原始 code 不是自己寫的，動到 RWD 效果需要測試各種螢幕尺寸的效果，是很麻煩的。而且你不會知道改了一個地方的 RWD 效果，是不是另一處的程式就因此當掉、或產生異常。

我只會建議讀者，直接買 RWD 範本來套用，並且避免改跟 RWD 有關的地方，只處理跟版面無關的項目，例如功能性的問題，最好不要動到版塊的大小、寬度等，可參考「如何從 Blogger 範本網站挑到理想的版型，且不會出錯」→「四、篩選範本的重點」。

那麼對於 Blogger 官方的新佈景主題，簡單做個總結：

在意 SEO 的站長，適合直接套用這個新版 RWD 範本，語法絕對支援目前最新的 SEO 規範。
在範本的新架構、新語法之下，官方說明書也不一定有解釋，範本最好別亂改。
建議就當成以往在使用「動態檢視範本」、或官方行動版本一樣，讓自己去適應這樣的版面，以免帶來更多的困擾。
要安裝任何小工具的話，最好確定這個工具支援 RWD 效果。
本站的工具多半沒特地為 RWD 而設計，但本站工具大多會附 CSS 語法，而熟悉 CSS 的讀者，可自行修改為符合 RWD 的效果。

更多 Blogger 範本相關文章：

google-doc-to-do-list-用 Google 文件與客戶協作，處理待辦事項流程心得

以往一向用 Line 與客戶溝通，及處理各種架站或網頁相關需求的待辦事項，主要的好處是：

這是最多人使用的即時通
截圖方便，對溝通很重要(一圖勝過千言萬語)

不過每個階段要面對的瓶頸不太一樣，現在開始覺得 Line 不敷使用，當同時進行的案件量一多，查詢分散各處的對話資訊，成為一件瑣碎又麻煩的事。

有了這些不便後，開始尋找好的解決方案，於是想到曾用過的「Google 文件」，可以讓客戶一起協作待辦事項，個別主題的討論內容也都能集中在一起，不會像 Line 或是 Email 分散在各處，查找重要資訊變得方便許多，以下就來分享我的操作流程與心得。

(圖片出處: pexels.com)

一、建立索引及核取方塊

以「Google 文件」的名氣，應該不用特別介紹了，有需要的讀者可參考這篇「Google Docs全新協作功能上線，即時多人編修與對話通訊窗口」，以下直接進行處理待辦事項流程的操作。

1. 製作文件範本

一開始建立一份空白的待辦事項範本是必須的，可方便將來複製以及重複使用。

為每個待辦事項建立索引及核選方塊後，除了溝通過程可以用索引號讓雙方瞭解現在在討論哪個主題，而完成後也能使用「勾選」的功能，讓完成的項目、進度一目了然。

google-doc-to-do-list-1-用 Google 文件與客戶協作，處理待辦事項流程心得

上圖是一個處理待辦事項的 Goole 文件範本，每個項目都加上索引號。

針對不同的主題，可先建立大標題，複製從 #1 開始的序號，放在該大標題之下。

2. 序號製作方式

要產生從 1 開始的序號不難，利用 Excel 或 Google 試算表，滑鼠拖曳儲存格就能大量產生從 1 開始的序號，然後再複製到 Google 文件。

3. 核取方塊製作方式

每個項目要產生核取方塊就稍微麻煩一點，先用滑鼠選取所有剛剛複製過來的序號。

google-doc-to-do-list-2-用 Google 文件與客戶協作，處理待辦事項流程心得

接著如上圖：

A. 按「項目符號清單」右邊的小三角形按鈕
B. 選擇圖中大紅框的那一個，就是核取方塊了

完成後，所有的項目都會自動加上核取方塊。

二、建立註解

完成文件的內容後，按右上角的「分享」按鈕，將文件分享給要協作的對象(需要 Google 帳號)，並注意開放 "編輯" 的權限給對方(預設會開放此權限)，即可與對方同時編輯此文件。

接下來可利用非常方便的「註解」功能，與對方協作及溝通。

google-doc-to-do-list-4-用 Google 文件與客戶協作，處理待辦事項流程心得

任何編輯者，用滑鼠選取文字後，如上圖紅框，文件的右方會自動出現「註解」圖示，按下後即可進行註解。

google-doc-to-do-list-5-用 Google 文件與客戶協作，處理待辦事項流程心得

我們輸入註解內容後，所有協作者會自動收到這則註解的 email 通知，就知道這份文件有需要溝通的事項，不會漏了、或忘了回覆。

三、回覆註解

以協作者的角度，收到通知後，要怎麼處理註解、怎麼操作呢？一個文件的右側如果很多註解時，要如何看起呢？

google-doc-to-do-list-6-用 Google 文件與客戶協作，處理待辦事項流程心得

這方面 Google 文件做的很棒，有註解的文字，底色明顯會跟其他文字不同，很容易辨識。

如上圖，只要點擊左側的註解文字後，右側對應的註解，會立刻往左浮動，對齊該行文件內容，左上角有個「三角尖端」以別於其他註解，一眼就能看到該註解的所有對話討論串。

對應的註解除了往左移動外，還會浮現一個標示「回覆」的對話方塊，讓協作者輸入討論內容。

但是這個「回覆」對話方塊平常不會顯示，只有在這兩種情況下才會出現：

點擊左側的註解文字
直接點擊文件右側的任意一則註解

利用註解回覆功能，雙方就能像是使用即時通一樣，完成這個待辦事項的對話。而且好處是，同一個主題的對話，不會像即時通軟體一樣，四散於各處，事後往往要花費一番功夫才能找到。

四、標示完成

待辦事項完成後，我們之前建立的核取方塊，按下時並不會自動打勾，如果 Google 文件能有這功能就很方便了，那我們現在該怎麼辦呢？

google-doc-to-do-list-3-用 Google 文件與客戶協作，處理待辦事項流程心得

這部分的操作方式沒那麼直覺，請參考上圖並按以下流程：

A. 點第 1 下核取方塊，系統會自動選取全部的方塊
B. 必須再按第 2 下核取方塊，才是選取該項目
C. 對著方塊按滑鼠右鍵，終於看到上圖紅框的打勾圖案了
D. 按下打勾圖案，方塊會成為勾選的狀態

六、複製貼上圖片

溝通過程附上圖片可節省許多文字及時間。由於 Google 文件裡面的圖片，並不會佔用 Google Drive 的空間 (上限為 15G)，所以可以盡量插入圖片沒問題。

不過插入圖片其實挺麻煩的，要先儲存圖片、命名，然後在 Google 文件裡面按好幾次按鈕、選擇上傳的圖片...這個流程想到就很累。

為何 Line 很好用，就是他的截圖功能太方便，讓溝通非常的快速。那麼，Google 文件有沒有比較快的貼圖片流程，讓溝通比較方便呢？

1. 失敗的流程

以下是我測試後，失敗的貼圖片管道：

複製 Word 檔的圖片
使用 Line 截圖功能產生的圖片

複製了以上這兩種方式的圖片，在 Google 文件裡面貼上時，無法發生作用。

2. 成功的流程

以下是我測試後，可成功在 Google 文件直接貼圖的管道：

對網頁的圖片直接按右鍵複製
用 Evernote 截圖功能產生的圖片來複製
使用 Line 截圖功能產生的圖片，並發佈在 Line 以後，點擊該張圖片，按複製(這流程比較麻煩)

複製了以上這幾種方式的圖片，在 Google 文件就能成功貼上圖片了。

能夠直接貼圖的話，就不必走「上傳圖片」這樣麻煩的流程了。

七、小結

以上就是利用 Google 文件處理待辦事項，並與他人協作的幾個重要功能說明。等這份文件的專案或任務完成後，將來都能隨時查閱重要資訊、溝通歷程等等。

使用這套流程，不但比 Line、Email 溝通還要方便，且這份文件就等於一份「歸檔文件」，結案後不需再另外整理資料，真的省時又方便，非常推薦使用。

更多 Google Drive 相關文章：

常有讀者詢問 SEO 的問題，或是討論比較舊的 SEO 觀念，不過我寫的近 20 篇 SEO 相關文章，卻有半數以上在宣導「不要在意 SEO」這件事，為什麼呢？

雖然 WFU 不是 SEO 專家，不過我知道的概念是：

不用錢能得到的 SEO 知識，多半不會是關鍵性的要素。
我們有辦法判別 SEO 知識的真偽嗎？能夠知道這一則 SEO 資訊是否已經被淘汰嗎？
SEO 不是不需要加強，而是，現在真的是需要加強的時刻嗎？

如果寫部落格是當成一件怡情雅致的興趣，自然也不必在意 SEO，那麼就可以略過這一篇。

如果把部落格當作事業、品牌在經營的話，建議看一下本篇，瞭解部落格在什麼時候，才需要開始加強 SEO，不需過早投入這件事。

<< 請注意！本篇文章含會員加值文章內容，需點數兌換 >>

(圖片出處: 699pic.com)

一、經營部落格等同於創業

1. 創業 3 要素

如果有心要長期、永續經營部落格的話，我相信你會認同標題，經營部落格等同於 "創業"。

如果認同的話，那麼 "創業" 是一件上戰場廝殺的事，必須各方面都準備妥當，必須有足夠的專業，不然很快就陣亡，或是被市場淘汰。

想要在戰場勝出，必須先了解自己，創業三要素你贏過別人什麼：

資金
人脈
技術

2. 技術是關鍵

要知道，新創事業的成功率，如果我說存活者不到 10%，那算是非常客氣的說詞，有興趣可以 Google 相關數據。

如果 3 要素自認沒有贏過對手之處，那要怎麼成為市場上不到 10% 的生存者？

3 要素之中，「技術」，也可以說是「產品」，是另外兩項的根基，要先有產品、技術，再談其他兩項。這也就是說，創業的根本，在於你有沒有自認贏過他人的產品、技術。

五、總結

其實 SEO 需要知道的基本動作不多，只需要看這篇「Blogger 只要做到這幾件事, 就能輕鬆加強 SEO 搜尋排名」就夠了。

如果有餘力，就另外多看一篇「優化網站效能最關鍵的考量因素」，網站盡量少裝外掛、注意圖片尺寸這兩件事即可。

希望本篇文章的論述，可以讓站長們對 SEO 的注意力，迴轉到加強本職學能、精進文章內容、建立特色之上。

只要產品好，使用者自然會樂於幫忙宣傳，更快在市場上站穩腳步。等到名聲建立起來後，屆時就是真正需要開始優化網站的時刻。

更多 SEO 相關文章：

前陣子介紹了「Blogger 推出的全新自適應 RWD 官方範本」，有讀者提問新範本 SEO 的相關問題，這表示 Blogger 對 SEO 做了哪些加強，也是大家關注的事情。

那麼本篇就來整理一下，這個 RWD 範本對 SEO 下了什麼功夫、有什麼特別之處。

(圖片出處: 699pic.com)

一、HTML5 語意標籤

由於過去接到不少需求，想要將 Blogger 原本的範本內容，改為使用 HTML5 語意標籤。那麼第一個好消息是，Blogger 目前官方最新的範本內容，已經使用了不少 HTML5 標籤。

1. HTML5 特色

首先可大致瞭解一下 HTML4 與 HTML5 的差別，參考這篇「HTML 5 與 HTML4 的差異與特色」：

HTML4 多半使用 DIV 標籤來定義區塊，搜尋引擎很難瞭解該區塊的用途、性質。
HTML5 增加了許多新的標籤，看名稱就知道用途是什麼
例如 NAV 就是導覽列、ARTICLE 就是文章、ASIDE 就是側邊欄

除了我們自己閱讀網頁架構比較清楚之外，搜尋引擎爬資料時，也更能分辨資料的屬性，能製作更精確的索引。

2. 新舊範本差異

簡單地拿新舊範本來比較一下，以本站 WFU BLOG 為例，檢視了網頁原始碼後，以下這些 HTML5 標籤找不到，不過 RWD 範本可以看到：

NAV
ARTICLE

3. 修改注意事項

要將原範本內容改用 HTML5 標籤並不困難，但麻煩的是，要檢查所有相關的 CSS 是否會影響到。

因此除非 CSS 非常熟悉，建議別自己改 HTML5 標籤，免得網站版面大亂。

直接改用新的 RWD 範本、或是買現成的 HTML5 範本會比較建議且省事。

二、結構化資料標記

1. 新範本語法

之前寫過一篇「部落格如何處理 "結構化資料" 標記 + 修復錯誤訊息」，主要是因為 Blogger 原本範本中，使用的 "結構化資料標記" 語法，在測試工具中總是會出現許多錯誤訊息。

由於 "結構化資料標記" 語法種類非常多，標準也沒有統一，其實也不必在意這件事。不過對於新版 RWD 的使用來說，這一點倒是有好消息，因為 Blogger 採用了目前算是最新的格式：JSON-LD。

打開文章頁面的網頁原始碼，新的 RWD 範本會看到類似以下這一段文字：

<script type='application/ld+json'>{
"@context": "http://schema.org",
"@type": "BlogPosting",
"mainEntityOfPage": {
"@type": "WebPage",
"@id": "http://wfu-blog-backup.blogspot.com/2017/03/blogger-rwd.html"
},
"headline": "Blogger 推出全新自適應 RWD 官方範本及佈景主題&#65292;並支援行動裝置","description": "前幾天 Blogger 官方發佈了公告&#12300; Share your unique style with new Blogger themes &#12301;&#65292;從現在起後台可以套用的佈景主題&#65292;多了 4 個大分類&#65292;共 20 款新樣式可選擇&#12290; \n雖然款式很多&#65292;不過版面設計的邏輯都差不多&#65292;也可看成官方提供了一種 RWD(自適應&#8230;","datePublished": "2017-03-25T08:19:00+08:00",
"dateModified": "2017-04-03T08:19:29+08:00","image": {
"@type": "ImageObject","url": "https://3.bp.blogspot.com/-j_Nfsef6ri4/WNSi_pMKUtI/AAAAAAAAPV8/DN3WYhIDW68ZXWgTXosMdbuJEjSzIr7GgCLcB/w1200-h630-p-k-no-nu/blogger-official-rwd-template.jpg",
"height": 630,
"width": 1200},"publisher": {
"@type": "Organization",
"name": "Blogger",
"logo": {
"@type": "ImageObject",
"url": "https://lh3.googleusercontent.com/ULB6iBuCeTVvSjjjU1A-O8e9ZpVba6uvyhtiWRti_rBAs9yMYOFBujxriJRZ-A=h60",
"width": 206,
"height": 60
}
},"author": {
"@type": "Person",
"name": "Wayne Fu"
}
}</script>

這樣的 "結構化資料" 是由範本自動產生，我們無法在範本中看到、也無法修改。使用這樣的技術後，搜尋引擎爬資料會更方便快速，不必在散落各處的 HTML 標籤中，花費更多功夫才拼湊出這些文章的關鍵資訊。

以上簡單介紹這項新的技術，不準備深入說明艱深的 SEO 知識，想要瞭解更多的讀者，可參考：

整理好的投影片資料「Json ld 簡介」
或這篇「JSON-LD, 決定未來 SEO 的 25 項標準與通訊協定」

2. 自行製作語法

雖然這些新的語法看不到、也不能修改，不過既然從網頁原始碼能看到格式，那麼沒使用 RWD 範本的使用者，就能依樣畫葫蘆，在自己的範本相關位置，加入同樣的內容。

之前的文章提過，對於部落格而言，這個項目對 SEO 影響層面不大，就不詳細說明如何進行，大概舉例一下就好，請讀者自行舉一反三：

"@id" 的值為文章網址，在範本中可用 Blogger 語法標記 "<data:post.canonicalUrl/>" 來表示
"headline" 的值為文章標題，在範本中可用 "<data:post.title/>" 來表示
"description" 的值為文章搜尋說明，在範本中可用 "<data:blog.metaDescription/>" 來表示

有興趣瞭解更多 Blogger 標記，可參考「list of Blogger Layout Data Tags」。

三、自適應圖片尺寸

在 HTML5 規格中，IMG 標籤新增了一個屬性「SRCSET」，其作用是可以塞入同一張圖片、各種不同尺寸的連結網址，那麼瀏覽器就可根據不同尺寸的裝置，顯示最合適的一張圖片，可大大減少圖片下載的時間，也就能加快網頁載入速度。

關於這個屬性的語法說明，可參考這篇「用 srcset 屬性做簡單的 Responsive Image」。

在新版 RWD 範本的首頁，我也發現了「SRCSET」，以 WFU BLOG 的某張首頁圖片為例，語法長得像這樣：

<img alt='圖片' sizes='(min-width: 954px) 842px, (min-width: 801px) calc(100vw - 112px), calc(100vw - 64px)' src='https://2.bp.blogspot.com/-_cLN_Lf6wy4/WN3-71FfU3I/AAAAAAAAPXU/H476NwSy2Ts_L1QgOXHmkgGdE5YZRvnCgCLcB/s1600/blog-when-to-improve-seo.jpg' srcset='https://2.bp.blogspot.com/-_cLN_Lf6wy4/WN3-71FfU3I/AAAAAAAAPXU/H476NwSy2Ts_L1QgOXHmkgGdE5YZRvnCgCLcB/w256-h162-p-k-no-nu/blog-when-to-improve-seo.jpg 256w, https://2.bp.blogspot.com/-_cLN_Lf6wy4/WN3-71FfU3I/AAAAAAAAPXU/H476NwSy2Ts_L1QgOXHmkgGdE5YZRvnCgCLcB/w512-h325-p-k-no-nu/blog-when-to-improve-seo.jpg 512w, https://2.bp.blogspot.com/-_cLN_Lf6wy4/WN3-71FfU3I/AAAAAAAAPXU/H476NwSy2Ts_L1QgOXHmkgGdE5YZRvnCgCLcB/w945-h600-p-k-no-nu/blog-when-to-improve-seo.jpg 945w, https://2.bp.blogspot.com/-_cLN_Lf6wy4/WN3-71FfU3I/AAAAAAAAPXU/H476NwSy2Ts_L1QgOXHmkgGdE5YZRvnCgCLcB/w1684-h1069-p-k-no-nu/blog-when-to-improve-seo.jpg 1684w'/>

這項新作法真的很不錯，以前 Blogger 行動版採用的方式是，直接將圖片縮小為 280px，可參考這篇「加快 Blogger 行動版圖片載入速度的密技」，不過這方法適合手機螢幕直立時的顯示方式，因為橫擺之後，螢幕寬度將會遠大於 280px。而採用新作法後，各種螢幕尺寸都能有對應的圖片尺寸，會更有彈性。

很可惜的是，由於 Blogger 語法有先天上的限制，只能對文章封面圖自動產生 "SRCSET" 屬性，這也就是說，每篇文章最多只有第一張圖片，可以做到 "自適應圖片" 效果。

不過既然瞭解了原理，就能製作「自適應圖片語法產生器」。之前已經做過「Blogger 圖片語法轉換器」，之後再找時間來增加這項功能就好。

由於排程不少，不確定何時會進行，需要追蹤此功能的讀者，可訂閱本站最新文章。

四、小結

Blogger 新版範本的改變非常多，本篇這幾項是比較明顯、我有發現的，跟 SEO 比較有關的項目。

如果是想要專心寫作、沒時間把範本改來改去的站長，那麼就非常推薦直接使用新版的 RWD 範本，可省下不少煩惱 SEO 的時間。

更多 SEO 相關文章：

最近打開 Chrome 後，發現奇怪，怎麼變成英文版了！不但書籤都消失了，而且進入設定畫面後，直接顯示英文介面~~當下第一個念頭是，該不會被入侵了吧？

想想最近沒逛奇怪的網站，最有可能的原因八成是 Chrome 又改版了吧？檢查了一下版本，果然變成了 V.57。

因為過去經歷太多次 Chrome 自動更新後發生的麻煩事，這次決定一了百了，徹底關閉 Chrome 自動更新的功能。以下先大致說明不讓 Chrome 自動更新的流程，並順便整理多年來遇到的各種狀況，讓讀者瞭解 Chrome 自動更新會有多少地雷要踩！

(圖片出處: Chrome Official Website)

一、關閉自動更新的作法

不讓 Chrome 自動更新有多種作法，例如改登錄檔、刪除自動更新檔等，不過登錄檔可能會被更新、自動更新檔也可能再度產生，所以我覺得這篇「如何關掉 CHROME 自動更新」的作法比較好。

他的原理是，Google 設定了每天自動檢查更新的排程任務，從源頭直接終止排程任務，讓 Google 永遠無法啟動任務，會是最保險的方法。

上面的文章連結已經有詳細的圖文步驟，以下簡單整理 Win7 的操作流程：

控制台 → 系統及安全性 → "系統管理工具" 之下的 "排程工作"
在 "工作排程器程式庫" 找出所有 "GoogleUpdateTaskMachine" 相關項目，在視窗右邊的「動作」欄位可選擇 "停用"
滑鼠雙擊選擇的 "GoogleUpdateTaskMachine" 相關項目，會出現新視窗 → 選 "觸發程序" 欄位 → 編輯 → 取消「已啟用」

以後這些自動更新的任務就不會執行了。

二、變成英文版

如果讓 Chrome 自動更新的話，會遇到哪些麻煩事呢？以下一一介紹我遇過的狀況。

1. 為何出現英文

以前沒遇過這情形，這次是第一次遇到，Chrome 自動更新完了以後，變成了英文版。

而且麻煩的是，在設定頁面選取了中文語系後，不會自動切換顯示中文，後來重啟 Chrome 才終於跑出中文。

WFU 推測這個狀況是因為電腦前陣子使用了不一樣的 Chrome 安裝方式。

2. 多位使用者共用電腦

因為與家人共用電腦，所以 Windows 有多個使用者帳號。之前登入 Windows 非主要使用者的帳號使用 Chrome 時，會有異常狀況。

爬了網路文章後，才瞭解是因為非主要帳號使用 Chrome 時，會有無法得到 "系統管理員權限" 的問題。

那麼解決方法是，為不同的 Windows 帳號，個別安裝 Chrome，就能每個帳號都有 "系統管理員權限"。

但這種方式需要注意的是，Windows 非主要帳號必須使用 "離線安裝檔" 安裝，Chrome 官方提供的下載檔案在這裡：

https://www.google.com/intl/en/chrome/browser/desktop/index.html?standalone=1

3. 離線安裝檔是英文版本

但由於這個離線安裝檔是英文版，我認為安裝了後，覆蓋了系統原本的語系設定，導致這次更新後，直接判定原語系是英文，才會讓我更新後的 Chrome 成了英文版。

三、自動重新讀取分頁內容

原本 Chrome 為了節省記憶體的使用，因此自動將背景的分頁從記憶體中移除，等使用者切過去後，再重新讀取分頁內容。

但現在電腦配備越來越好，記憶體已經不會是大問題，新版的 Chrome 卻還是將這個節省記憶體的功能，放在預設值之中，導致我們在工作時，還要浪費時間等待分頁重新載入，等待的過程真的會想要砸電腦！

去年為了解決這件事，寫了這篇「防止 Chrome 自動重新讀取分頁內容」，現在不讓 Chrome 更新後就可不必再忍受這個預設功能。

四、各種設定 + 使用者消失

1. 設定跑掉

一般來說 Chrome 更新後，各種設定參數不會跑掉，不過可能這次我遇到變成英文版的事件，導致我必須重新調整設定頁面的所有參數。

2. 使用者消失

Chrome 可以讓多個使用者共用，一般來說 Chrome 的多重使用者功能，在更新後也不會消失，不過這次我比較倒楣，全部消失了。

在網路上找到這篇「Google Chrome 使用者設定檔消失救回」，也許是個有效的方法，但我救回的使用者卻無法辨識，所以只好一一手動重新新增使用者了。

五、多重帳號需要重新登入

如果同一個使用者，需要讀取多個 Gmail 帳號的話，可使用 Chrome 的切換帳號功能。

但是我每個一陣子，就會發生需要重新設定這些切換的帳號的狀況，因為莫名其妙這些帳號就是會消失。

現在回想起來，應該就是 Chrome 更新產生的現象，因為預設的帳號資料被洗掉了，只好重新設定一次。

六、各種外掛 + 網路服務重新登入

接續上一點的現象，導致所有需要登入的外掛、網路服務，資料也被洗掉了，所以都必須重新登入，例如：

檢查 email 的外掛「Checker Plus for Gmail™」會收不到信，必須一一重新登入每個 Gmail 帳號
行事曆外掛「Checker Plus for Google Calendar」需要重新取得授權
各種常使用的網路帳號 FB、「Feedly」、「Histats」等等，都要重新登入

還有更多沒有列出來的，每個服務都重新登入一次，光用想的都很累！

更別說還有兩階段驗證的各種服務，這些瑣事每陣子都要來上一輪，如果你也具有工程師思維的話，絕對會想要避免重複的事情發生。

七、佔用大量硬碟空間

以上這些是造成心理、生理上的損耗，接下來說說實質上的傷害。

由於使用 SSD 硬碟，剩餘空間必須越多越好，才能延長 SSD 的壽命。

然而，在 Chrome 不斷自動更新後，現在我發現了這些驚人的現象：

1. 閒置的使用者檔案

在「四、各種設定 + 使用者消失」，提到了我需要用到多個不同的使用者帳號，當然其中有不少是需要幫客戶處理而產生的帳號。

結果從以前到現在，Chrome 多次的更新後，因為消失的使用者帳號我必須重新建立，不斷累積在硬碟中的 Chrome 目錄下 profiles 資料夾，統計之後容量竟然高達好幾 G ！

如果不是這次的事件，我也不會去檢查閒置的使用者 profiles 資料夾，趕忙將這些再也讀取不到的資料夾全刪了。

2. 各種更新版本檔案

Chrome 更新後，依然會留著舊版的相關檔案，累積起來的容量也相當可怕。

因為這部分的檔案我一直有在刪除，就不知道以前到現在會累積多少容量。

總之不讓 Chrome 更新後，至少硬碟就不會持續佔用大量而無用的空間了。

八、結論

除了以上提到的這些現象，Chrome 改版還曾有一些 bug 是本篇沒提到的，例如造成中文輸入有問題。

總之看完本篇後，相信你也會覺得不需要常常更新 Chrome。

其實小改版之間的差異並不大，而改版之後要處理的後續、帶來的困擾卻是很多。因此我認為每隔幾年，手動更新一次 Chrome 就夠了，除非有非常明顯的差異，不然就不需要更新了。

更多 Chrome 相關文章：

最近看到這篇「Flickr容易被忽略的使用規則，小心你的帳號違規被停權」，想到前陣子有些從痞客邦搬到 Blogger 的站長，尋求本站協助搬家事宜時，發現有不少都是使用 Flickr 當圖床，而不是原有的痞客邦相簿。

其實不只搬家過來的新朋友，我知道很多 Blogger 站長也都是使用 Flickr。在這篇「其實 Google 相簿依然是 Picasa」我曾提醒過，Yahoo 被收購後使用 Flickr 是有風險的，建議站長把圖片搬到 Picasa，只是當時未深入這個主題。

那麼就藉這個機會，除了開頭文章連結提到的狀況，也一併整理所有使用 Flickr 會被停權、處罰、或圖片消失的案例，讓 Blogger 站長瞭解及引為借鏡。

一、圖片必須連回 Flickr 網站

1. 使用須知

首先這是 Flickr 的使用須知：

Flickr 社群指南

有興趣可點進去瞭解細節，不過因為內容很長，之後的案例會分別節錄官方相關的規定條款。

2. Link Back

所有條款裡面，這一條應該是最讓人訝異、且不曾知道的：

當你在 Flickr 之外使用 Flickr 內容時，請提供連回 Flickr 的連結。

你可以在其他網站上張貼存放在 Flickr 的內容。在外站使用存放於 Flickr.com 的內容時，所有 Flickr 相片和影片都必須附有連回原 Flickr 相片或影片頁面的連結，以便讓網友查閱內容與創作者的詳細資訊。

被停權的案例可參考這篇「FLICKR 貼圖一定要做回連 LINK BACK」，同時這篇也有說明要如何產生連結的語法。

3. 不要改語法就沒事？

這條規定我認為會違規的機率不大，因為大部分的使用者，應該不熟悉網頁語法，都會乖乖使用 Flickr 官方提供的語法來貼圖。

可能會違規的，反而是熟悉網頁語法的人，自行複製了圖片網址就拿來貼 IMG 標籤語法，但因不知道要加上連結的規定，結果就會被刪帳號。

不過這件事有個盲點，圖片網址不是只有擁有者可以複製，任何人都可以複製，那麼若有人盜連了圖片網址，而沒有使用連回 Flickr 的語法，如果因為這樣而違規的話，究竟要處罰誰呢？

二、各種圖片沒加連結的狀況

1. 使用 API 取得圖片網址

接續上一個主題，WFU 研究了一下，其實沒有 Link Back 的情況，是超乎想像的多，這篇「關於外連圖片違反規定」提出了一些可能性：

最近用twango又發現twango有一個新功能可以看你或朋友在flickr裡面的圖片，而裡面取得的flickr圖片也沒有做link back。

或許使用api取得的圖片沒有這規定或是怎樣這我不清楚

今天flickr的圖片網址都是公開的...若是被不認識的人將圖片拿去使用，而未照規定加上link back或是有其它違規，那是不是照片本人仍然是得承受這個違規，甚至接受處罰呢？

這的確是個模糊地帶，用 API 取得圖片網址時，不一定有 Link Back 連結，這狀況不曉得圖片擁有者是否會被處罰。

2. 自動部落格

這件事再延伸下去似乎會追究不完，相信站長們都知道有人專門寫程式爬別人的網站，產生一種叫做 Autoblog 的自動部落格。

那麼這些網站爬了使用 Flickr 當圖床的部落格，並且用程式將連結去掉之後，不就成為違規狀態，而且還無法知道是誰爬了我們的網站？

3. 農場網站

更多的是春風吹又生的農場網站，有人專門複製他人部落格文章，貼到農場網站賺收益，圖片可能也是直接盜連 Flickr，除非我們很努力，才有可能找到所有被盜連的 Flickr 圖片，來防止自己的帳號違規。

所以我的感覺是，光是本篇的第一個「圖片必須連回 Flickr 網站」規定，就不知多少 Flickr 使用者要心驚膽戰了。

三、流量太大 + 網站被封鎖

1. 網站圖片看不到

Flickr 雖然提供免費服務，但畢竟不是佛心事業，不可能一直提供無限制的流量，否則燒的錢要如何跟股東交代。

因此規定裡面有這一條：

你的上傳行為疑似影響 Flickr 伺服器之穩定時，我們將發出警告，或逕行刪除帳號。

所謂 "影響伺服器之穩定" 就是在說流量太大了，伺服器負荷不了的意思。造成的結果可能被警告、也可能直接停權，這真的滿狠的！

這個案例「Flickr 相簿絕對不是一個安全的圖床」，案主自認沒有違規，但問 Flickr 為何違規也得不到答案，真的會讓人很無助。

最後他自行扮演柯南，經過大量的交叉測試後，發現是網站被 Flickr 封鎖，所以看不到所有的圖片，而同樣的圖片放在其他網站，是看得到的。

2. 流量太大

WFU 充當鍵盤柯南來分析一下這個案例，如果是「二、各種圖片沒加連結的狀況」，案主的圖片被農場或他人盜連而違規，不至於只有案主的網站看不到圖片。

因為案主的網站流量比其他網站大(留言有提到)，那麼只處罰案主、不處罰其他地方，代表真正的原因就是該網站的流量太大，Flickr 為了減少伺服器負荷而封鎖該網站。

3. 你的網站是否知名？

這個案例也是一個相當大的警訊，站長們寫部落格是不是都想要有出名的一天？

如果出名的那一天，就是 Flickr 圖片開始被封鎖的那一天，網站整個開天窗，寫信也不理你，這樣子還敢用 Flickr 當作圖床嗎？

四、未使用攝影圖片

有幾條官方規定，細讀之下你會覺得不寒而慄：

只能上傳你自己創作的內容

一經發現你的 Flickr帳號係用以儲存網頁上的圖像元素、標誌或橫幅廣告等非攝影作品性質的圖像...我們將發出警告，或逕行刪除帳號

意思就是說，任何不是 "自己拍照" 的影像，都不能上傳到 Flickr！

所以只要是在電腦上產生的圖案、截圖等等，都是違規的，舉例來說，本站 WFU BLOG 使用了近 2000 張圖，幾乎沒幾張圖片可以上傳到 Flickr，包括 CC0 圖片也不行，因為不是我自己拍的圖片。

因這個規定而被停權的案例相當知名，可參考這篇「再見，免費資源網路社群！」，在沒有預警、沒有通知的情況下，帳號就不見、圖片也全部消失，更何況站長 Pseric 用的還是 Flickr Pro 付費帳號。

其實就算不是因為這個規定，"免費資源網路社群" 由於太出名，遲早也會因為流量過大而被封鎖。但根據「三、流量太大 + 網站被封鎖」，至少不會被無預警停權，而有時間搶救圖片就是了。

五、網域被封鎖 + 圖片消失

前面我們看到了「網站被封鎖」的案例，但接下來要看的，是更為悲慘的事件。實際上我們什麼事都沒有做，也沒有違規，結果所有網站的圖片都看不到了。

為何Xuite的Blog抓不到Flickr的照片

這件事發生在 Xuite，整個網域下的所有部落格，都看不到 Flickr 圖片。

其實 Flickr 官方對這件事的處理跟「三、流量太大 + 網站被封鎖」是類似的，因為被封鎖的那個網站是自架站，整個網域是他個人的，Flickr 等於是封鎖了該網域。

而這則事件，是某個 Xuite 部落格站長，因為沒有將圖片連回 Flickr 網站，所以被 Flickr 處罰。

而處罰的方式是，將他的部落格整個網域封鎖！

問題是 Xuite 部落格網域一旦被封鎖，所有使用 Flickr 圖片的站長也等於被連坐處分，全部都看不到圖片了！

這是很可怕的一件事，使用 Blogger 而沒有自訂網域的站長們，千萬不要使用 Flickr 當圖床，萬一有某個人違規，導致整個 blogspot.com 網域被處罰就糟了！

六、適合部落格的圖床

1. 不要用外部圖床

看了以上這麼多案例，我認為部落格站長，不要使用任何免費的外部圖床比較好，就像 imgur 雖然方便，但最好也不要用在自己的部落格，除非你把使用規則研究地十分透徹。

每個部落格都會提供原生的圖床可使用，就像痞客邦有自己的相簿、Blogger 有 Picasa 等等。由於使用自己的伺服器，速度也會比較快，出了問題也知道要跟誰反應，才不會像本篇的某些案例，弄半天找不到事主。

2. Picasa 圖床的優點

對於 Blogger 使用者，簡單列幾點使用 Picasa 當圖床的優點：

流量：完全不用擔心這件事，例如知名的「電腦玩物」，流量如此巨大之下，可曾聽過網站的圖片開天窗？
縮圖：文章可自動產生縮圖，用於各種網站工具，例如「最新文章」、「熱門文章」、「隨機文章」
自適應圖片：前陣子官方推出 RWD 範本，可參考「Blogger 新版 RWD 範本」→「三、自適應圖片尺寸」，只有 Picasa 圖床能做到用程式產生各種尺寸的自適應圖片。

光就「自適應圖片」這一點，Picasa 就可稱為當今最棒的圖床，沒有之一，自架站也很難做到這件事。

七、結論

簡單為這一篇做個總結：

部落格請使用原生的圖床
只要想長久經營網站的話，請勿使用 Flickr、或任何外部的免費圖床

至於有沒有需要為了圖片安全，而另外花錢架站或買圖床？我的完整看法可參考「Blogger 是否搬家到 Wordpress 的比較﹍部落格經營觀念釐清」。

部落格在什麼階段就做什麼事情，當需求出現的時候，就滿足當時的需求。只要使用部落格原生的圖床，就不會有安全上的顧慮。而將來需要自架站時，圖片再搬到自己空間就行了。

其他部落格若需要搬到 Blogger 平台，圖片也是能完整移轉到 Picasa 圖床，若有相關需求可參考「協助痞客邦搬家到 Blogger 流程紀錄 + 常見問題解決」。

更多 Picasa 相關文章：

fb-share-homepage-thumbnail-網站首頁如果被分享到 FB，看到縮圖效果不佳要如何設計版面？

前幾天意外收到 FB 通知，得知本站首頁被分享到 Facebook，原來是之前協助痞客邦搬家及架站的案主，在她的粉絲團推薦我的網站及服務。

網站被分享到 FB 自然是很高興，但連過去畫面一打開，我的心瞬間涼了一半──首頁縮圖的效果實在有夠掉漆！

為了顧及分享到 FB 的效果，我的文章封面圖會花一定的時間構思(使用「CC0 高畫質圖片搜尋引擎」)，不過倒沒想到有人會分享 WFU BLOG 首頁這件事。

所以這次真的有糗到，趕緊研究一下怎麼讓首頁被分享時，版面效果能夠看起來比較專業，那麼請見本篇的心得分享及各種案例整理。

一、走鐘的首頁封面圖

出醜的畫面用自己來舉例就好：

範例 1

fb-share-homepage-thumbnail-1-網站首頁如果被分享到 FB，看到縮圖效果不佳要如何設計版面？

上圖紅框就是本站首頁被分享後的縮圖效果：

沒想到網站 Logo 圖案被放大到這樣的程度，覺得失去美感
縮圖被放大並強制裁切為大約 1.9：1 的比例，頭跟尾都殘缺了
同時左右也不對稱，一整個就是不專業...

原本應該是一件好事，但這樣的圖案被分享出去，應該變成反效果了吧～~ 😂

範例 2

有了前車之鑒，趕緊檢查一下分站「CC0 免費圖庫搜尋引擎」的首頁分享效果：

fb-share-homepage-thumbnail-2-網站首頁如果被分享到 FB，看到縮圖效果不佳要如何設計版面？

結果又出包了，上圖紅框的縮圖，可看到最重要的網站標題名稱「CC0 免費圖庫搜尋引擎」被斬首了，真是有些難為情。

這則貼文往下看，發現還被分享了十幾次，覺得臉越來越掛不住...就由 WFU 的慘痛教訓，讓站長們引以為戒，趕快找時間整頓一下自己的首頁縮圖吧！

二、設計首頁用圖

1. 注意裁切比例

如果分享到 FB 顯示的縮圖不想被裁切，根據「分享文章到 Facebook 的 Meta 設定」→「Q5：怎麼顯示大尺寸縮圖？」：

請至少使用 484 x 252 以上的尺寸
長寬比例請自行裁切為 1.9:1 左右，免得被系統自動裁切

2. 高畫質圖片

首頁用圖是網站的門面，自然要使用高畫質圖片。

fb-share-homepage-thumbnail-3-網站首頁如果被分享到 FB，看到縮圖效果不佳要如何設計版面？

如果有好的攝影師，當然使用自己拍的照片最好，除了獨一無二之外，也能彰顯自己網站的品牌。

fb-share-homepage-thumbnail-4-網站首頁如果被分享到 FB，看到縮圖效果不佳要如何設計版面？

自己拍出代表網站特色的照片，也不是說多簡單的事，那麼可使用「CC0 高畫質圖片搜尋引擎」來找到高水準、高畫質的圖片。

3. 彰顯網站精神

如果有設計能力的話自然是最好了，幫首頁用圖加工一下，被分享的時候，更能增加讀者印象、以及擴散能力。

fb-share-homepage-thumbnail-5-網站首頁如果被分享到 FB，看到縮圖效果不佳要如何設計版面？

我認為這個首頁圖做得很用心，該有的元素、該傳達的訊息都放進這張圖了，代表站長有特別為首頁被分享到 FB 這件事，獨立設計這張用圖。

fb-share-homepage-thumbnail-6-網站首頁如果被分享到 FB，看到縮圖效果不佳要如何設計版面？

上圖是另一個範例，圖片有為首頁分享這件事，特別加工處理過。

三、強調網站圖示

除了使用 1.9:1 比例的高畫質圖片，首頁縮圖還有另一種版面呈現的選擇──正方形。

1. 正方形圖示

fb-share-homepage-thumbnail-7-網站首頁如果被分享到 FB，看到縮圖效果不佳要如何設計版面？

知名的 "免費資源網路社群" 版面不太一樣，上圖可看到使用比較小、1:1 比例的正方形圖片，那麼右半邊的空間就大了，可以顯示很長的網站標題、網站敘述。

2. 製作網站圖示

fb-share-homepage-thumbnail-8-網站首頁如果被分享到 FB，看到縮圖效果不佳要如何設計版面？

但是這樣的版面，不一定適合所有網站，只適合有專門設計 Logo 的網站，就像上圖的範例。

其實 WFU 滿建議特別設計一個符合網站精神的圖示，不單為了分享 FB 時使用，也可直接放在網站標頭的區塊。

如果是準備長期經營的部落格，符合網站精神的 Logo 是很好的記憶點，這個品牌比較容易被讀者記住，就像市面上的知名品牌，"咬了一口的蘋果" 圖像早已深植人心。

3. 圖示大小

需要注意的是，這個正方形圖示，不可以做得太大，否則就像「一、走鐘的首頁封面圖」→「範例 1」，會被 FB 拉撐為 1.9:1，並且截頭去尾。

最好是使用 400px 以下的尺寸，例如 300x300 px，就會自動形成以上幾個範例圖的版面，左邊是正方形圖示，右邊是網站標題及網站描述。

4. 大大的 Logo 圖示

把品牌圖示做成 1.9:1 的大圖好不好呢？我看到下面這個範例：

fb-share-homepage-thumbnail-9-網站首頁如果被分享到 FB，看到縮圖效果不佳要如何設計版面？

圖案很簡潔、有設計感，雖然這個圖示可以用小正方形放左邊就好，不過為何要做成 1.9:1，其實是有深一層的考量。

這樣的設計，是為了保留彈性，當被裁切成 1:1 的比例時，用正方形也能完整呈現網站 Logo。

而什麼時候會被 FB 裁切成正方形呢？請繼續往下看。

五、FB 留言的縮圖效果

網站首頁被分享到 FB 貼文，比例上其實還是比較少的，更多的情況是，在 FB 的留言討論串之中，有人想到我們的網站，順手貼了首頁網址。

在這個情況下，留言會產生的縮圖及摘要效果，是類似正方形縮圖的版面。那麼使用網站 logo 的首頁，就會比較吃香了。

fb-share-homepage-thumbnail-11-網站首頁如果被分享到 FB，看到縮圖效果不佳要如何設計版面？

上圖都是前面出現過的網站首頁，使用留言貼上首頁連結來測試：

A. 使用設計過的正方形圖示，效果很好。

B. 原本 1.9:1 的圖案被裁切了，導致網站名稱不完整。

C. 本站重新修改正方形圖示的比例，這樣子看起來好多了。

另外需要補充的是，B 的網站描述如果不想被切斷，需要參考「分享文章到 Facebook 的 Meta 設定」→「Q3：我的摘要敘述好像被切斷了？」，必須去除所有描述文字使用的空格。

五、並非所有部落格都能設定首頁效果

瞭解以上概念後，在說明如何設定 META 語法之前，必須先跟讀者說明，台灣的部落格平台無法單獨為首頁設定 META 語法，自然也無法設定要顯示什麼圖片。

fb-share-homepage-thumbnail-10-網站首頁如果被分享到 FB，看到縮圖效果不佳要如何設計版面？

上圖任意選擇一個痞客邦網站的首頁做測試，可看到分享到 FB 時，紅框處必須手動選擇一張圖片。

而且看起來是從首頁的文章抓圖片來顯示，代表網站隨著文章的更新，每次分享首頁時，出現的圖片都是不一樣的。

六、Blogger 設定語法

1. META 語法設定

能夠自訂網站首頁的分享效果，主要是 Blogger 平台跟自架站了，以下說明 Blogger 的語法設定。

會看本篇的讀者，相信已經看過「分享文章到 Facebook 的 Meta 設定」→「Q1：如何讓標題及縮圖正常顯示？」。

這裡提一下怎麼特別處理首頁分享到 FB 的設定，請到後台「主題」→「編輯 HTML」，游標點進範本區塊，按 Ctrl-F 搜尋範本中搜尋以下字串：

<b:include data='blog' name='all-head-content'/>

找到後，在下一行插入以下內容：

<!-- FB OG 設定-->
<meta expr:content='data:blog.title' property='og:site_name' />
<meta expr:content='data:blog.metaDescription' itemprop='description' property='og:description' />
<!-- FB OG 設定非文章頁面使用-->
<b:if cond='data:blog.pageType != "item"'>
<meta content='blog' property='og:type' />
<meta content='填入想要顯示的網站標題' property='og:title' />
<meta content='填入圖片網址' itemprop='image' property='og:image' />
<b:else/>
這裡是你原本的語法設定 作用在文章頁面
</b:if>
<!-- -->

解釋一下以上的 Meta 設定內容：

FB OG 設定非文章頁面使用這一行以上的內容，是所有頁面共用的設定。
FB OG 設定非文章頁面使用這一行到 b:else之間的內容，可以讓非文章頁面生效，也包括首頁。
b:else到 b:if之間，放你原本的設定內容。這些內容若跟共用的設定有重複，則可刪除。
紅色字串請修改，也請填入自己為首頁設計過的圖片網址。

2. 效果

那麼展示一下本站及分站修改後，首頁分享到 FB 的效果畫面，看起來順眼多了：

fb-share-homepage-thumbnail-12-網站首頁如果被分享到 FB，看到縮圖效果不佳要如何設計版面？

3. 清除 FB 快取

修改完範本以後，記得到「分享文章到 Facebook 的 Meta 設定」→「Q7：更改後 FB 還是顯示原來的資訊？」，使用官方的清快取工具，更新首頁網址的快取資訊，分享到 FB 顯示的資訊就沒問題了。

更多 Facebook 相關文章：

fb-fan-page-increase-like-count-FB 粉絲團快速互助增加按讚數攻略﹍避免經營初期的尷尬

其實本站不太在意各種數據的累積，因為主要流量由搜尋引擎而來，代表有問題、有需求的訪客才會找上本站。而且這裡是我的筆記資料庫，主要是分享給有相同需求的人參考。

只不過最近製作分站「CC0 免費圖庫搜尋引擎」的 Facebook 粉絲團，發現一件事滿尷尬的，因為 WFU BLOG 雖然經營很久了，將近有 7 年，而分站 "CC0 免費圖庫搜尋引擎" 還不滿 2 年，感覺上卻比主站有知名度多了。

這是當初始料未及的事，所以一開始並沒有為分站設立粉絲團，結果卻變成，現在才想要成立分站粉絲團的話，就會發生 "明明網站有知名度，粉絲團人數卻是個位數" 這樣的窘境。

因此 WFU 研究了一下快速累積粉絲團按讚數的 "短期" 攻略，本篇紀錄了這個過程的筆記與心得，除了將來需要經營新的粉絲團時可以直接套用，有相同需求的讀者也能按表操課，減少經營初期花費的時間與尷尬處境。

以下先說明原理，想直接進行可跳至「三、準備動作」。

一、為何需要快速提高粉絲團按讚數

1. 只建議短期使用

首先強調一下，我只建議在 1 ~ 2 天內完成這件事。這樣的事如果做太多，會有很多壞處，例如：

養成投機的習慣
會被 FB 制約，受到短期內 FB 不斷送來通知訊息的控制，當沒收到通知時可能會不自在
粉絲都是洗來的，沒什麼意義，粉絲團不具擴散能力

2. 按讚數過低的缺點

不理會 "按讚數過低" 這樣的窘境也是不太現實的事，實際上粉絲團按讚數從 1 自然地累積到 100 需要非常長久的時間，因為越低的數值會讓粉絲越不敢按讚，他們可能對自己的認同產生質疑。

WFU BLOG 的粉絲團從頭到尾採自然累積，沒有要求過任何人情灌水，結果是，在這篇「FB 粉絲團簡易安裝法及應用方式」可看到，在 2015 年 11 月左右，累積了將近 6 年的按讚數為 137。

而目前 2017 年 2 月左右的按讚數，則來到了 750 (可看本文開頭的封面圖)，短短 1 年初頭的時間，成長數量有好幾倍，可見西瓜效應滿大的。

3. 增加粉絲的信心

從本站上述的實例可看到，粉絲團按讚數如果起始值從 100 開始計算(當然，FB 不會同意的~)，在心裡層面上，可以有效降低粉絲對自己的質疑，而勇於按讚、推薦這個粉絲團。

沒用過 "CC0 免費圖庫搜尋引擎" 的新使用者，看到粉絲團人數是個位數，說不定認為是個阿撒不魯的網站，那麼反而壞了聲譽、造成反效果。

因此，雖然這是個造假的行為，但我認為想辦法讓粉絲團按讚數的起始值為 100，算是必要之惡，只要站長們不要走火入魔就好了。

二、剔除無效方案

如果有經費的話，花錢買讚是最快的方法，不過網路交易需要自行徵信，請小心進行。

免費增加按讚數的唯一方法，就是互相按讚，需要有媒合的平台，以下列出我踩過的坑，可避免重蹈覆策：

1. linkspeedup

在網路上搜尋了一些資料，最熱門、最多教學的是國外網友做的服務，叫做「linkspeedup」，他的原理是，你幫別人按讚，可以得到一定的點數，然後利用你得到的點數，可以拿來購買別人幫你按讚的額度。

這個構想很好，而且寫成工具將彼此互相按讚的過程自動化執行，唯一的缺點是──這個網站已經關閉了。

2. Hitman

跟 linkspeedup 類似，國內有網友建立了「Hitman」這個網站：

http://fans-event.com/

他也是個媒合平台，協助粉絲團彼此之間按讚。這個網站的特色還有，可以互相洗流量，也就是讓網站可以造假瀏覽數。一般網站當然用不到這樣的功能，但某些部落格、網站需要接案的話，廠商會要求提供人氣之類的數據，為了增加帳面數字，那麼就會用到這個網站的服務了。

直接說結論，在這網站測試了約一個小時，沒有半個人幫我按讚，顯示這網站聚集的人氣不夠，於是果斷放棄這個平台，建議不要使用這網站來累積粉絲團按讚數。

三、準備動作

回過頭來，粉絲團累積按讚數，最有效的方法還是要回歸「FB 按讚互助社團」這樣的平台，本文會提供這類 FB 社團的操作心得。

1. 準備帳號

在開始之前，為了節省時間，需要先準備 2 個閒置的 FB 帳號，或是跟家人借帳號來用。

準備多個帳號的用意為，每個帳號每隔一段時間、或每天能對粉絲團按讚的次數，是有額度限制的。當按超過之後，就會被 FB 封鎖好幾天，不能按讚。

由於我的目標是 100 個讚，其實 1~2 個帳號已經足夠。

2. 加入相關社團

根據這篇「14個交換讚的好社團，快速衝讚!」，作者整理了十幾個媒合互相按讚的 FB 社團，請進入這篇文章，點開這些社團網址，全部加入。

全部加入的意思不是要你在每個社團都進行操作，這樣子會把自己搞到累趴。這用意是看哪個社團先核准加入，就可以從該社團開始進行。

以我為例，要衝 100 個讚其實從先核准的第 1 ~ 2 個社團開始進行就夠了。

四、操作流程

1. 開新討論串

加入社團後，最快累積粉絲團按讚數的方法，就是開新的貼文。

以下是貼文範例，複製貼上、修改粉絲團網址即可：

活動名稱： 粉絲專頁按讚 你點讚 我必回讚 永不回收讚
活動時間： 無限期
活動辦法： 一讚回一讚
按讚網址： https://www.facebook.com/cc0.wfublog

貼文的效果大致像這樣：

fb-fan-page-increase-like-count-1-FB 粉絲團快速互助增加按讚數攻略﹍避免經營初期的尷尬

FB 會自動產生粉絲專頁的縮圖版面，讓其他人按讚。

所以接下來就等著別人來按讚，然後我們回按別人的粉絲團即可。

2. 幫別人按讚

除了被動等別人按讚，我們也可主動幫別人按讚。例如這個粉絲團：

fb-fan-page-increase-like-count-2-FB 粉絲團快速互助增加按讚數攻略﹍避免經營初期的尷尬

這個可能是反例，因為一般都是粉絲團交換按讚，但這個明確表示他不幫你粉絲團按讚，只幫你內文、相片按讚，所以互助之前需要注意一下說明文字。

沒關係我們就先當作粉絲團交換按讚時要如何處理，先看一下目前已經有幾個讚了，例如上圖是 1968，那麼我們按過就會成為 1969，所以按完讚後，我們可以這樣留言：

1969 已讚 https://www.facebook.com/cc0.wfublog
先標示自己是第幾個讚，然後留下粉絲團網址，讓對方可以回讚。沒留網址就等於白做工了喔！

標示自己第幾個按讚，主要因為有的人會檢查是否真的有按。

3. 操作心得

等一段時間後，就會陸續收到別人幫我們按讚的通知。不過不用急著回按，每幾個小時一次處理就好，批次進行做事會比較有效率，例如早、中、晚各一次。
第一次進行時，盡量多幫別人的粉絲團按讚、回覆，總之在互助社團的討論區畫面一直往下捲，看到沒按過的粉絲團就按、以及回覆，就對了。
總之按到累為止，或是按到被 FB 封鎖為止。
不想太快被封鎖，自己抓一下間格時間，按讚不要太密集。
如果需要超過 100 個讚，那麼可以從核准的第二個社團，重複一樣的流程。

五、後續動作

1. 切換帳號

第 1 天、第 1 個帳號，按了一段時間後就看到以下畫面：

fb-fan-page-increase-like-count-3-FB 粉絲團快速互助增加按讚數攻略﹍避免經營初期的尷尬

FB 封鎖了對專頁按讚的功能，這是沒辦法的事，接下來必須換第 2 個帳號上場。

為了操作方便，一開始時，第 2 個帳號最好跟第 1 個帳號，同時申請加入所有社團，以免第 2 個帳號到時進不了第 1 個帳號的社團，無法接下後續流程。

2. 開始還人情

隔天早上一覺醒來後，不到 24 小時發現已經累積超過 120 個讚了，實在超乎預期。

但我們不能達到目標後就拍拍屁股走人，別人幫我們按了讚，自然得一個個還人情回去，必須檢查我們的貼文，有哪些需要回覆的、還沒回按的專頁，一一處理後回覆、感謝對方。

3. 刪除貼文

相信別人對我們按讚，我們都會心存感謝，沒幫對方按讚，心理也會過意不去。但只要我們貼文存在於社團的一天，就會一直收到按讚通知，必須一直花時間回按。

所以我等貼文待滿一天後，決定立即刪除，一共累積了 190 個讚：

右上角的倒三角形，有選項可以刪除自己的貼文。

刪除之後雖然無法再快速累積讚，但目標早已達到，而且日後就不用再還人情，可節省回按的時間。

六、補充心得

1. 節省時間的操作

雖然我幫別人按讚時，會標示第幾個讚，方便別人檢查，但我自己並不會去檢查別人有沒有幫我按讚。只要有留言，我一律會回按。

這麼做當然會有一點風險，可能有的人並沒真的按讚。但，我相信會從事互助行為的，多數是抱著感謝的心態，所以少數沒真的點讚的，我並不在意數量有多少，畢竟只是很少的比例，沒有必要為了這樣的比例，而浪費自己寶貴的時間。

相信有按本篇我的攻略流程，絕對可以用很少的時間，換來超乎預期的讚數。

2. 特殊要求

互助社團的貼文看多了之後，發現還有滿多特殊的需求，例如有人除了粉絲團需要讚，也會要求交換貼文按讚、相片按讚等等。

遇到貼文按讚的就比較麻煩，對方都已經幫我把粉絲團每篇文章都讚過一輪，我不幫對方也點過一遍實在說不過去，這種的就比較浪費時間。

如果想節省時間的話，也許在我們的貼文需要註明，只交換粉絲專頁的讚，不交換內文的讚等等這類字句。

3. 灌票部隊

除了按讚之外，我還遇到幾個更特殊的，對方幫我按讚後，留網址希望我幫忙投票，或幫忙做其他事。

基於互助、互惠的原則，對方已經先幫我達到要求了，不好意思不幫他。幫忙投票是小事，但我想到的，是更為嚴重的事情。

我認為粉絲團互相按讚不是什麼了不起的事，但很多網路活動，可能是有獎金、獎品、或是要決定名次的話，我會建議讀者能不要參加這類活動，就不要參加。

從要求我幫忙投票這件事就可知道，網路上有一批專業的達人，知道如何藉由各種管道來灌票、造假，一般人要投票投贏專業部隊，是談何容易的事，你連粉絲團抽獎活動都抽不贏他們的。所以除非你也是 pro 等級，還是遠離這些活動，可以節省自己很多時間的。

更多 Facebook 相關技巧：

blogger-not-display-all-labels-讓 Blogger 只顯示特定數量的標籤

協助架站時遇過幾個案例，為了版面美觀的緣故，案主不希望顯示所有的標籤。

仔細想想也是滿合理的，在首頁或標籤頁面，若某些文章設定了十多個標籤，全部顯示出來的確太過雜亂。那麼可以考慮只顯示 1 個或 2 個標籤就好，進入文章頁面時，再顯示全部的標籤。

不過這件事並沒有想像中簡單，需要對 Blogger 語法非常熟悉才行，弄不好可能會把網站改壞。建議有一定的 Blogger 修改實力再看本篇，初學者可能別自己來，交給專家處理比較好。

(圖片出處: stocksnap.io)

一、各種案例

1. 只顯示一行的寬度

blogger-not-display-all-labels-1-讓 Blogger 只顯示特定數量的標籤

上圖的版型，紅框處標籤太多時會超過一行的寬度，因此可採用這篇「讓標題過長的文字自動省略」的 CSS 語法技巧，讓標籤文字不會超過一行，並出現省略號。

2. 只顯示 1 個標籤

blogger-not-display-all-labels-2-讓 Blogger 只顯示特定數量的標籤

上圖的版型，紅框處刻意只顯示 1 個標籤，避免標籤太多時，會擠壓到右側的社群圖示，造成版面異常。

3. 只顯示 2 個標籤

blogger-not-display-all-labels-3-讓 Blogger 只顯示特定數量的標籤

上圖的版型，一行的寬度內要擠入作者、標籤、留言數量等資訊，那麼紅框處刻意只顯示 2 個標籤，可保持版面的美觀。

二、利用 CSS 隱藏標籤

1. 偽類語法

利用 CSS 的偽類 :nth-child可以只顯示前幾個標籤，將剩餘的標籤全部隱藏起來。

如果使用 Blogger 官方範本的話，標籤位於 .post-labels 的區塊之中。

.post-labels a:nth-child(n+3){display: none;}
在範本中增加以上 CSS 語法，可以只顯示前 2 個標籤，將第 3 個以後的標籤全部隱藏起來。

2. 逗號問題

但是 Blogger 預設會將每個標籤名稱，以小寫逗號 "," 隔開，那麼使用 CSS 技巧來隱藏標籤的話，無法一併隱藏小寫逗號，會造成版面不美觀。

3. 去除逗號

如果熟悉 Blogger 語法的話，可以找到範本中小寫逗號的位置，去除這個小寫逗號，算是一個變通的方案。

經由這個處理方式呈現的效果，可參考「一、各種案例」→「2. 只顯示 1 個標籤」

三、修改 Blogger 語法

大部分的版面，標籤還是需要有分隔的符號，閱讀起來比較清楚易懂。為了解決逗號的問題，最好是從修改 Blogger 語法下手。

如果不熟悉 Blogger 範本的話，修改前請勿必先閱讀「備份範本的訣竅」系列文章。

同時最好具備一定的修改功力，因為標籤的語法在範本中可能會找到很多組，要確定你知道改的是哪一組。

標籤的相關語法，在範本中可找到類似以下：

<b:loop values='data:post.labels' var='label'>
<a expr:href='data:label.url' rel='tag'>
<data:label.name/>
</a>
<b:if cond='not data:label.isLast'>,</b:if>
</b:loop>

把以上程式碼改成以下：

紅色數字 2 代表只顯示前 2 個標籤
藍色數字 1 代表第 1 個以後的小寫逗號都不顯示
想要顯示不同數量的標籤，將這兩個數字改為自訂數字即可。

經由這個處理方式呈現的效果，可參考「一、各種案例」→「3. 只顯示 2 個標籤」。

更多 Blogger 相關技巧：

這個「表情符號輸入工具」可以快速找到各種需要的 Unicode 表情圖案，方便留言、寫文章或是即時通使用。

所有圖案都是特別篩選過，可以在各種平台正常顯示。同時操作很簡單，後面會有詳細介紹。

一、表情符號輸入小幫手

Emoji 表情符號輸入小幫手

點擊圖示後會自動複製到剪貼簿，再按 Ctrl-V 即可貼上

簡易操作說明：

共有五種分類：
- 表情+人物
- 圖案+動植物
- 物品+食物
- 各種活動
- 雜項
點選分頁圖示後，可顯示該分類的所有圖案
點擊圖案後，會自動複製，即可按 Ctrl-V貼到要顯示的地方。

二、其他工具

輸入表情圖案不是簡單的事，因為數量龐大，且不一定每個作業系統都能正常顯示。

目前有幾種方式可以輔助輸入：

1. Unicode 總表

之前整理過「特殊符號字元一覽表」，列出了所有特殊字元。雖然資料很豐富，但若拿來當作輔助輸入的工具，有這些缺點：

不方便挑選，網頁必須一直往下拉。
因為該頁面載入了特定字型，所以可看到所有字元。但若複製到別的網頁、或自己的使用環境，某些符號是有可能無法顯示的。

2. 使用圖案

如果不是使用 "Unicode 字元"，而是使用 "圖檔" 的話，就沒有跨平台的問題，圖案一定可以顯示。例如：

以上 A 工具，複製後會自動產生 IMG 語法，圖片連結由該網站提供。

B 工具是開源專案，放在 CDN 的空間，是使用相同的原理，供開發者製作表情圖案的工具。

雖然解決了跨平台的問題，但留下更嚴重的隱憂，日後若是圖片連結失效了，該網域不再提供連結的維護時，那麼文章各處的表情圖案，全部會變成叉燒包。

3. 表情圖案外掛

以前寫的留言板工具「部落格即時留言板 WYBOARD + 表情圖案」，使用了第三方表情圖案外掛，一樣可以跨平台顯示表情圖案。

不過很可惜，隨著「Google Drive 關閉外連」，以及表情圖案的作者不再維護之後，不但表情圖案無法再顯示，而且原本應顯示圖案之處，會留下影響版面的 "無意義字串"。(原外掛就是藉著這些字串，來判定應該顯示何種圖案)

三、表情符號輸入小幫手的優點

因此，目前現有的輔助工具，以長遠來看，都不是很好的解決方案。唯一有辦法讓 "表情符號"、或是 "特殊字元" 能長久正常顯示的方法，是使用 Unicode。

而為了能讓各種平台都能顯示，必須解決作業系統版本的問題，因為 Win8 下出產的 Unicode 版本，不一定能在 Win7 下顯示。

在 XP 系統已被淘汰的前提下，目前最佳的解決方案，就是只使用 Win7 能顯示的 Unicode 特殊符號。

本篇的工具「表情符號輸入小幫手」，全部只挑選 Win7 能顯示的符號，不能顯示的都已被剔除，因此可以在各平台正常運作，這就是本工具最大的優點，我們在各處所使用的表情圖案，不用擔心將來看不到。

目前先製作這個「網頁版」，之後預計還會進行「書籤版」，只要點擊該書籤就會自動跳出這個輔助工具，這樣就不必一定得進入本篇網址，在任何情況下都能使用這個工具了。

更多字型相關文章：

cc0-image-search-engine-2017-CC0 免費圖庫搜尋引擎﹍2017 版

「CC0 免費圖庫搜尋引擎」今年 2017 改版，可說是吸收過去使用經驗後，建構了一個完整的搜索圖片流程。依照不同需求、藉著這個網頁，就能利用各大 CC0 圖庫，找出需要的高畫質圖片。

同時這次也改善了，以往搜尋結果會參雜廣告圖片(shutterstock)的狀況。而更多的優點及使用方式，請見以下詳細說明。

一、以顏色及形狀分類

舊版的圖庫分頁規格統一，顏色、形狀一致。這次的改版在分頁上有截然不同的設計：

1. 橢圓形

cc0-image-search-engine-2017-1-CC0 免費圖庫搜尋引擎﹍2017 版

所有橢圓形的分頁，功能上跟舊版的分頁一模一樣，按下後就能直接在站內搜尋該圖庫的圖片。

2. 長方形

cc0-image-search-engine-2017-2-CC0 免費圖庫搜尋引擎﹍2017 版

而所有長方形的分頁，無論是什麼顏色，按下後都會另開視窗，連到外部圖庫直接顯示搜尋結果(除了 Pickupimgae 無法顯示搜尋結果)。

這些外部圖庫連結，每個都有其特色，足以滿足各種需求，因此後面會個別介紹。

3. 紅色

cc0-image-search-engine-2017-3-CC0 免費圖庫搜尋引擎﹍2017 版

由於中文搜尋的需求不小，如果能夠讓使用者一眼就看出哪些圖庫可以搜尋中文，將會是非常體貼的設計。

因此特別將可以搜尋中文的圖庫使用紅色標示，就是上圖這 3 個，無論形狀是橢圓形、或長方形。

4. 黑色

cc0-image-search-engine-2017-4-CC0 免費圖庫搜尋引擎﹍2017 版

因為這次提供了外部、特殊功能的圖庫網站，其中有些並非完全提供 CC0 圖片。為了防止使用者誤會、誤用，特別將非 CC0 圖庫標示為黑色，使用圖片前需要注意其相關規範。

5. 切換外部圖庫顯示

cc0-image-search-engine-2017-5-CC0 免費圖庫搜尋引擎﹍2017 版

由於外部圖庫網站使用的機率比內部搜尋低一些，因此預設隱藏長方形的分頁。

請按上圖按鈕，可以打開或收合外部圖庫的分頁。

6. 行動版

cc0-image-search-engine-2017-6-CC0 免費圖庫搜尋引擎﹍2017 版

手機的寬度有限，為了版面美觀，將每個站內搜尋的圖庫，減少顯示的字元數。

雖無法一眼知道圖庫名稱，不過跟網頁版比對一下就大致能瞭解。

cc0-image-search-engine-2017-7-CC0 免費圖庫搜尋引擎﹍2017 版

而外部圖庫連結，則需要保持全名，以免跑錯網站。

7. 基本操作

如第一次使用的話，可參考「高畫質免費圖庫搜尋引擎﹍2015 版」，瞭解這個工具的運作原理、及基本操作。

二、圖庫篩選

這個搜尋引擎索引的高畫質圖片，數量會隨著時間流動而越來越豐富。

而收錄的 CC0 圖庫、以及每個圖庫的索引數量，最新狀態會紀錄在這篇「可商業用途及修改的高畫質免費 CC0 圖庫整理」。

今年 2017 改版的狀態如下：

1. 常用的站內搜尋，會篩選索引量 10k 以上的知名 CC0 圖庫，計有這些：

Pixabay
攝圖網
Pexels
Stocksnap
Picjumbo
Morguefile
Peakpx
Good Free Photos

2. 除了常用圖庫之外，原本有兩個分頁："主要高畫質"、"次要高畫質"。

這些年使用下來，覺得從 "次要高畫質" 分頁，挑選到圖片的機率不高，那麼乾脆移除這個分頁。

並將 "主要高畫質" 分頁改名為 "其他圖庫"，收錄所有 3k~10k 以上的圖庫。

這也代表 3k 以下索引量的圖庫，已被本工具剔除。不過如果將來索引量增加時，仍可能再度被收錄。

三、外部圖庫說明

此次新增了許多外部圖庫連結，為何如此設計、優點為何，以下一一介紹：

1. Pickupimage

原本這是少數能搜尋中文的圖庫之一，沒想到今年發現這個網站的圖片索引都消失了，因此特別提供外部連結，讓需要中文搜尋的使用者，可以多一個選擇。

2. Unsplash

這個圖庫收錄的圖片量很大，但長久以來索引的結果很差，搜尋結果常常顯示不相干的網頁。因此這次改版特別提供外部連結，從站內搜尋找不到合意的圖片時，可連這個網站試試。

3. Librestock

這個網站並不收錄圖片，而是跟本工具一樣，是個 CC0 圖片搜尋引擎，可同時搜尋數十個圖庫。

因此站內搜尋找不到合意的圖片時，也可用這個引擎試試。

4. Finda Photo

這一樣是個 CC0 圖片搜尋引擎，不過他的特色是，可以依照顏色、標籤來搜尋免費使用的照片。

對於找特殊圖片的使用者，會是個很好用的搜尋工具。

5. Flickr

知名的 Flickr 圖床並非 CC0 圖庫，但他提供的搜尋功能十分強大，除了可依照顏色、尺寸等各種條件篩選，最重要的是還可篩選授權條件：

如上圖，搜尋完圖片後，按「任何授權」來篩選你能接受的條款。

非常重要的一點，這些授權條件並不一定是 CC0，因此必須按照對應的授權條件來處理圖片，看是要註明出處、或是不可商業用途，以免造成侵權。

6. Everypixel

這個圖庫搜尋引擎並非 CC0 相關，也可搜尋 "付費" 圖片。但就算設定成搜尋 "免費" 圖片，也不代表一定能篩選到 CC0 圖片，因此使用上必須特別注意授權條款。

那麼特別提供外部連結的原因是，他有一個其他圖片搜尋引擎沒有的強項：「智慧搜尋」，幫使用者篩選出富有美學的圖片，不會列出醜陋的圖片。

可參考這篇「更聰明的免費圖片素材搜尋引擎 Everypixel 用 AI 排除俗氣照片」，有更詳細的介紹及使用技巧。

相信對特殊用途的使用者，這會是個非常棒的搜尋工具。

四、整合式服務

雖然本工具是以站內搜尋的功能起家，不過這次改版並不只針對站內搜尋的優化，更整合了外部搜尋工具，主要也是自己使用時，瞭解到站內搜尋的極限。

當站內搜尋也找不到滿意的圖片時，就得從書籤一一叫出其他的搜尋工具，這個過程其實也是麻煩，那麼乾脆將所有實用、常用的工具及網站，都整合進來，就能在同一個網站，滿足搜尋圖片的需求。

跟其他圖片搜尋引擎比起來，還是「CC0 免費圖庫搜尋引擎」最方便、快速、好用，因此第一階段必定是使用這個工具(圓形分頁)，找到的圖片不用另外花時間注意使用規範。

若是找不到滿意的圖片，第二階段再連到其他 CC0 圖庫或搜尋引擎(方形分頁，另開視窗可直接顯示搜尋結果)，做個別的搜尋。

真的還找不到時，最後第三階段只好多花一點時間，使用 Flickr 或 Everypixel 進行搜尋(另開視窗一樣能顯示搜尋結果)，並詳讀圖片的使用規範，以免惹上侵權糾紛。

以上規劃的流程，就是 2017 版的設計理念，相信這整合式的服務，可以讓搜尋圖片的流程更加順暢。

更多免費圖庫相關文章：

emoji-unicode-input-helper-bookmark-Emoji 表情符號輸入小幫手 (書籤工具)

前陣子有讀者留言時使用 Unicode 表情符號，覺得效果還不錯，語意看起來活潑許多，因此決定動手做個表情符號的輸入工具。

其實這類的留言輔助工具，在網路上已經可以找到一些，而寫部落格的初期，也曾思考過是否安裝這類的外掛。但這畢竟算是使用率較低的工具，如果為了花俏的功能而拖慢網頁載入的速度，我認為並不值得，因此一直擱置這個構想。

那麼現在重啟這個計畫，是因為找到了不錯的解決方案，部落格不用特別安裝外掛，自然也不會影響網頁載入速度。

(圖片出處: pexels.com)

一、書籤工具介紹

1. 一般外掛的隱憂

目前在網路上能找到的解決方案，主要是用 "圖片" 的方式來顯示表情符號，那麼會有兩種隱憂：

外掛連結：作者不再維護、或網頁空間失效
圖片連結：圖床失效

不管是哪種失效，將來都會很麻煩，可能表情符號的圖片會變成叉燒包，或是留下一串亂碼字串。詳情的說明可參考「Emoji 表情符號輸入小幫手 (網頁版)」→「二、其他工具」→「使用圖案、表情圖案外掛」

2. Unicode 的優點

使用 Unicode 表情符號，就不用擔心圖片連結失效的問題，而且還可以跨平台顯示，能確保文章、留言使用的符號，將來都不會不見。

而為了讓不同作業系統版本可以顯示，此工具只挑選 Win7 可顯示的 Unicode 特殊符號，以確保相容性。

3. 書籤版

將這個外掛工具做成書籤執行，網站就不必每次載入頁面時都執行外掛，把執行權交給使用者決定，需要輸入表情符號時，才點擊書籤執行工具。。

4. 需要有網路空間

為了能用書籤執行，使用者必須有網路空間存放 js 外連，例如 Dropbox、Github 等，安裝步驟會多一些。

二、執行效果

emoji-unicode-input-helper-bookmark-1-Emoji 表情符號輸入小幫手 (書籤工具)

上圖為點擊標籤工具後的效果，螢幕上會彈出「Emoji 表情符號輸入小幫手」視窗，點擊圖案後，即可貼在留言框。

想要先測試這個工具的效果，可在「Emoji 表情符號輸入小幫手」操作網頁版的功能，基本上跟書籤版的介面大同小異。

三、安裝步驟

<a href="javascript:var emojiTop = 50, emojiRight = 10, getScript=function(d,f){var e=document.createElement('script');if(e.readyState){e.onreadystatechange=function(){if(e.readyState=='loaded'||e.readyState=='complete'){e.onreadystatechange=null;if(f){f()}}}}else{e.onload=function(){if(f){f()}}}e.src=d;document.documentElement.firstChild.appendChild(e)},callback=function(){jQuery.getScript('https://drive.google.com/file/d/0BykclfTTti-0WkNQRXZWQ1BUaDg/view')};getScript('https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js',callback);">將此連結拖曳到書籤列或加入書籤</a>

首先有幾個地方需要修改：

藍色數字 50 及 10 分別代表執行後，彈出視窗與螢幕上方、及右方的距離(px值)
由於「Google Drive 關閉外連」功能，綠色字串的 JS 網址是無法外連的，請參照「WFU BLOG 外連 JS 變更及操作說明」，將這個連結下載後存成 JS 檔，上傳到自己的空間，或使用「Dropbox 外連產生器」。取得自己的 JS 檔外連後，置換原本的綠色網址字串。

完成以上修改後，可以開始製作書籤連結，有兩種方式：

1. 如果熟悉如何製作書籤的話，請將全部有顏色的字串(含改過的 js 連結)複製，貼到書籤的連結即可使用

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

四、補充說明

1. 要叫出「表情符號輸入小幫手」時，點擊製作好的書籤即可。

2. 第一次執行時，可能會花個 3~5 秒鐘，因為必須載入一個 jquery 連結 + 外掛 js 連結。

3. 第二次以後執行就很快了，應該 1 秒內就會出現，因為瀏覽器會對這兩個連結檔案快取，不會真的讀取 js 外連。

更多字型相關文章：

write-blogger-post-sop-我如何寫一篇 Blogger 文章的流程﹍易於調整版面 CSS + 不會遺失內容

這篇文章並不是教讀者寫作的技巧，例如用什麼工具收集點子、如何用心智圖建立文章架構、怎麼快速完成一篇文章的秘訣等等。由於以上技巧並不算專家，還是避免獻醜比較好。

這篇主要是著重在軟體操作的層面，因為幾乎每個月都需要回覆跟文章版面、CSS 修改的相關問題，例如文章字太小、顏色想改、圖片有問題、版面變得奇怪等等。

而會有這些問題，正是因為寫 Blogger 文章的流程有誤所引起。不了解 CSS 概念的站長，寫文章的流程就可能讓日後 CSS、版面無法調整。

那麼本篇就來分享我如何完成一篇文章的流程，供 Blogger 站長們參考。雖然這不一定是標準答案，但至少可確保這些優點：

易於修改 CSS
對 SEO 有一點點幫助
容易控制文章版本，不會遺失寫好的內容

而瞭解了這個流程的原理後，你也可自行調整為成符合習慣的作法。

(圖片出處: pixabay.com)

一、使用純文字撰寫

不少站長習慣使用「所見即所得(WYSIWYG)」軟體來寫作，也就是類似 Word 這類軟體，可以上色、改變字體大小。雖然很方便，不過也是日後造成問題的最主要原因。

write-blogger-post-sop-1-我如何寫一篇 Blogger 文章的流程﹍易於調整版面 CSS + 不會遺失內容

來看一下上圖，這就是從「所見即所得」軟體複製到 Blogger 文章編輯器後的某篇 html 碼範例，文章內容到處充滿了紅框處所標示的、重複累贅的行內 CSS 語法(所謂 "行內 CSS" 代表原本應該在範本中設定的 CSS 語法，現在全部塞入 HTML 碼之中，由於權重最高，導致其他地方設定的 CSS 無法生效)。

會造成的問題有這些：

所有文字都被設定了 CSS，導致無法從範本設定 CSS 來覆蓋掉，也就是無法再調整 CSS 版面樣式。
文章原始碼變得肥大，且充滿重複、不必要的字元，增加搜尋引擎索引的工作量，對 SEO 稍稍不利。
網頁工程師不易閱讀內容，增加修復問題的麻煩

因為使用「所見即所得」軟體編輯的文章，複製到 Blogger 文章編輯器時，也會把所有 CSS 樣式一併複製過來，造成以上問題，所以最好的寫作方式，就是使用「純文字」軟體來編輯。

二、製作文章範本

有了使用「純文字」來撰寫 Blogger 文章的概念後，我們可以開始製作含 HTML 碼的文章範本。

可參考「修改範本 H1 H2 H3 標籤實用技巧」→「三、加強文章中的 SEO 效果」→「2. 有效率的文章範本範例」，以下是我常用的文章範本內容：

讀者可以自行加入文章中會常常重複出現的文字、HTML 碼、表格或標題語法等，例如 A 行的繼續閱讀語法，這份範本的好處有：

省下每篇文章重複輸入特定字串的時間
使用 H2、H3、或其他標籤，但不使用行內 CSS，代表隨時可調整大標題、副標題等樣式，網站保有隨時改版的彈性。
文章的文字大小、顏色也都可以隨時從範本調整 CSS
使用 H2、H3 等標籤，對 SEO 有些微幫助

正因為文章範本很方便，可以加入重複使用的 code，所以有的站長會在這份文章範本放廣告碼、粉絲團、讚按鈕等等語法，但這是非常不建議使用的，因為：

哪天你想要換不同的廣告碼，那麼一篇篇文章改起來會要人命。
有時可能想改廣告位置、或讚按鈕要從文章開頭處改到文末，也是要全部文章一起改

這些每篇文章都會用到的語法，可以寫程式自動出現在文章指定的位置，也保有隨時調整位置、更換廣告碼的彈性，所以千萬別放在這份文章範本內。

三、文書編輯軟體

1. 推薦軟體

建議使用可編輯「純文字」的文書軟體，開啟前面製作的 "文章範本" 後，就可以開始寫文章。

如果習慣 "記事本" 這類軟體的話當然也是可以，如果要推薦的話，可以使用 Notepad++、Sublime Text 這類軟體，因為：

有一些外掛可以使用，能加快編輯速度
有自動儲存的外掛，不用擔心文章沒儲存，而不斷按存檔

2. Blogger 文章編輯器操作

文章寫完之後，按照以下流程：

在 Blogger 後台開啟一篇新文章
切換到「HTML 模式」
複製文章內容、貼到 Blogger 文章編輯器
如果要改 "全部文字" 的 CSS 樣式，請不要使用文章編輯器調整，建議參考這篇「修改 Blogger 各處 CSS」，從範本設定，可套用到網站全部的文章。
如果要修改 "部分文字" 的 CSS，例如顏色、大小等，或是調整版面，那麼請切換到「撰寫模式」來修改。

總之一句話，要調整版面 CSS 樣式，請不要用「所見即所得」軟體調整，最好用 Blogger 文章編輯器的「撰寫模式」來修改。

四、版本控制──救回文章內容

這個章節是流程中非常重要的一部份，可以讓你避免「Blogger 文章不小心誤刪了怎麼辦？」這類的鳥事。

1. 使用 Dropbox

請務必申請 Dropbox 來使用，把文章檔案放在 Dropbox 同步的資料夾，可以有這些優點：

檔案在各處、所有裝置都能同步，可隨時在各種環境、裝置繼續文章的寫作。
不用擔心人為操作失誤，不小心把原本的內容覆蓋掉，又不小心按了儲存
因為 Dropbox 有強大的歷史版本功能，可以隨時還原任何一個時間點的文章版本

詳細的操作流程介紹，可參考「部落格寫作軟體的選擇, 以及確保文章寫作安全的技巧」→「四、Dropbox」

2. 少用 Blogger 草稿存放點子

我知道不少站長的寫作方式是，想到什麼 idea 就趕快存在 Blogger 草稿，也就是把 Blogger 草稿當作 Evernote 使用。

雖然 Blogger 伺服器出錯的機率不高，草稿內容不至於不見，但也不要把這機率當作是零比較好。

Blogger 論壇的這個案例「草稿不見了」，看不出是 Blogger 伺服器的問題、還是人為操作問題。但無論是哪一種，都代表文章放在 Blogger 草稿也是會有風險的。

使用 Dropbox 做版本控制才是最佳解。

3. Open Live Writer

Open Live Writer 是很多站長使用的工具，其功能也的確很強大，WFU 沒什麼反對使用的理由。

就我個人而言，不用他的原因是：

不容易進行版本控制
相較之下，我使用 Blogger 文章編輯器來調整版面會更順手

五、處理圖片

文章需要使用圖片的話，可用 Blogger 文章編輯器上傳。操作方法請參考「Blogger 使用圖片的各種技巧：上傳+刪除+管理+取得網址」。

六、Blogger 文章編輯器不好用？

不可諱言，大部分使用者較少用 Blogger 文章編輯器來編排版面，而是使用其他所見即所得軟體的原因，就是 "Blogger 文章編輯器不好用"。

這的確是沒辦法的事，但說實在，文章編輯器要寫得好也很困難，有更多人說 WP 的文章編輯器超難用。

因此我整理了這篇「Blogger 使用文章編輯器的技巧, 及各種疑難雜症整理」，如果你使用上遇到困難，不妨到這篇找找有沒有答案，或是留言提出你的狀況。

七、總結

簡單總結我的 Blogger 文章製作流程：

套用文章範本
使用純文字編輯軟體
搭配 Dropbox 自動備份歷史版本
在 Blogger 文章編輯器內調整版面

這樣就能做到開頭說的：易於修改 CSS、對 SEO 有幫助、容易控制版本，不會遺失任何曾寫好的內容。

更多 Blogger 相關技巧：

android-toggle-airplane-mode-[免 Root] 讓 Android 裝置可凌晨自動開啟飛航模式，省電又不會被電話騷擾

幾個月前買了 CP 值很高的 Zenfone 後，速度很流暢，操作上一些內建的 ASUS APP 也很方便，使用者體驗還滿不錯的。由於 CPU 規格不錯，電力也掉得很快，明明半夜什麼事都沒做，但一覺醒來電池用量卻令人咋舌。

於是開始研究如何半夜讓手機自動進入飛航模式，結果一查才知道，Android 4.2 版以後，官方就關閉了自動切換飛航模式的功能。目前想做到這件事，就只能 Root 手機了。如果循正常管道，在不 Root 手機、不破壞保固的情況下，可以說是沒什麼機會。

直接用排程 APP 切換飛航模式是做不到了，不過可以有變通的方法，稍微麻煩一點，本篇會分享我的作法。

(圖片出處: pexels.com)

一、切換飛航模式 Airplane Mode Shortcut

要找到真正能切換飛航模式的 APP 是很困難的事，原因如前所述，Android 4.2 以後系統就不支援，因此在 Google Play 有一大堆相關的 APP，多半是 4.2 版以前做的，所以要嘛不能用，要嘛告訴你必須 Root。

Airplane-Mode-Shortcut-[免 Root] 讓 Android 裝置可凌晨自動開啟飛航模式，省電又不會被電話騷擾

現在介紹的這個「Airplane Mode Shortcut」，作者很厲害，繞過了官方限制，他採用的方法類似按鍵精靈，模擬我們手動切換到官方系統飛航模式的那個設定頁面，就像自己按下切換的開關一樣，省下操作這個流程的麻煩。

https://play.google.com/store/apps/details?id=com.floriandraschbacher.airplanemode.free

上面是 APP 的安裝網址，安裝並執行後──

Airplane-Mode-Shortcut-1-[免 Root] 讓 Android 裝置可凌晨自動開啟飛航模式，省電又不會被電話騷擾

首先點擊 A 處，開通這項功能，畫面會自動跳到「協助工具」

Airplane-Mode-Shortcut-2-[免 Root] 讓 Android 裝置可凌晨自動開啟飛航模式，省電又不會被電話騷擾

如上圖紅框，將「Airplane Mode」開啟後，回到 APP 原來畫面。

點擊 B 處，會在桌面自動產生一個捷徑「Toggle Airplane Mode」。將來點擊捷徑後，如前所述，手機會自動模擬我們手動操作的流程，切換飛航模式。

二、自動排程 Automate It

Automate-It-[免 Root] 讓 Android 裝置可凌晨自動開啟飛航模式，省電又不會被電話騷擾

自動排程的 APP 很多，可以選自己常用的即可，本篇以 Automate It 的操作來舉例：

https://play.google.com/store/apps/details?id=AutomateIt.mainPackage

上面是 APP 的安裝網址，詳細的介紹、使用說明可參考這篇「AutomateIt 自動控制 Android 省時免動手」。

AutomateIt 可以設定指定時間一到，就執行指定的捷徑，但是有很多問題無法解決。

三、為何無法自動切換飛航模式

若要用 AutomateIt 自動排程來執行 Airplane Mode Shortcut，可以利用執行捷徑的方式。但很可惜，Airplane Mode Shortcut 桌面的這個捷徑，無法出現在 AutomateIt 清單列表，所以 AutomateIt 無法操控這個 APP。

「Airplane Mode Shortcut」有出付費版，開放讓其他程式操控的權限。但是非常可惜，這條路一樣是行不通的。

https://play.google.com/store/apps/details?id=com.floriandraschbacher.airplanemode.pro

上面是付費版「Airplane Mode PRO」的網址，這個頁面可看到以下說明：

Due to system limitations, toggling on devices running Android versions higher than Jellybean 4.2 requires the screen to be on. This means time toggles will only work if your screen is on at the set time.

意思就是說，由於系統的限制， Android 4.2 版以上，必須在螢幕開啟的狀態下，才能正常執行切換飛航模式的功能。

然而，當我們使用排程 APP 來操控「Airplane Mode PRO」時，手機螢幕一定是關著的。要解決自動切換飛航模式的問題，得先有辦法讓 Android 能自動喚醒螢幕才可以。

非常可惜，我一樣找不到有任何 APP 可以自動打開 Android 手機的螢幕，所以沒有 Root 的情況下，要自動切換飛航模式看來是無解了。

四、設定 AutomateIt 提醒自己

那麼退而求其次，我只好利用 AutomateIt 定時播放鈴聲，提醒自己要手動執行「Airplane Mode Shortcut」，這是目前為止想到比較可行的方法。

例如設定晚上 23：00 一到，手機自動播放提醒的音樂，就知道要打開手機，點一下「Airplane Mode Shortcut」捷徑，切換為飛航模式。

同時早上也設定一個時間，播放提醒的音樂，然後手動關閉飛航模式。

如上圖為 AutomateIt 的設定畫面，依照這樣的原則設定兩個規則，提醒自己切換飛航模式即可。

五、補充

本篇的應用方法，不一定只有指定時間才能使用這個技巧。很多人習慣手機擺在身上(腰間)，但手機搜尋訊號時的電磁波、輻射，對人體會造成很大傷害，所殺死的細胞我們的神經不一定能感覺得出來，有影響也可能是 10 年後所產生的病痛。那麼可以利用排程(或情境) APP，在外出需要放在身上、或騎車坐車不方便接時，提醒自己切換為飛航模式，等回到室內時再切換回來。

更多 Android 相關文章：

wp-hacker-site-security-WordPress 被駭之後，收拾殘局全紀錄

之前朋友的 WP 網站被駭客入侵，雖然主機商有回溯到當日清晨的服務，但只要太晚發現異狀，例如隔天才發現，那麼回溯功能依然只能還原為異常的狀態，意思就是有問題要當天發現才有用。

由於朋友的網站一開始沒什麼安全防護的概念(而且前任工程師跑了)，也沒什麼乾淨的備份檔案可以還原，要收拾這個殘局稍微有點麻煩。

慶幸的是，他的多個 WP 網站，其中一些可算是鏡射網站，只要不是全部網站被駭，我就有機會比對出乾淨的檔案內容。

那麼本文就紀錄一下處理心得，以及清除所有木馬、惡意程式的經過。

(圖片出處: pixabay.com)

一、被植入外掛

1. 利用 FTP 刪除外掛

事後來看，這次的事件應該可以算是幸運，並非遇到破壞性的入侵，還有機會把網站清乾淨、建立起安全防護措施。若遇到高登大「被駭全記錄（疑似被伊朗網軍入侵）」這樣的案例，網站沒有乾淨的備份就只能重來了。

一開始會發現異狀，是進入後台時發現，範本不能編輯，而且外掛也看不到、不能管理。還搞不清楚怎麼回事時，赫然發現後台多了一些英文選項，按了才知道被強制安裝了外掛。

沒想到國外駭客會為了推銷外掛而入侵網站，而且動了手腳讓你無法從後台編輯、移除。這個構想滿有趣的，但應該只會帶來反效果吧，而且對外掛的印象還會更差！

我用 FTP 進入 WP 放外掛的目錄 wp-content\plugins，發現時間點在一個星期前，被安插了兩個外掛的資料夾，記得其中一個是「W3 Total Cache」，一個有「Performance」的字樣，總之都是有關提升效能的外掛，所以將這些被偷裝的資料夾全刪了。

2. 更新 WP 版本

但事情沒這麼容易，刪完這些外掛後回到 WP 後台，編輯範本、管理外掛的功能依舊沒有恢復，想必是重要的系統檔也被動手腳了。

主機商是建議更新 WP 系統版本試試看，但因為看過一些案例，在更新 WP 版本後，原本的工具或外掛會受到影響，所以不敢貿然嘗試。

但想來想去真的沒有更好的辦法，的確只能藉由更新版本，來覆蓋(不知有哪些被感染的)系統檔案，於是請主機商先備份當前的狀態後(確保更新失敗時可復原)，接著從後台執行 WP 自動更新版本。

運氣還不錯，更新到 WP 最新版本後，後台編輯、管理的功能都恢復了，前台的畫面也都能跑，網站執行起來沒什麼問題，看來現有的外掛、工具程式等等都沒受到影響，這樣就解決了第一個「被植入外掛」的難題。

二、被植入惡意程式

事情還沒完，解決眼前看得到的問題後，還要檢查有沒有看不到的隱憂。

1. 掃瞄網站

這個網站提供的服務，可以免費幫忙掃瞄網站是否藏有惡意程式(malware)：

Free Website Malware and Security Scanner

site-security-check-WordPress 被駭之後，收拾殘局全紀錄

掃完朋友所有的網站後，其中一個網站，就是這次被植入外掛的網站，掃瞄到有惡意程式，看來被植入的東西真是一拖拉庫。

掃到的程式碼很神奇，是一大串 JS 碼，但又都是以數字方式呈現，包含像 (193 - 4)類似這樣的字串，可惜趕著把這些惡意程式移除，忘了截圖存起來。

奇怪的是，利用「String Locator」這樣的工具，在範本中並沒有搜尋到相關的字串，最後運氣不錯，利用檢視網頁原始碼的方式，看到網頁的確存在被掃出來的這些惡意 JS 碼。

2. PHP 混淆加密

這樣事情就簡單了，從網頁的相對位置，再比對範本相關的 php 檔，就找到了惡意程式碼，且瞭解到為何找不到那些 JS 碼。

原來那些 JS 碼，是利用 php 語言所產生的，而且這些 php 程式碼使用了混淆加密，類似「Free Online PHP Obfuscator」這樣的工具，產生一大段看似無意義的字串，來騙過不熟悉程式碼的站長。

將這些 php 程式碼都刪除，過一段時間後再重新掃瞄網站(因為這個線上服務的網頁會有快取)，果然網頁被判定為乾淨正常了。

三、被植入木馬(不明程式碼)

1. 仍有餘孽

就在所有網站都已掃瞄完畢，被認定為沒有惡意程式之後，無意間發現怎麼某個網站的行動版畫面怪怪的，特定位置的字串都變成 ????這樣的一堆問號...

網頁內容會被竄改，只能寫 JS 才做得到，因此打開網頁原始碼，一一檢視所有的 JS 內容，查看是哪裡的問題，比較快的方式就是搜尋 script字串。

總算又發現有一段可疑程式碼，但既然沒有被線上掃瞄網站判定為惡意程式碼，可見其內容並不具有殺傷力。

而把這段內容刪除後，的確原本問號的內容就恢復正常了，也許是這段程式碼讓網頁的編碼(或字型)誤判了。

2. 殘留的惡意程式碼

在範本中找到這段對應的、加密後的無意義字串，推斷這些程式碼，作用為支援主要的木馬程式，當主程式存在時，這些輔助程式才會有作用，不過主程式應該已經被 WFU 砍掉了。

然而所有網站一個個從 script來找殘留程式，這個流程實在太累了，且這段程式的混淆邏輯跟之前的又不一樣，他的混淆方式是使用 urlencode 這個函數。

於是再次使用「String Locator」這個工具，直接搜尋每個網站的範本，是否含有 urlencode 這個字串，就能快速確認還有沒有殘留程式了。

四、最後的清除工作

在建立乾淨的備份檔案之前，最麻煩的就是得先確定所有檔案都是乾淨的，否則把有問題的檔案拿來備份，將來還原之後，問題還是會不斷發生。

因此以上的步驟，在清除完範本中所有的問題後，還得一一檢查範本之外，是否還有被竄改內容的檔案。

由於異狀是發生在近期，能夠做的，就是進入 FTP，一一檢查所有資料夾及檔案的日期，看看還有沒有近期被修改過的紀錄，有問題的檔案更改為乾淨的檔案。

解決了所有被感染的檔案問題後，下一篇要分享進行防護工程的紀錄。

更多 WordPress 相關文章：

wp-site-safety-protection-WordPress 防駭 + 建立安全防護心得紀錄

上一篇處理完「WP 被駭後, 移除各種被植入的外掛及惡意程式」，並且備份完乾淨的檔案之後，接下來本篇要建立安全的防駭機制及環境。

(圖片出處: pixabay.com)

一、WP 防護概念

WordPress 由於是開放原始碼的部落格平台，每個 WP 網站的架構、預設資料夾名稱、甚至登入網址連結都一模一樣。使用了相同版本的 WP 網站，都會存在相同的漏洞，對於有心人士而言，如果沒做好防護措施的話，要入侵 WP 不算難事。

要在 WP 長久安居的話風險不小，因此架站之前，的確得先瞭解各種安全防護措施，可參考這些文章：

處理網站被駭，以及安全防護的基本概念及原理，可參考這篇：

WORDPRESS HACKED – 網站被駭應該如何處理

二、確保帳號安全

以下開始紀錄網站被駭之後，進行的各項防堵及安全措施。

能夠在 WP 網站植入各種外掛、惡意程式，表示駭客有辦法取得管理員的權限，或是已經破解了現有的帳號密碼，因此第一要務是不讓駭客輕易登入網站。

1. 監控登入次數

「Limit Login Attempts」這個外掛可以監控使用者登入的狀況，是最推薦的外掛，安裝使用教學可參考這篇「Limit Login Attempts: WordPress後台登入錯誤次數限制」。

wp-limit-login-attempts-WordPress 防駭 + 建立安全防護心得紀錄

安裝之後，駭客就不能輕易從 WP 網站後台嘗試密碼，因為超過一定次數就會被鎖定、紀錄 IP、甚至封鎖 IP，WFU 認為這是重要性最高的外掛。

2. 加強帳號密碼安全性

刪除 WP 預設的 Admin 帳號
更改帳號的密碼，用系統的「產生密碼」按鈕，增加複雜度
務必修改根目錄系統檔案 wp-config.php裡面的金鑰設定，一共有 8 組，直接參考該檔案的註解說明，到網址 https://api.wordpress.org/secret-key/1.1/salt/ 來產生金鑰即可。

3. 隱藏後台及登入網址

這件事可說是第二重要，將 WP 後台的預設網址 /wp-admin，以及 WP 預設登入網址 /wp-login.php隱藏起來，駭客連登入的地方都找不到，WP 就安全多了。

hc-custom-wp-admin-url-WordPress 防駭 + 建立安全防護心得紀錄

高登大推薦的「HC Custom WP-Admin URL」是最佳外掛，安裝完、設定一組字串後，就能自動隱藏預設的 /wp-admin以及 /wp-login.php網址。

不過原文「隱藏 WordPress 後台網址」提到可以只改 .htaccess 就好，不用安裝外掛，我的測試結果是不行，情形跟留言者 Stacey 所提的狀況一樣，所以就沒在原文回報了。

提醒一下讀者，「HC Custom WP-Admin URL」這個外掛做的事情，不只是修改 .htaccess 這個檔案，還改了一些系統設定，因此請勿移除此外掛，否則駭客還是可以從 WP 預設的 /wp-admin來登入及猜密碼。

三、不顯示 WP 版本

特定 WP 版本都會存在該版本的安全性漏洞，因此必須避免讓駭客知道網站的版本資訊。

可惜 WP 在太多地方存放了版本資訊，大致整理以下這些地方、以及隱藏方法：

根目錄的 readme.html，請直接刪除即可
網頁的 meta 標籤，刪除方法可參考前面提到的參考文章「一、WP 防護概念」→「WordPress安裝後你應該做的事–安全防駭篇」
系統目錄 "wp-admin" 之下的 "about.php"，可參照「二、確保帳號安全」→「3. 隱藏後台及登入網址」，將系統目錄 wp-admin隱藏起來，避免被駭客利用。
系統目錄 "wp-content" 之下的 "version.php"，可參照「四、保護系統重要檔案、目錄及資料表」→「1. htaccess」的語法，限制 version.php 的存取。

四、保護系統重要檔案、目錄及資料表

WP 有許多預設的檔案、目錄、資料表名稱，最好要限定存取權或更改名稱，才不會被駭客利用。

1. htaccess

.htaccess是網站裡面最重要的系統檔案，可設定所有檔案的存取權限，可參考「一、WP 防護概念」的相關教學文章，進行以下設定：

保護 .htaccess 自己的存取權
每個目錄的 index 檔案存取權限
保護 wp-config.php 的存取權
保護 wp-includes 目錄
限制上傳檔案大小

2. 重新命名 WP 資料表前綴

wp-config.php這個重要的 WP 系統檔，設定了資料表名稱的前綴字串，預設是 "wp_"。如果沒有更改的話，容易被駭客知道、進而利用。

但光是從 wp-config.php更改是不行的，只好藉助於外掛幫我們解決這件事。

wp-change-db-prefix-WordPress 防駭 + 建立安全防護心得紀錄

前面推薦的參考文章介紹了「Change DB Prefix」，這個外掛可以很方便的幫我們完成這件事。

更棒的是，完成之後就可以將這個外掛移除，不用在後台佔用空間及資源。

五、主機商

最後，網站被駭也有可能是主機這邊的問題，因此主機商這一端也有需要進行的項目，需要跟主機商溝通：

確保主機沒有漏洞、或被植入木馬。
提供備份的服務
提供被異常流量攻擊時的防護措施

每個網站的用途、目的不盡相同，本文紀錄的安全防護心得，並未包含所有的方法，建議參考引用的相關教學文章，採用適合自己網站的項目來進行。

更多 WordPress 相關文章：

blogger-custom-layout-Blogger 版面配置切割任意欄位的技巧﹍方便安裝小工具

最近進行 WFU BLOG 改版，需要在新版型上切出一些欄位，來安裝小工具。如果使用官方範本，那麼這是很簡單的事，後台就有各種的欄位樣式可以選擇，看要將區塊切成 2 等分或 3 等分都行。

如果熟悉 CSS 的話，自己切版也很容易，而缺點就是切出來的區塊無法安裝小工具，只能將所有程式碼塞在範本中，造成日後管理的麻煩。

那麼本篇就來紀錄如何 Hack 範本，達到以上的需求。

一、官方範本切割欄位

後台主題 → 自訂 → 版面配置，可看到下圖畫面：

blogger-custom-layout-1-Blogger 版面配置切割任意欄位的技巧﹍方便安裝小工具

這裡可以選擇版面的切割方式，例如選擇紅框處，就能將頁尾切割成等比例的三個欄位，各自都能新增小工具。

二、自己切版的缺點

使用 CSS 我們自己也可切割版面，例如要將某個區塊切成 3 等分的欄位，只要設定 width: 33.3%，然後看要不要加上 float:left。

但這樣的方式，日後想要調整內容、或是新增外掛時，都得進入範本中編輯，其實沒有那麼直覺、方便。

以 WFU BLOG 目前的頁尾為例，長得像這樣：

blogger-custom-layout-2-Blogger 版面配置切割任意欄位的技巧﹍方便安裝小工具

注意到紅框處的 "編輯圖示" 按鈕了嗎？這三個區塊是使用官方版面配置功能產生的，所以不用到後台，在頁面上就能直接編輯小工具，對於日後管理、調整清單內容非常的方便。

blogger-custom-layout-3-Blogger 版面配置切割任意欄位的技巧﹍方便安裝小工具

上面是這個頁尾 3 等份欄位，在後台版面配置的示意圖。

官方版面配置的功能是很方便沒錯，但問題來了：

如果我想切成 3 等分的區塊，不是在頁尾，要怎麼做呢？
我沒有要切成 3 等分，只想產生一個區塊能自行新增小工具，又要怎麼做呢？

三、製作滿版欄位

1. 提醒事項

本文接下來的操作都很危險，建議非常熟悉修改 Blogger 的讀者再進行。

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

2. 100% 寬度欄位

在網頁上切割出一個區塊，佔用 100% 寬度，且能增加官方小工具，這件事比較簡單一些。

在範本中自訂的位置，新增以下程式碼即可：

<b:section class='自訂字串' id='自訂字串' showaddelement='yes'/>

將 "自訂字串" 改成你想使用的英數組合字串即可。

儲存後，在後台的版面配置，就可看到這個新增的欄位了。

3. 範例

blogger-custom-layout-4-Blogger 版面配置切割任意欄位的技巧﹍方便安裝小工具

就像本站首頁，導覽列下方的輪播區塊，就是使用這個方法做出來的。

四、切割任意等分欄位

要等比例切割欄位，就非常複雜了，以下操作請非常小心，別把範本搞壞了。

1. 官方巨集程式碼

如果是官方範本，一定會有以下這一大段程式碼：

<macro:includable id='sections' var='col'>
.
.
.
</macro:includable>

如果你的範本沒有，請開個新網站，把官方範本這段程式碼複製過來，位置可貼在 </body>的後面。

2. 新增區塊

接著在範本中，你想要新增等比例欄位的自訂位置，加入以下程式碼：

<macro:include id='test-sections' name='sections'>
<macro:param default='2' name='num' />
<macro:param default='test' name='idPrefix' />
<macro:param default='test' name='class' />
</macro:include>

藍字 test 請改成自訂字串
紅字 2 請改成你要切的欄位數

改完後先別儲存，否則你一定會後悔的，請繼續下個動作。

接著將以下程式碼，放在範本中 </html> 之前：

<b:section-contents id='test-1' />
<b:section-contents id='test-2-1' />
<b:section-contents id='test-2-2' />

藍字 test 請改成自訂字串
以上可看到數字只編到 2-2，代表切成 2 個欄位。如果要切成 4 個欄位，請複製同樣的一行內容，一直續編到 2-4即可。

完成以上所有動作後，現在可以按儲存了

3. 版面配置效果

在後台切換到版面配置的畫面，看看欄位的變化。

blogger-custom-layout-5-Blogger 版面配置切割任意欄位的技巧﹍方便安裝小工具

如上圖，出現了我們創建的 test 區塊：

第 1 排固定會出現滿幅的區塊
第 2 排就會出現我們需要的等比例欄位區塊。如果當初設定成 3 等分，這裡就會出現 3 個欄位。

以上這些流程就是最困難的部分，完成之後，就可以開始新增工具，並調整 CSS 版面樣式了。

更多 Blogger 語法相關文章：