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

May 3, 2015, 2:25 am

≫ Next: 讓 iOS 設備(iPhone iPad)鋰電池能正確充電、降低循環次數的技巧

$

0

0

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

十三、聯絡表單

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

聯絡表單：

自訂行動版系列文章：

----
如這篇文章對您有幫助，請順手按個 +1 或分享，謝謝！

---

讓 iOS 設備(iPhone iPad)鋰電池能正確充電、降低循環次數的技巧

May 5, 2015, 9:09 pm

≫ Next: [Google Drive 外連產生器 V2] 一秒鐘輕鬆複製連結, 支援新舊版雲端硬碟

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

$

0

0

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

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

這一篇的概念延續「讓 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 使用心得：

----
如這篇文章對您有幫助，請順手按個 +1 或分享，謝謝！

[Google Drive 外連產生器 V2] 一秒鐘輕鬆複製連結, 支援新舊版雲端硬碟

May 7, 2015, 4:00 pm

≫ Next: Blogger 製作自適應網頁(RWD)﹍懶人法實作

≪ Previous: 讓 iOS 設備(iPhone iPad)鋰電池能正確充電、降低循環次數的技巧

$

0

0

前幾天讀者回報「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 相關文章：

----
如這篇文章對您有幫助，請順手按個 +1 或分享，謝謝！

Blogger 製作自適應網頁(RWD)﹍懶人法實作

May 11, 2015, 5:14 am

≫ Next: 讓標題過長的文字自動省略﹍單行 CSS 技巧

≪ Previous: [Google Drive 外連產生器 V2] 一秒鐘輕鬆複製連結, 支援新舊版雲端硬碟

$

0

0

過去在「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 行動版相關技巧：

----
如這篇文章對您有幫助，請順手按個 +1 或分享，謝謝！

讓標題過長的文字自動省略﹍單行 CSS 技巧

May 14, 2015, 3:00 am

≫ Next: Blogger 各種圖片異常狀況處理﹍模糊+消失+超出版面

≪ Previous: Blogger 製作自適應網頁(RWD)﹍懶人法實作

$

0

0

在設計版面的時候，控制區塊的寬度與高度是重要的技巧，因為文字數量或圖片尺寸非我們所能控制。當內容太多、超出了區塊的範圍，如果不熟悉 CSS 語法，沒有做適當的參數設定，輕則視覺效果變差，重則版面整個爆掉！

圖片超出區塊的調整，將會另闢一個主題。本篇先說明如何使用 CSS 語法 text-overflow: ellipsis，讓單行文字不超出指定範圍，而多行文字有機會也會另外說明。

+Ala Go 在「讓 Blogger 自動顯示系列文章」留言 #17 詢問

由於我主要的文章，標題都很長。截圖：http://i.imgur.com/H6qvl8D.png。想請問，是否能讓～做為「關鍵字」的「字串」，不重複的在「系列文章」中顯示出來？

很明顯的，這個案例就是文章標題的文字太長，當超過一行時視覺效果不佳，版面看起來稍嫌擁擠、且冗長。如果我們能用 CSS 將標題區塊限定為只顯示一行的高度，那麼這個問題就能有效改善。

一、text-overflow 語法

1. 定義

先簡單說明 text-overflow 的使用方法。"ellipsis"這個參數的英文字面含意為 "省略符號"，如果有看過 007 電影「皇家夜總會」的話，應該會對這個字印象深刻。顧名思義，使用了這個參數後，在該行文字超出設定的範圍時，會自動出現省略號 "..."。


2. 使用方法

text-overflow 完整的使用方法是一套組合拳，可說是缺一不可。假設我們要限定文章標題的區塊只出現一行，那麼可將文章標題的 class 設定 "post-title"，而 CSS 的參數內容如下：

.post-title {
width: 100%; // 可改為指定寬度
overflow: hidden; // 超出範圍的部分隱藏
white-space: nowrap; // 不自動斷行
text-overflow: ellipsis; // 出現省略號
}

以上比較特別的是 "white-space"這一項，因為超出區塊範圍、過長的字串，會被瀏覽器自動斷行。若想要讓字串維持在一行的狀態，參考了這篇「white-space」的說明，不但需要使用 "white-space"，且必須設定為 "pre"或 "nowrap"這兩者之一，才不會自動斷行。


3. 各種範例

瞭解以上 CSS 基本知識後，接下來我們來看各種應用情境，有哪些部落格工具可以套用這個效果，讓版面更美觀。

二、最新回應 + 文章標題

「Blogger 最新回應＋留言者頭像＋文章標題」是本站第二熱門的側邊欄小工具。使用一段時間後會發現，若是部落格習慣使用長標題的話，這個工具的版面有點小小的不美觀，例如下圖紅框：




因為這個工具可以自訂留言摘要長度，說不定有的站長設定得很短，留言只會出現一行。但文章標題很長時，出現三行都有可能。這就導致留言區塊很小、標題區塊很大，成為頭重腳輕的不協調感。

修改的方法很簡單，這個小工具可以自訂 CSS，在安裝程式碼找到 ".rcPostTitle"，這裡就是文章標題的 CSS，改為以下即可：

.rcPostTitle {
font-size: 85%;
font-weight: bold;
line-height: 110%;
width: 100%; // 可改為指定寬度
overflow: hidden; // 超出範圍的部分隱藏
white-space: nowrap; // 不自動斷行
text-overflow: ellipsis; // 出現省略號
}
以上紅字的部分為新增的內容，套用此 CSS 後整體協調多了，效果如下：

三、系列文功能

回到開頭 Ala 詢問的「讓 Blogger 自動顯示系列文章」，這一個小工具要修改時，才發現有點難度。先來看原始效果：




這個工具簡單使用了 UL、LI 標籤來顯示清單效果，當文章標題過長時，斷行會使得每個 LI 開頭的圓點的間距不一，看起來沒那麼整齊。

然而，當直接套用 text-overflow 的整組語法時，卻發現會把圓點效果給覆蓋掉，有點小麻煩。最後試出了一組可以正常呈現的 CSS 參數，請按照以下流程進行：

到後台範本 → 自訂 → 進階 → 新增 CSS，貼上以下 CSS 程式碼：

#postSeries a, .postSeries a {
display: inline-block;
vertical-align: middle;
width: 100%;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
套用此 CSS 後，效果如下，版面看起來整齊多了：

四、文章列表 TOC

對於「文章列表」這類性質的工具，WFU 覺得文章標題過長而斷行，不是什麼嚴重的問題，倒不一定非得強制只顯示一行，因此這個章節算是純粹舉例，當作是一個 CSS 練習題。而有需要的讀者，也可參考看看如何修改。

WFU 寫的文章列表版本很多，先以這個「Blogger 文章列表極速版__(1) 依日期排列」為例，原始展示效果如下：




這個小工具開放自訂所有區塊的 CSS，不過一樣不是很容易套用本篇的 CSS 效果，因為文章標題的左邊，有個浮動的日期區塊(float: left)，不能硬套前面的組合拳 CSS。

首先在「三、安裝 CSS」的程式碼找到 ".tocPostTitle"，這裡就是文章標題的 CSS。請保留原本的 CSS 參數，然後在 .tocPostTitle 的區間，新增以下 CSS 參數：

width: 90%;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
寬度不能使用 100%，主要是因為左邊的日期已經佔用了一定的寬度。若硬是使用 100%，會使得文章標題整行被擠到下一行去。

而每個網站的版面寬度都不一樣，90% 這個數值，請依照自己的版面，來調整到比較適當的大小。

套用此 CSS 後，效果大致如下：

五、小結

單純學習 text-overflow 語法並不困難，然而大部分時候，在修改 CSS 時並不如我們想像中簡單，因為 CSS 彼此之間可能打架。如果學習 CSS 時，習慣從網路上 Google 到一段語法就直接硬套，知其然不知所以然，那麼就無法解決各種類似的版面問題。

建議讀者除了熟悉的基本語法，也最好瞭解各個參數代表的含意，然後配合本篇的各種舉例，相信就能一以貫通，搞定各種 "文字自動省略"的版面問題。

更多 CSS 相關技巧：

----
如這篇文章對您有幫助，請順手按個 +1 或分享，謝謝！

Blogger 各種圖片異常狀況處理﹍模糊+消失+超出版面

May 17, 2015, 3:30 pm

≫ Next: RWD 標頭(header)圖片實作 [CSS 技巧]

≪ Previous: 讓標題過長的文字自動省略﹍單行 CSS 技巧

$

0

0

Blogger 圖片異常的各種提問，算是非常頻繁出現的，常見狀況大致有：

1. PICASA 上傳後的圖片看起來有點失真，但 Flickr 的就不會？
2. 手機上的圖片好像比較模糊？
3. 我的 Blogger 圖片怎麼消失了？
4. 有的圖片比較大，超出文章區塊怎麼辦？

於是花了點功夫，整理所有常見的圖片相關問題，如此將來遇上，只要引用這篇的連結就好。

一、圖片超出文章區塊

上一篇「讓標題過長的文字自動省略」曾提到文字或圖片若超出區塊範圍，嚴重時可能讓版面爆掉，現在剛好來談圖片對版面造成的影響。

1. 超出部分破壞版面

當文章使用大圖、且超過文章區塊寬度時，根據範本的 CSS 設定會有兩種情形。

第一種是大圖會直接伸出版面之外，例如下圖：




2. 超出部分被隱藏

第二種是範本的文章區塊預設有 overflow: hidden這個 CSS 語法時，那麼大圖不會影響版面，但超出的部分會被隱藏，例如下圖：




然而每個範本的 CSS 都不同，而有自行修改 CSS 經驗的讀者會瞭解，想要找出這個 overflow: hidden 被放置在哪裡，並不是一件容易的事。要解決以上兩種狀況，由改變圖片尺寸下手會是比較適當的作法。


3. 將大圖改為最適尺寸

請按照這個流程來修改文章區塊中的圖片 CSS：後台範本 → 自訂 → 進階 → 新增 CSS，然後填入以下語法：

.post-body img {
max-width: 100%;
}

以上的語法會讓 Blogger "文章區塊"的所有圖片，最大寬度自動調整為文章區塊的寬度 (100%)。改完之後的效果如下，圖片就能完整呈現，也不會超出版面了：

二、圖片色彩失真

這是最常見的問題，可參考這個「Blogger 社群討論串」，從 Blogger 後台上傳、或放在 PICASA 的圖片，都可能看起來色系怪怪的。借用 +Sophia Peng 提供的圖，上下半部的圖片，看起來是有色差的：




這件事的兇手要算 Google+，因為申請了 G+ 帳號後，如果將 Blogger 帳號合併到 G+，由於 PICASA 也整合到了 G+，而 G+ 有個 "自動修圖"的選項，其預設值是開啟的，這會造成某些圖片被系統自動調整顏色，但我們卻不一定想要這樣的效果。

所以解決辦法就是關閉這個選項，請進入以下網址：

• https://plus.google.com/settings?hl=zh_TW

往下捲，找到 "自動修圖"選項，改為 "關閉"即可：




如果讀者需要 "自動修圖"的功能，但又不想 Blogger 上傳的圖片被調整顏色，可參考 +Mark X 這個「G+ 討論串」，為不同相簿各自設定 "自動修圖"的權限。

三、圖片模糊﹍原始圖片過大

Blogger 圖片會變模糊，有各式各樣的情境，可依照大標題逐一來檢測。

這是「案例一」的場景，案主表示他使用的多為高清圖片，約為 3000~4000px，那麼的確在原始圖片過大時，有一種情況會讓圖片變得解析度不佳。

「Blogger 圖片語法轉換器」留言 #4 為案例二的場景，也是類似的情形，最後案主採用的方法為自行調整尺寸後，再上傳到 Blogger，不過現在說明更方便的設定方法。

一樣進入「G+ 的設定網址」，往下捲，找到 "上傳完整大小的相片"這個選項：




在沒有勾選的情況下，G+ 會自動將所有圖片縮小為 2048 x 2048 以下的尺寸，就不會計算儲存空間的額度，這是 G+ 的貼心設計。

除非你想上傳完整的 3000~4000px 尺寸的圖片，不然一般不會勾選這個選項。但太大的圖片，被自動縮小為 2048 x 2048 的尺寸時，那麼副作用就是這個章節的狀況 → 圖片解析度變差，看起來稍微模糊一些。

四、手機圖片模糊

前述的案例一還提到另一個狀況，網頁版圖片沒問題，手機圖片卻看起來模糊。

1. 手機系統的問題

這篇「在手機螢幕上瀏覽照片時候比較模糊, 但放到電腦上看就不會」，有人提供了不錯的心得，某些手機型號的設計，會自動壓縮、調整圖片，而導致圖片看起來模糊。

如果是這樣的情況，看起來是手機本身的問題，也只能尋求手機本身的設定來解決了。


2. Blogger 行動版的圖片

如果有看過這篇「加快 Blogger 行動版圖片載入速度的密技」，並根據該文流程、在 Blogger 後台編輯文章時，手動設定了圖片尺寸的話，會讓 Blogger 行動版的圖片，自動調整為 280px 寬。

這個密技可讓 Blogger 行動版的網頁載入速度提升不少，但是不明瞭原理的人，就可能誤以為 Blogger 行動版的圖片怎麼變得比較模糊？(因為只剩 280px 寬)

五、圖片模糊﹍尺寸變小

另一個誤以為圖片變得模糊的案例，可參考這個「Blogger 社群討論串」，案主從 Blogger 後台上傳圖片時，沒有選擇 "原始大小"的選項，而導致這個誤會。

一般來說，上傳圖片後，Blogger 會詢問顯示的圖片尺寸，如下圖：




預設選項為 "中"，也就是顯示約 400px 寬的圖片。那麼當你的圖片超過 400px 時，被系統自動縮小為 400px 的狀態，看起來就不太清楚。

要避免這個情形，就得每次都勾選 "原始大小"。然而不可諱言的，這也是 Blogger 一個設計不良的地方，若能自動記憶我們勾選的項目，不必每次都重新選擇，才是友善的使用者體驗。

六、圖片消失了

這也是常常看到的提問，例如這個「Blogger 社群討論串」。不少使用者可能不清楚自己做過了什麼事，忽然間發現 Blogger 的圖片不見了，或是出現了大大的 "禁止"圖示，代表這張圖片無法讀取。

通常這樣的情形依然是發生在 PICASA 圖床(也可說是 G+ 相簿)，去除使用者將圖片誤刪的情況，那麼多半是 G+ 圖片的權限沒有設定為公開，導致圖片無法外連。

G+ 相簿權限的說明，可參考這份「官方文件」。而修改 G+ 相簿的步驟，可參考 +Chester Chen 在該討論串的回覆，他提供的示意圖如下，按著做設定權限為公開，圖片就能外連了：

更多 Blogger 相關技巧：

----
如這篇文章對您有幫助，請順手按個 +1 或分享，謝謝！

RWD 標頭(header)圖片實作 [CSS 技巧]

May 21, 2015, 4:00 am

≫ Next: [教學] 讓新版 Google 表單(試算表)能自動寄信﹍(1) 製作表單格式

≪ Previous: Blogger 各種圖片異常狀況處理﹍模糊+消失+超出版面

$

0

0

使用自適應網頁(RWD)時，標頭圖片的設計與擺放，需要一些巧思與技巧。既然希望網頁能自適應調整寬度，那麼標頭圖片自然在不同寬度之下，都不能讓訪客覺得突兀。

最近接到一個標頭圖片的需求，希望在 "不同寬度下都能填滿整個螢幕"。也許字面上不容易理解，因此用文章開頭的示意圖來說明：

1. 紅框範圍的寬度，代表螢幕(滿幅)寬度。
2. 有的版型會設定 "內襯值" (padding)，在標頭區塊、文章區塊之外留白，使版面不會讓人喘不過氣來 → 這個 "內襯值"就是紅框與橘框之間的距離
3. 橘框的範圍就是標頭區塊。

本篇的任務，就是讓橘框的標頭圖案，在各種螢幕寬度之下，都能成為紅框的寬度，也就是 100% 填滿螢幕，但文章區塊仍保持不變。先提醒一下，理解內容需要一些 CSS 基本知識。

一、知名網站的運用

1. 傳統型部落格

先來比較一下知名部落格的標頭。這是「重灌狂人」的標頭：



這個版型由於在標頭設定了內襯，標頭區塊是無法達到滿幅寬的。因為沒有針對 RWD 設計，算是比較傳統的版型(本站也是)，不過對於資訊類的網站而言，文字內容才是重點。


2. RWD 部落格

這是「免費資源網路社群」的標頭：



我們可看到導覽列以上的部分(含標頭)，都是填滿 100% 螢幕的寬度，可以試著按 Ctrl +/-來縮放螢幕，標頭永遠可以滿幅。

同為資訊類網站，RWD 版型對於讀者的閱讀體驗，多少是有加到分的。


3. 知名網站

部落格之外，世界知名網站的標頭，大多是滿幅設計，例如「SONY」：



同樣是導覽列以上的區塊以 100% 螢幕寬度呈現，但內文區塊則未隨之變動。之後的實作，會以類似 SONY 這樣的效果來進行。

二、Blogger 版型的限制

其實 Blogger 要搞定 CSS，比一般網站還來的麻煩，因為官方預設了很多 CSS 參數，主要是為了能同時設計、相容數十種版型。而曾經自行調整 CSS 的讀者，應該能感受到修改 CSS 的不便。

先說結論，官方提供的版型，預設的範本不是每個都能讓標頭 100% 滿幅。

1. 不能滿幅的範本

以下這些範本 "簡單"、"圖片視窗"、"輕柔雅緻"、"旅遊"，標頭區塊無法滿幅：



從這些圖可看到，標頭區塊的四周被包圍住(可看到框線)，跟文章開頭的示意圖類似，因此無法延展到 100% 寬度。


2. 可以滿幅的範本

以下這些範本 "頂尖企業"、"浮水印"，標頭區塊可以滿幅：



從這些圖可看到，標頭區塊的四周沒有看到明顯界限，因此有可能延展到 100% 寬度。

如果讀者選用了能滿幅的官方範本，那麼可以模擬本篇的實作；而如果不是這些範本，那麼請看文末的解決方法。

三、滿幅標頭圖片實作

接下來以 +Livia 小米 的「行動版標頭」為例，進行標頭圖片的設計。因為行動版網頁的標頭，需要因應各種 "不同裝置的寬度" + "直立/橫躺"的排列組合，製作上比起網頁版更需要考慮 RWD 效果。

1. 含背景色的圖片



一開始嘗試擺放如上圖 500px 寬的圖片，寬度設為 100%(讓圖片自動縮放)，CSS 參數如下：

#header img {
width: 100%
}

在螢幕比較小的手機、直立擺放下，顯示不會有問題，如下圖為模擬 iPhone 4 的效果：




不過螢幕比較大的手機，橫躺擺放時，螢幕寬度必定超過 500px，那麼原圖就會被拉撐，解析度變低，同時高度也會等比例增加。如下圖為模擬 iPhone 6s 橫躺的效果：



也許 500px 延展到 736px 看起來不是那麼嚴重，不過現在手機解析度越來越高，超過 1000px 已是家常便飯，更何況平板的解析度更高，屆時圖片可能出現馬賽客。因此一張 500px 寬的圖片，只怕無法自適應螢幕尺寸。

但若為了大螢幕行動裝置而改用例如 1920px 寬的圖片，來符合各種尺寸需求，這反而更不可行，一方面行動裝置應該「縮短圖片載入時間」而使用小尺寸圖片，一方面設計成 1920px 寬的圖片，在小尺寸手機螢幕上擠壓成 320px 寬，這效果可能慘不忍睹！


2. 不含背景色的圖片



要解決這些困境，使用 "不含背景色的透明圖片"是一個不錯的技巧。現在我們改用上圖一樣是 500px 寬的透明圖片，設定改為 "最大寬度" 100%、置中顯示，CSS 參數如下：

#header {
text-align: center;
}
#header img {
max-width: 100%
}

現在一樣用 iPhone 6s 橫躺來模擬，效果如下：




除了圖片置中、解析度不會降低、高度不會被拉撐(可視範圍增加)這幾點之外，我們可以看到透明圖的優點，即使行動裝置的螢幕大到 1920px，由於底色都相同，看起來沒有違和感。




什麼是違和感？把透明圖改成原本有背景的圖片後再置中，上圖看起來就稍嫌彆扭了！


3. 設定底色

最後，使用透明圖的優點我們知道了，但會有個問題，好像不太能辨識出標頭區塊的範圍對吧？只要簡單一個動作就能解決這個問題 → 設定底色。

在原來的 #header 加入底色的色碼，例如：

background: #f5cfe2;
那麼效果就如同下圖，完美的 RWD 標頭圖片就完成了：




補上 iPhone 4 小螢幕直立的效果：

四、滿幅頁尾圖片範例

使用透明圖 + 設定底色的技巧與優點，同樣可以套用在頁尾的版面。



上圖為頁尾原始版本，使用了預設的背景圖案。由於上方有四顆按鈕，這四張圖片必須用 HTML 語法另外擺放。

若頁尾圖片設定為符合 100% 寬度，那麼當螢幕經過縮放後，這四顆按鈕與下方版權宣告的相對位置，就會四處亂跑了。




現在改用前述的技巧，使用透明圖 + 置中的技巧，那麼不管螢幕多大多小，都有 RWD 效果，且按鈕跟頁尾圖片的位置都能固定住了。

五、補充說明

1. 突破版型限制

前面提到 Blogger 有某些版型無法設定 100% 寬度的標頭區塊，那麼在這種情況下要怎麼處理呢？由於細節很瑣碎，因此不做 Step by Step 說明，不過熟悉 CSS 的讀者相信知道該怎麼做。

提供一個可以實作的方向，我們發現 Blogger 在任何新開的網站，網頁最上方一定會強制出現一排導覽列(有 "下一個網誌"按鈕)，若仔細觀察的話，這就是 100% 滿幅寬的區域，無論我們怎麼縮放螢幕。

因此我們可以觀察這個區塊的 CSS 是如何製作的，WFU 簡單歸納一下：

• 確認 body 設為 position: relative，且不限制最大寬度。
• 將導覽列設為 position: absolute、width: 100%、設定 z-index、設定 height
• 導覽列的 height 設定為多少，在導覽列之後的區塊就得設定 margin-top 多少。

原理說明如上，請讀者自行實作了。


2. 隨機標頭圖案

設定了美美的標頭圖案後，喜歡換版型的站長可能會偶爾會想更換標頭圖案。有修改能力的話，可研究一下這篇「隨機顯示 Blogger 標頭圖片」，多準備幾張圖片，那麼每次進入網頁，就能看到不一樣的版面風格了。

更多 CSS 技巧：

----
如這篇文章對您有幫助，請順手按個 +1 或分享，謝謝！

[教學] 讓新版 Google 表單(試算表)能自動寄信﹍(1) 製作表單格式

May 23, 2015, 2:06 am

≫ Next: [教學] 讓新版 Google 表單(試算表)能自動寄信﹍(2) 安裝程式碼

≪ Previous: RWD 標頭(header)圖片實作 [CSS 技巧]

$

0

0

之前舊版的「讓 Google 試算表能自動寄信」，由於近期 Google Drive 雲端硬碟陸續強制升級為新版，如果是新的使用者，已經無法依照原本的流程安裝，因為官方已經取消了舊版試算表的「指令碼庫」功能，無法從後台安裝 FormEmailer 這個自動回信外掛。

其實自動回信的程式碼不難，官方已經提供了 API 可以套用，因此乾脆自己寫個簡便短小的工具，有需要的讀者可以照流程進行，一共分為兩篇，第一篇為製作表單檔案，第二篇為安裝後台自動執行的寄信程式。

為何舊版的流程只有一篇，而這個輕便的程式反而需要更多篇幅呢？主要是因為舊版雲端硬碟的 "表單"與 "試算表"儲存在同一個檔案，操作比較簡單；而新版雲端硬碟必須 "表單"製作一個檔案、"試算表"另外一個檔案，只好分成兩篇說明了。

(圖片出處: pexels.com)

一、自動寄信方案的抉擇

新版雲端硬碟雖然也可找到寄信外掛，例如「Yet Another Mail Merge」，不過比原本的難用很多。如果要繼續使用 FormEmailer 也不是不行，那麼只能改為手動安裝程式碼。

一方面 FormEmailer 手動安裝的流程長，一方面 FormEmailer 的開發比較像個套裝軟體，功能很多很強，程式碼幾乎用了上千行，執行起來較耗 Google 伺服器的資源。

其實 "自動寄信"的功能只要幾行就解決了，如果跟 WFU 一樣只需要 "寄信"功能而已，那麼不一定需要安裝 FormEmailer。如果改用 WFU 的工具，簡潔的寄信程式執行快、可減少伺服器資源的使用，這一點對於長期使用 Google 免費資源的我們來說，能夠幫 Google 節省越多資源，代表免費資源減少濫用，自然能使用得越長久。

二、製作新版 Google 表單

首先進入「Google Drive」官網：



如上圖，按「新增」→「更多」→「Google 表單」




如上圖，依 A~E 的順序：

• A. 修改表單標題
• B. 改為「單行文字」
• C. 填入自訂項目的字串。如果需要使用「Google 試算表當小型資料庫」，請依照這篇的說明改用 "小寫英數組合"的字串。
• D. 按下「完成」，結束第一個項目的設定。
• E. 按下「新增項目」設定其餘項目。

重複 B~D 流程來設定其餘所有表單項目。




補充一下，這三個項目是模擬「會員系統」讓會員填寫的項目，如果要讓填寫表單的人，填寫完畢之後能夠收到感謝、或是制式訊息，那麼設計表單項目時必須有一欄能填入 email 才行。

比較常見的情境像是問卷調查、或是出試題給學生，填寫完畢後自動把記錄用 email 給填寫者留存，例如「讓 Google 試算表製作的問卷試題能自動計分」。

完成所有項目後，如上圖按下「查看即時表單」，可測試填寫表單。




此為範例畫面，填寫完按「提交」即可




填寫完畢後，若想利用試算表儲存所有表單提交的記錄，得另外產生一個試算表。請按「查看回應」→ 修改試算表的標題字串 → 按下「建立」即可。




在 Google Drive 的主畫面可看到這個新建立的試算表




進入試算表後，可看到我們剛剛填寫的內容，已經儲存到試算表當中。

完成以上流程後，接著下一篇將說明，如何在新版 Google 試算表，安裝「自動寄信」的程式碼。

• 讓新版 Google 試算表(表單)能自動寄信﹍(2) 安裝程式碼

----
如這篇文章對您有幫助，請順手按個 +1 或分享，謝謝！

---

[教學] 讓新版 Google 表單(試算表)能自動寄信﹍(2) 安裝程式碼

May 23, 2015, 6:12 pm

≫ Next: 讓 Line 按鈕只在手機+行動裝置顯示

≪ Previous: [教學] 讓新版 Google 表單(試算表)能自動寄信﹍(1) 製作表單格式

$

0

0

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





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




圖中紅框原本的程式碼請全部清除，置換為本文的安裝程式碼。

三、安裝程式碼

如果要修改參數的話，請參照以上程式碼行號。

B：紅色字串請務必改為自己的 email 地址

C：此行字串可改為自訂標題

D：如果你的 Google 表單供填寫 email 的項目名稱就是 "email"，此項不必變動

E：每個 Google 帳號每日可寄信的額度為 100 封，可設定剩下多少額度時通知自己。

這個工具預設為寄信給填表者，如果要改為只通知自己的話，請將 W行的 notifyEmail 置換為 adminEmail，那麼我們不必進入試算表，就能即時看到所有的填寫資訊，也是相當方便的功能。

四、設定寄信觸發程序

程式碼設定完畢後，如上圖，先按 A 處的圖示儲存，再按「資源」→「現有專案的啟動程序」，來設定觸發程序。




按下紅框的字串




按 A~C 的順序，依序調整為圖中的選項，便能在填寫者提交表單時，立即送出 email 通知。

最後按下「儲存」。




寄信功能會要求授權，應該會彈出上圖訊息，按下「繼續」，並依照後續畫面指示，完成授權動作即可。

過去曾有讀者表示，授權畫面不會出現，最後搞了很久才找出原因，原來是瀏覽器安裝了「擋廣告」之類的外掛。建議讀者不要安裝各種擋廣告的外掛，否則很多網頁異常的狀況會讓你花更多時間 debug，卻又找不出原因來。

五、測試自動寄信功能

回到試算表主畫面，我們來試試看能否自動寄信。如上圖按「表單」→「查看即時表單」，自行填寫表單測試。




隨意填寫，按「提交」送出資料。




回到試算表，立即看到新增的一筆資料，請看紅色底線標註的時間點。

如果有安裝「Checker Plus for Gmail™」這類的瀏覽器外掛，其實沒幾秒就會收到信件通知了。




檢視一下 Gmail 的畫面，果然馬上就收到了表單填寫通知。而且無論表單設計了幾個項目，這個工具都會取出所有項目及填寫資料，並在通知信件中列出，可說非常的實用！

更多 Google 試算表工具：

----
如這篇文章對您有幫助，請順手按個 +1 或分享，謝謝！

讓 Line 按鈕只在手機+行動裝置顯示

May 30, 2015, 6:57 pm

≫ Next: 取消 Blogger 行動版「向左/向右滑」切換文章的功能 [加值文章]

≪ Previous: [教學] 讓新版 Google 表單(試算表)能自動寄信﹍(2) 安裝程式碼

$

0

0

如果網站有安裝過 Line 按鈕的話，應該會發現只有行動裝置(手機+平板)有作用，而網頁版的 Line 按鈕按下後，只會連結到官網。

前陣子有讀者反應，"能否讓 Line 按鈕只在手機及平板出現，網頁版不要出現？"。的確，如果能這麼做的話是最好，以下就來看看這件事如何進行。

一、Line 按鈕的難題

先說結論，這件事沒有 100% 的完美解決方法，但是有應付 95% 的語法，在新技術尚未出來之前，相信這是可以接受的處理方式。

1. 判斷行動裝置

事情的癥結在於目前不存在一個完整的機制，能夠有效偵測所有的行動裝置。雖然兩大陣營 Android、iOS 可以用語法偵測出來，但由於行動裝置推陳出新，新型號、山寨機不斷產生，終究兩大系統之外的機型，JS 語法不一定能偵測得到。


2. 目前完美解法

唯一能偵測所有行動裝置的方法，就是建立一個資料庫，記錄所有型號，例如這個「mobile-detect.js」。

先說結論，WFU 不認為這是好的解決方案，一方面這個外掛檔案太大(35k)，沒什麼必要為了 Line 按鈕這件事而多裝個大外掛；另一方面不斷有新的行動裝置機型，代表你得每個一段時間就到官網檢查 mobile-detect.js 是否有更新，不但麻煩，而且作者也不見得願意這麼勤奮，肯無償花時間來隨時更新資料庫。


3. 最佳解

WFU 認為的最佳解，就是不要追求完美解，捨棄支援少部分行動裝置，讓主流行動裝置能支援就好。如此不但省事，也不必安裝多餘外掛。

二、安裝 Line 按鈕

雖然「Line官網」提供了分享按鈕的安裝語法，不過執行效果不是很好。

請參考這篇「Line 分享按鈕各種行動裝置都相容的語法」，改用調校過的語法，可以在各種行動裝置的執行效果最佳化。

三、判斷行動裝置

1. 判斷行動裝置的語法

根據這篇「What is the best way to detect a mobile device in jQuery?」，以下的語法可以判斷出九成以上的行動裝置，涵蓋了 Andoird/蘋果/黑莓機...等等：

<script>
if( /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent) ) {
// 這裡放入 Line 安裝語法
}
</script>

2. 判斷手機的語法

如果要排除平板，單單判斷出手機裝置的話，Blogger 有個「行動版判斷式」滿好用的。

偷偷看了一下 Blogger 原始碼，研究一下 Google 工程師是怎麼判斷行動裝置的：

var a="indexOf",b="&m=1",e="(^|&)m=",f="?",g="?m=1";function h(){var c=window.location.href,d=c.split(f);switch(d.length){case 1:return c+g;case 2:return 0<=d[1].search(e)?null:c+b;default:return null}}var k=navigator.userAgent;if(-1!=k[a]("Mobile")&&-1!=k[a]("WebKit")&&-1==k[a]("iPad")||-1!=k[a]("Opera Mini")||-1!=k[a]("IEMobile")){var l=h();l&&window.location.replace(l)};
這一段看起來像是天書的內容，跟前面判斷行動裝置的語法沒有差太遠，試著改成以下：

<script>
if( /iPhone|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent) && /(?=.*Mobile)(?=.*WebKit)/i.test(navigator.userAgent)) {
// 這裡放入 Line 安裝語法
}
</script>

四、程式碼安裝方式

1. 通用安裝方式

最簡單、所有網站通用的 Line 按鈕安裝方式，請按以下流程：

使用「三、判斷行動裝置」→「1. 判斷行動裝置的語法」的程式碼
將 "// 這裡放入 Line 安裝語法"這些字串，改成「Line 分享按鈕各種行動裝置都相容的語法」裡的程式碼 D~I 行即可。


2. Blogger 安裝方式

Blogger 由於網頁版跟行動版範本不同，也許讀者對於 Line 按鈕，在網頁版與行動版想要擺放的位置並不一樣，那麼就得利用判斷式分別設定了。

例如手機 Line 按鈕可用以下的程式碼：

<b:if cond='data:blog.isMobile'>
這裡填入通用安裝方式的程式碼
</b:if>

平板 Line 按鈕可用以下的程式碼：

<b:if cond='!data:blog.isMobile'>
這裡填入通用安裝方式的程式碼
</b:if>

附個圖記錄一下調整後的效果，這是網頁版的擺設：




這是行動版(手機)上的模擬效果：

Line 相關文章：

----
如這篇文章對您有幫助，請順手按個 +1 或分享，謝謝！

取消 Blogger 行動版「向左/向右滑」切換文章的功能 [加值文章]

June 3, 2015, 10:08 pm

≫ Next: 客製 Blogger 行動版範本, 改善網頁載入效能

≪ Previous: 讓 Line 按鈕只在手機+行動裝置顯示

$

0

0

有多位讀者反應 Blogger 行動版一個非常擾民的問題，也就是操作手機時，滑動螢幕只要稍微不小心往左或往右，就會切換到「上一篇/下一篇」文章。

這個功能的設計想必是出於貼心的考量、方便訪客操作頁面的切換，但往往我們是在操作「往上/往下」時，不小心手勢的角度偏左或偏右，便會立即觸發「往左/往右」的手勢，讓網頁切換到我們不想前往的頁面，也就是跳離了這篇文章。

如果你也不喜歡官方的這個設計，那麼可以安裝本文的小工具，將此功能取消，給訪客友善的操作體驗。

一、加值文章

請注意，本篇為加值文章，需先加入會員，並獲得點數才能兌換。

有的會員可能會發現，現有的點數已經足以兌換這個小工具，而有的會員則否。由於「加值文章」功能才剛剛上線，產品線仍在規劃中。等過一陣子「會員系統」結束試營運、開始正式營運的時候，會進行詳細說明。




複習一下開頭的示意圖，Blogger 在手機上向左或向右滑動時，會出現圖中的藍底半圓形，及向左向右箭頭，用來提示網頁即將前往上一頁或下一頁。

如果動作慢一點，那麼是來得及終止滑動的操作，不過相信訪客不會對 Blogger 網站的操作那麼熟悉，通常都是手一滑就出去了，然後很生氣 "為什麼明明我沒有要跳開，畫面卻自動跳開了！？"

二、準備動作

如「Blogger 行動版範本修改技巧」所提，Blogger 行動版只有選擇「自訂」才能修改，其他的官方範本全部都不能修改，因此請參照該篇文章 →「二、修改行動範本準備動作」的步驟，確認你已經改用「自訂」的行動版範本，否則依照本文安裝的程式碼將不會有任何作用。

三、安裝程式碼

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

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

儲存後即可看到效果。

四、聯絡表單

加值文章關閉留言板功能，使用上有任何問題請用下面的表單與我聯繫：

Blogger 行動版相關文章：

----
如這篇文章對您有幫助，請順手按個 +1 或分享，謝謝！

客製 Blogger 行動版範本, 改善網頁載入效能

June 5, 2015, 5:00 pm

≫ Next: 協助架設 Blogger 網站, 優化非官方範本

≪ Previous: 取消 Blogger 行動版「向左/向右滑」切換文章的功能 [加值文章]

$

0

0

想要改善 Blogger 行動版的網頁載入效能，最簡單的方法是使用「官方行動版範本」。如果你的網站只是純粹分享文章，那麼的確採取這個方案即可。

如果你準備經營個人品牌、形象網站，那麼「官方行動版範本」顯然是不夠的，因為無法打造自己的版面效果，營造更好的視覺形象。

使用 RWD 範本也可以自訂行動裝置呈現的版面效果，然而缺點就是範本內容過於龐大，圖片尺寸跟網頁版一樣，導致行動裝置載入網頁的使用者體驗很差。

如果你是想加強行動版體驗、準備經營個人品牌的站長，那麼接下來的內容，可以知道客製行動版範本能做到哪些改善。

(圖片出處: pixabay.com)

一、版面效果

官方行動版的畫面很簡潔，但是讀者絕對感受不出跟網頁版是同一個網站，我們來舉個簡單的例子，這是「CC0 免費圖庫搜尋引擎」的網頁版畫面：




這是使用官方行動版的畫面，模擬 iPhone6 橫躺的效果：




上圖這樣的行動版，說實在還滿醜的，等於把自己的專業形象搞砸了。行動裝置使用率越來越高的情況下，為了維持風格的一致性，有必要對行動版下點功夫。

以下是調整過的行動版畫面，模擬 iPhone4 橫躺的效果：





以上兩圖調整了標頭圖案、頁尾的設計，讓網頁版與行動版的畫面一致，這也是形象網站的基本要求。

二、改善行動版效能

拜 Google 大神之賜，網路上免費的外掛可以很容易地取得，站長們也習慣在部落格嘗試各種外掛。如果是網頁版的話，或許桌上型電腦的配備執行起來比較沒問題，然而行動版就不一定了。

行動裝置由於體積小、且越做越薄，在這麼狹小、不亦散熱的空間中，要讓手機能跟桌機有一樣的執行效能實在太困難了。所以對於行動版範本，我們必須做出大量的取捨，沒必要的外掛最好通通不執行，網頁載入速度才能提升，如此才能有好的使用者體驗。

如果不清楚該如何取捨外掛的去留，那麼客製行動版的案子中可與 WFU 進行討論。

三、處理圖片尺寸

圖片是影響行動裝置載入速度的最大原因，因為載入速度取決於傳輸速度，而傳輸檔案之中，最大的都會是圖檔。

如果是旅遊、美食、攝影這一類的網站，那麼用手機開啟網站就要有心理準備了，在這麼小的螢幕、卻要開啟跟網頁版一模一樣的圖片尺寸，速度絕對比網頁版慢上好幾倍。

經由客製行動版範本，這個大問題將可以獲得解決，無論你的圖床放在 PICASA或是 FLICKR，都可以經由處理後，將行動版的圖片改以小尺寸呈現，不再需要載入原尺寸。

四、聯絡表單

過去 WFU 曾協助處理的架站案例，可參考「諮詢服務與提案合作」→「4. 合作網站」，同時該篇也有多位讀者發表從 WFU BLOG 獲得協助的感謝推薦心得。

經由以上介紹，有需要進行客製 Blogger 行動版範本的讀者，參考報價請前往「會員加值文章」的頁面，另外請用下面的表單與我聯繫：

----
如這篇文章對您有幫助，請順手按個 +1 或分享，謝謝！

協助架設 Blogger 網站, 優化非官方範本

June 6, 2015, 3:00 pm

≫ Next: 標頭 Banner 隨機輪播熱門文章﹍提高網站點閱率

≪ Previous: 客製 Blogger 行動版範本, 改善網頁載入效能

$

0

0

架設網站時使用的平台考量，用最簡單的二分法判斷，就是你需不需要使用主機。若不需要主機的話，使用雲端服務即可，沒有流量限制，這方面最好的選擇就是 Google 旗下的 Blogger 平台，沒有之一！

那什麼情況需要使用主機呢？無論是使用自己的主機、或是租用主機，都是一筆昂貴的開銷，一年至少要有數千元的預算、甚至上萬，還要有資安維護的本事(防駭客)。不過有主機的話，另外再投資 10 萬以上，網站就能從事更高階的商業活動，例如：

• 建立大型資料庫，進行檢索查詢。
• 串接金流，提供顧客線上刷卡結帳、自動處理訂單流程。

如果沒有以上兩者需求，或是只需要簡單的會員系統、購物車、PAYPAL 刷卡功能，那麼 Blogger 將是最划算的架站選擇。

(圖片出處: pixabay.com)

一、Blogger 平台的優點

Blogger 平台到底划算在哪裡，請見以下條列分析：

• 不需要主機費用
• 沒有流量限制
• 不需要圖床費用
• 不需要防駭客(由 Google 工程師代勞)
• 網路上有數不清的免費工具可以安裝
• 網路上有數不清的免費範本可以套用
• 有商業需求，也可購買商業範本(含購物車)
• 有 Google 這個網路巨擘當後盾

從以上優點來看，用 Blogger 架站幾乎是零成本，跟使用主機自架站的費用相差甚遠。

二、Blogger 架站的需求

1. 當作日誌分享

如果你架站只是為了單純寫文章、記錄人生，那麼不必具備什麼基本知識，使用 Blogger 官方提供的現有功能，就足夠滿足這樣的需求。


2. 經營個人品牌、形象網站

如果架站是為了打響知名度，或是當作一個形象官網，那麼設計網站就不能隨便，需要有一點 HTML/CSS/美術設計的基礎比較好。

如果你使用的是 Blogger 官方範本、能自行修改範本內容及版型的話，在具備基礎知識的前提下，WFU BLOG 有許多經驗分享，你也可以在相關文章提問，我會盡量提供意見。


3. 商業經營

如果有商業需求，那麼官方範本顯然不夠美觀，可以在以下範本網站找到很多不錯的免費、付費範本：

• btemplates.com
• ivythemes.blogspot.com
• www.templateism.com

補充說明一下，如果在本站詢問非官方範本、或其他網站寫的外掛，必須花時間去瞭解別人程式的思考邏輯、架構等等，時間成本很高，WFU 就無法如同官方範本一樣免費提供諮詢。

三、協助架站

如果有以下狀況，WFU 可提供協助架站的服務：

• 沒有 HTML/CSS/JS 的基礎
• 自行架設 Blogger 網站有困難
• 套用非官方範本後，不知如何改成心目中滿意的樣式
• 想要製作行動版網站
• 想架設商業網站、購物車等功能
• 想安裝「會員系統」功能

自行摸索需要花費大量時間學習，專業的技術交由專家處理可以獲得更高的成效。如果評估過你的時間成本花在主業上可以獲得更多收益，那麼不妨將 Blogger 的大小事交由 WFU 處理，除了這裡是研究 Blogger 最專精的網站，同時 WFU 抱著服務讀者的立場，處理網站事務的價格都是非常優惠的。

如果需要參考報價的話，請前往「會員加值文章」的頁面，實際金額將依照 case 難易度詳細討論。

四、聯絡表單

過去 WFU 曾協助處理的架站案例，可參考「諮詢服務與提案合作」→「4. 合作網站」，同時該篇也有多位讀者發表從 WFU BLOG 獲得協助的感謝推薦心得。

經由以上介紹，有需要協助架設網站、處理 Blogger 網站各種事務的讀者，請用下面的表單與我聯繫：

----
如這篇文章對您有幫助，請順手按個 +1 或分享，謝謝！

標頭 Banner 隨機輪播熱門文章﹍提高網站點閱率

June 8, 2015, 3:00 pm

≫ Next: Blogger 相關文章 V3 [加值文章]

≪ Previous: 協助架設 Blogger 網站, 優化非官方範本

$

0

0

相信在逛網站的時候，越上方的位置、越吸睛的圖片比較能吸引到目光，因此我們很常看到輪播圖片的小工具，被擺放在網頁最上方的位置。

這不是沒有道理的，根據「F 形眼球運動軌跡」，多數訪客的行為模式就是如此。

如果想推銷網站的熱門文章，那麼在網頁上方擺放輪播圖片，會是一個增加點閱率，以及讓訪客停留時間更長的好主意。於是寫了本篇的小工具，請見後續的說明及安裝方法。

一、設計原理

1. 吸引注意力

想要吸引注意力的話，文章使用的圖片不能品質太差，最好特別挑過，建議可利用「CC0 免費圖庫搜尋引擎」，可找到許多高畫質的圖片。


2. 文章品質

這個工具並非使用隨機文章的方式，從整個網站抽樣，原因在於，既然要吸引注意力，就得特別挑出真正「高品質」的文章，也可以是網站的熱門文章。

如果用隨機抽樣的方式，那麼很可能挑出一些不具吸引力的文章，那麼也失去使用這個工具的效果。


3. 自訂口袋名單

因此，這個小工具的設定其實有些麻煩，必須手動填入抽樣的母體資料，也就是文章標題、網址、縮圖網址等等。

雖然如此，這件事跟 SEO 很類似，下的功夫比別人足，得到的效果自然勝過競爭對手。


4. 自訂圖片尺寸

如果使用 PICASA 圖床、G+ 相簿、從 Blogger 後台上傳等管道所產生的圖片，這個工具可以產生自訂尺寸的縮圖，圖片顯示效果最佳。如果使用別的圖床(如 Flickr)，那麼只能強制圖片變形為指定的尺寸。

二、安裝程式碼

1. 擺放位置

這個小工具可以放在「HTML/JavaScript」工具，然後拖曳到你想呈現的位置，例如下圖：



除了放在導覽列下方，也可拖曳到標頭的上方，視讀者的版型配置而定。


2. 安裝程式碼

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

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

E：要顯示的文章數量

F~G：設定圖片的寬度、高度(px值)

J：接下來需要詳細說明──

• 第一篇文章使用的參數為紅色數字 0，第二篇文章使用的參數為紅色數字 1 (如 K行)，之後以此類推。
• 每篇文章需要填入 "標題", "文章網址", "圖片網址"三種字串
• 如綠字提示，字串要放在雙引號內, 每個字串彼此間用小寫逗號 ","分隔, 最後一個字串之後不可有逗號
• 每增加一篇文章的資料，可完整複製 J或 K行來修改，依序放在 J、K行之後，以避免出錯，造成程式當掉。

三、補充說明

如果要修改版面效果，請修改 CSS 這部分的參數即可。

這個小工具的程式碼不難，就開放源碼，不特別壓縮了，會修改的讀者可自行改成想要呈現的樣式。而不熟悉程式碼、想自訂功能的讀者，則請參考「客製諮詢」的內容。

更多網站工具：

----
如這篇文章對您有幫助，請順手按個 +1 或分享，謝謝！

Blogger 相關文章 V3 [加值文章]

June 11, 2015, 5:03 pm

≫ Next: Blogger 插入表格的最佳流程 + 自適應寬度表格

≪ Previous: 標頭 Banner 隨機輪播熱門文章﹍提高網站點閱率

$

0

0

這個工具使用了「相關文章」的版本號，但其實跟「相關文章 V2」的市場、用途並不相同。V2 版的文章會顯示縮圖，而 V3 版完全只有文字，難不成這個工具退化了嗎？

其實他比較偏向「系列文功能」的風格，只列出建議閱讀清單的文章標題。但篩選方式又不同，系列文是利用 "關鍵字"來篩選，而這個 V3 版則是用 "標籤"來篩選，與相關文章的篩選方式雷同，因此歸類於「相關文章」。

雖說只顯示文字，但功能與效果十分強大，請見後續的說明。

(圖片出處: lifeofpix.com)

一、功能介紹

請注意，此篇為加值文章，需先加入會員，並累積足夠點數才能兌換。

1. 舊文章不必設定

使用「系列文功能」功能時，必須每篇文章手動設定關鍵字，才能產生推薦給讀者的系列相關文章列表。當部落格有上百篇舊文章時，一篇篇設定就是一件大工程了。

這個 V3 版本針對此點，可讓舊文章不必手動設定，也能自動產生相關文章列表，這就幫我們節省了可觀的時間。

而相關文章列表篩選的依據為，自動抓取該篇文章的所有標籤，從這些標籤的所有文章，隨機抽出指定數量的文章，自動於文末列出。


2. 手動與自動設定並存

舊文章可自動設定，那麼新文章能不能手動設定呢？

可以的，如果你想指定列出特定標籤的相關文章，可單獨在該篇文章手動設定，那麼該篇文章就不會從所有標籤來抽樣，只會從特定標籤來抽樣，達到更精確的「相關文章」列表。


3. 支援多重標籤

這算是特殊用途，有的讀者可能想在某篇文章做出多個標籤的文章列表，那麼無論你設定幾個標籤，就能顯示幾個「相關文章」的列表。


4. 適用場合

為了縮短網頁載入時間，行動裝置不適合載入太多圖片，因此「相關文章 V2」的縮圖模式盡量不要用在行動版。取而代之的，這個 V3 版本的文字模式，就很適合用在 Blogger 行動範本。

如果要細分適用的文章性質，像是旅遊、美食類的文章，文末最好列出含相似字串文章標題，例如一系列的 "墾丁"遊記，而這些遊記使用的標籤可能會是 "南部旅遊"之類，這樣情況的情況使用「系列文功能」比較恰當，可以篩選出網站所有含 "墾丁"標題的文章。

如果不需要篩選特定字串，那麼「相關文章 V3」基本上適用所有類型的網站，可篩選特定標籤、也可篩選該篇文章所有標籤的文章。

二、準備動作

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

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

<script src='//ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js'></script>
<style>
/* 相關文章 V3 start */
.rltPost3 { /* 整個區塊 */
margin: 20px 0;
font-size: 14px;
}
.rltPost3_title { /* 標題 */
text-decoration: none!important;
font-weight: bold;
color: #666!important;
}
/* 相關文章 V3 end */
</style>
第一行綠字可參考「如何使用jQuery版本」，檢查範本是否已安裝過 jquery，以免重複安裝。

其餘的部分，如果對 CSS 熟悉可自行修改參數。

三、安裝程式碼

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

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

F：紅色數字請改為相關文章想顯示的數量

G：藍色字串可改為自訂標題。此字串只有在該篇文章未指定篩選的標籤時，才會出現。

H：如果使用官方範本的話，這一行基本上不必動。此參數代表「相關文章」會出現在文章結束處。

J：由於過去發生「Google Drive(js檔)流量限速」的情形，為了避免將來某天這個小工具無預警罷工，建議讀者有空的時候，參考以上文章連結，自行將綠色字串的 js 檔分流。

四、使用說明

1. 基本使用方式

基本上，程式碼安裝完、儲存範本後，網站的每篇文章結束處，就會自動產生相關文章了。

如前所述，這個工具會自動從該篇文章的所有標籤，隨機抽選相關的文章出來。


2. 手動設定篩選標籤

如果想要讓某篇文章的推薦文章更精確，可以手動設定標題與標籤名稱。

以「Blogger 多層下拉選單實作」為例，這篇文章使用了三個標籤 "導覽列"、"CSS"、"HTML"，而 WFU 認為會看這篇文章的讀者，可能對 Blogger "導覽列"的相關技巧會更有興趣，那麼就可設定只篩選出 "導覽列"的相關文章出來，效果會比混合標籤抽樣更佳。

操作流程如下：

A. 編輯該篇文章，切換到 HTML 模式。

B. 在想要顯示的地方(通常是最下方)，插入這行字串：

<div class="rltPost3" data-label="導覽列">Blogger 導覽列相關技巧：</div>
C. 以上紅色字串請置換為指定標籤名稱；藍色字串改為自訂的標題名稱。


3. 多重標籤顯示

如果一篇文章想顯示多個「相關文章」清單，那麼只要填入多行的參數字串即可，例如文章中插入以下兩行字串：

<div class="rltPost3" data-label="導覽列">Blogger 導覽列相關技巧：</div>

<div class="rltPost3" data-label="CSS">更多 CSS 相關技巧：</div>

想先看一下多重標籤的效果，可前往以下網頁：

點此看範例網頁

五、聯絡表單

加值文章關閉留言板功能，使用上有任何問題請用下面的表單與我聯繫：

六、常見 FAQ

日後若有常見問題，會持續補充在此。

Q1: 請問v2跟V3能否並存? 設定成V3只有在手機板執行V2電腦版執行?

Ans: 因為 V3 使用了部分 V2 的演算法，同時使用了相同的變數名稱，兩個程式若在同一個頁面同時執行的話，怕會引起錯誤。

不過若是一個在手機版、一個在電腦版執行，那就不會有任何影響了，例如使用以下的 Blogger 判斷式：

<b:if cond='data:blog.isMobile'>
這裡填入行動版要執行的程式碼，例如 V3
<b:else/>
這裡填入電腦版要執行的程式碼，例如 V2
</b:if>


更多實用工具：

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

----
如這篇文章對您有幫助，請順手按個 +1 或分享，謝謝！

---

Blogger 插入表格的最佳流程 + 自適應寬度表格

June 14, 2015, 5:55 am

≫ Next: Unicode 表情圖案(emoji ) + 特殊符號字元一覽表

≪ Previous: Blogger 相關文章 V3 [加值文章]

$

0

0

過去就曾耳聞 Blogger 文章中插入表格(table)時，會遇到一些狀況，不過直到最近需要在網站整理一些表格，才有這個機會來研究這個主題。

Blogger 文章編輯器其實問題不少，過去曾整理過一篇「Blogger 文章編輯模式只要切換, 就可能產生異常現象?」。而插入表格時，一定會切換到 "撰寫"模式，那麼自然得小心副作用。

本篇整理了我的使用心得，並整理出一套比較安全的操作心得，有需要的讀者可以參考。

(圖片出處: morguefile.com)

一、淘汰方案

要在 Blogger 文章中插入表格，由於官方沒提供這個功能，因此我們必須先在別處製作好表格。

1. WORD

過去常見的方案是微軟的 WORD，因為每個 Windows 系統都有，軟體取得容易。而 WFU 不推薦使用 WORD 的原因為：

• 製作表格需要多幾個步驟
• 不方便對表格資料進行處理，例如加總、處理字串等等

由於操作不方便，因此這是個被淘汰的方案。


2. EXCEL

微軟的 EXCEL 是真正的試算表，比 WORD 強的地方是，可以對表格資料進行批次處理，例如加總、處理字串等等。

不過經實測後發現，EXCEL 表格複製的內容貼上 Blogger 編輯器後，完全沒有作用，因此一樣得淘汰。

二、標準方案

1. Google 試算表

Google Drive(雲端硬碟) 之中的 Google 試算表，有微軟 Excel 的優點、沒有 WORD 的缺點。

經實測後，從 Google 試算表選取的表格內容，直接貼到 Blogger 編輯器的 "撰寫"模式後，可以複製完整的格式，包含顏色、底色、樣式等等，不愧是自家人的產品，相容性很好。

WFU 從這個網頁「Emoji Unicode Tables」複製表格到 Google 試算表：




用程式處理過字串後，再貼到 Blogger，一樣能顯示出原本網頁的底色樣式(隔行換色)：




2. 試算表的缺點

雖然 Google 試算表的表格貼到 Blogger 的效果很好，不過「金玉其外，敗絮其中」，從 "撰寫"模式切換到 "HTML"模式就看得出來：



以上這麼一大串雜亂的 HTML 碼，只不過顯示完標題列的第三個標題而已。很明顯的，複製過來的內容膨脹得很厲害，多了非常多不必要的字串參數。


3. 儲存字數有所限制

也許讀者覺得沒什麼關係，能顯示出我要的效果就好了。的確，當表格內容不多的時候，看不出影響。然而，WFU 第一次製作表格，就遇上 "存不了檔"的噩耗。

經過交叉比對後才發現，原來超過一定字數之後，Blogger 就會存不了檔。如果要把原網頁所有的 Unicode 圖案全部貼到 Blogger，由於複製過程產生了太多無用字串，導致超過一篇文章的限制。

但 WFU 又不願意將這個表格拆成兩篇文章發表，那麼真的想完整複製所有 Unicode 圖案的話，光靠 Google 試算表還是不行的。

三、推薦方案

於是 WFU 開始尋找，能否有什麼工具，可以自動去除 Google 試算表表格的不必要字串？

1. Evernote

運氣不錯的是，Evernote是我常用的數位工具，試著把 Google 試算表表格貼到 Evernote 後，過個水再從 Evernote 貼到 Blogger，發現少了很多字串參數。而且 Evernote 在複製過程中，仍然能保留原本的底色、樣式等等，這真的是幫了大忙。

其實 Evernote 本身也有製作表格的功能，或許讀者也可考慮直接從 Evernote 的表格複製到 Blogger，只不過這麼一來，就跟使用 Word 是一樣的意思，得多一道工，且表格的功能不足，因此只適合處理不需加工的簡單表格內容。


2. 簡化 CSS

如果讀者熟悉 CSS 概念的話，那麼可以將表格內容更加的簡化。

例如我們會看到 "HTML"模式中的字串，有一大堆 style="...."這樣的內容，其實都是重複的字串。我們可以這麼做：

• 為同樣的 style 參數取 class 名稱
• 用文書編輯軟體，將 style="...."置換為 class="自定義名稱"
• 然後在 style 標籤之中新增這個 class 的 CSS 參數

如此除了可以讓 html 內容不那麼雜亂，也能在 Blogger 文章中塞進更多表格內容。


3. 補充

如開頭所提，Blogger 切換 "撰寫"模式與 "HTML"模式就可能出現意料之外的狀況，因此建議表格如果有任何編輯的動作，例如上色、改變字體等等，請在別處就編輯完畢，然後再複製過來，這才是最保險的操作方式，在 Blogger 編輯器的動作盡量越少越好。

熟練以上流程後，相信讀者都能對處理 Blogger 表格駕輕就熟，將錯誤降低到最少。

四、自適應寬度表格

2015.6.18 新增：Hexie Zuo 於留言 #2 表示行動版表格會讓版面異常，因此請按以下方式修改，讓表格能自適應各種螢幕寬度來調整。

1. 編輯文章 → 切換到 HTML 模式 → 找到 <table......> 的區塊，新增以下紅字：

<table style="width: 100%; table-layout: fixed;" ......>

2. 找到 <colgroup><col width="XXX">......</colgroup> 這樣的區塊，這段 html 碼設定了每一欄的寬度，你會看到看到每個 col 後面的 width 設定了不同的 XXX像素(px)值 → 由於這是固定數值，因此在網頁版可以正常顯示，而在行動版寬度較窄的情況下，就無法正常顯示了。

3. 請將每個 col 後面 width 裡面的數值 XXX，全部改成百分比，例如 10%。假設 colgroup 區間有三個 col，那麼這三個 col 的百分比數值加總必須是 100%，這樣就沒問題了，例如分別設定為 30%、30%、40%。

4. 可參考「Unicode 表情圖案一覽表」這個網頁，行動版也不會讓表格超出螢幕寬度。

更多 Blogger 技巧：

----
如這篇文章對您有幫助，請順手按個 +1 或分享，謝謝！

Unicode 表情圖案(emoji ) + 特殊符號字元一覽表

June 15, 2015, 4:35 pm

≫ Next: 如何讓 Unicode 表情圖案 (特殊符號) 在網頁上正常顯示？

≪ Previous: Blogger 插入表格的最佳流程 + 自適應寬度表格

$

0

0

網頁常常會用到一些小圖示，例如搜尋框、郵件圖示、留言對話泡泡等。最簡單的方法可以直接 Google 這些圖示、或是到素材網站尋找合適的圖案，不過最近發現「Unicode 組織」越做越強大，很多常用的圖示都已經可以在 Unicode 編碼中找到。

而且 Unicode 非常跟的上潮流，FB、Line 等社交工具的風行，讓表情圖案需求大增，因此 Unicode 早已創造了許多表情圖案，且每年不斷地持續新增，今年~明年將有數百個表情符號可用。

本篇整理了所有 Unicode 特殊字元、符號的一覽表，方便查詢及複製。不過 Blogger 平台請等下一篇的使用說明書，因為 Blogger 編輯器對 Unicode 的相容性有點問題，需要特殊技巧才能正常顯示，貿然使用可能會引起災難，還請耐心等待。

注意事項

1. 符號表出處

本篇符號表的來源為這一篇「Emoji Unicode Tables」，「emoji」是日本用語，中文大致是 "繪文字"的意思。

目前市面上的 Unicode 為 7.0 版，而 8.0 版預計明天 2015.6.17 會上市。究竟新的版本會增加哪些表情圖案？好奇的讀者可先參考官網的說明：「UNICODE EMOJI」


2. 瀏覽器、作業系統支援性

然而，別說即將新出的 8.0 版，就算是目前的 7.0 版，讀者都不一定能在螢幕上看得到，不信的話，可以再拜訪一次「Emoji Unicode Tables」，運氣最差的狀況，可能有八成都看不到，為何會如此呢？

一方面是瀏覽器的關係，如果你使用的瀏覽器有內建這些 Unicode 的字型編碼，那就看得到。一方面是作業系統的字型緣故，XP 支援的 Unicode 字型最少，Win7 次之，Win8 則支援最多的符號。


3. 一覽表

本篇整理的表格，已經後製處理過，無論讀者使用 XP、或是任何瀏覽器，都能看到所有的特殊圖案，利於挑選及複製需要的符號來使用。建議可以將本篇網址存入書籤，方便日後查詢。

1. 表情 (1F601-1F64F)

圖案	CSS	HTML	BLOGGER 範本	英文
😁	\1F601	😁	😁	grinning face with smiling eyes
😂	\1F602	😂	😂	face with tears of joy
😃	\1F603	😃	😃	smiling face with open mouth
😄	\1F604	😄	😄	smiling face with open mouth and smiling eyes
😅	\1F605	😅	😅	smiling face with open mouth and cold sweat
😆	\1F606	😆	😆	smiling face with open mouth and tightly-closed eyes
😉	\1F609	😉	😉	winking face
😊	\1F60A	😊	😊	smiling face with smiling eyes
😋	\1F60B	😋	😋	face savouring delicious food
😌	\1F60C	😌	😌	relieved face
😍	\1F60D	😍	😍	smiling face with heart-shaped eyes
😏	\1F60F	😏	😏	smirking face
😒	\1F612	😒	😒	unamused face
😓	\1F613	😓	😓	face with cold sweat
😔	\1F614	😔	😔	pensive face
😖	\1F616	😖	😖	confounded face
😘	\1F618	😘	😘	face throwing a kiss
😚	\1F61A	😚	😚	kissing face with closed eyes
😜	\1F61C	😜	😜	face with stuck-out tongue and winking eye
😝	\1F61D	😝	😝	face with stuck-out tongue and tightly-closed eyes
😞	\1F61E	😞	😞	disappointed face
😠	\1F620	😠	😠	angry face
😡	\1F621	😡	😡	pouting face
😢	\1F622	😢	😢	crying face
😣	\1F623	😣	😣	persevering face
😤	\1F624	😤	😤	face with look of triumph
😥	\1F625	😥	😥	disappointed but relieved face
😨	\1F628	😨	😨	fearful face
😩	\1F629	😩	😩	weary face
😪	\1F62A	😪	😪	sleepy face
😫	\1F62B	😫	😫	tired face
😭	\1F62D	😭	😭	loudly crying face
😰	\1F630	😰	😰	face with open mouth and cold sweat
😱	\1F631	😱	😱	face screaming in fear
😲	\1F632	😲	😲	astonished face
😳	\1F633	😳	😳	flushed face
😵	\1F635	😵	😵	dizzy face
😷	\1F637	😷	😷	face with medical mask
😸	\1F638	😸	😸	grinning cat face with smiling eyes
😹	\1F639	😹	😹	cat face with tears of joy
😺	\1F63A	😺	😺	smiling cat face with open mouth
😻	\1F63B	😻	😻	smiling cat face with heart-shaped eyes
😼	\1F63C	😼	😼	cat face with wry smile
😽	\1F63D	😽	😽	kissing cat face with closed eyes
😾	\1F63E	😾	😾	pouting cat face
😿	\1F63F	😿	😿	crying cat face
🙀	\1F640	🙀	🙀	weary cat face
🙅	\1F645	🙅	🙅	face with no good gesture
🙆	\1F646	🙆	🙆	face with ok gesture
🙇	\1F647	🙇	🙇	person bowing deeply
🙈	\1F648	🙈	🙈	see-no-evil monkey
🙉	\1F649	🙉	🙉	hear-no-evil monkey
🙊	\1F64A	🙊	🙊	speak-no-evil monkey
🙋	\1F64B	🙋	🙋	happy person raising one hand
🙌	\1F64C	🙌	🙌	person raising both hands in celebration
🙍	\1F64D	🙍	🙍	person frowning
🙎	\1F64E	🙎	🙎	person with pouting face
🙏	\1F64F	🙏	🙏	person with folded hands

2. 雜錦字型 (2702-27B0)

圖案	CSS	HTML	BLOGGER 範本	英文
✂	\2702	✂	✂	black scissors
✅	\2705	✅	✅	white heavy check mark
✈	\2708	✈	✈	airplane
✉	\2709	✉	✉	envelope
✊	\270A	✊	✊	raised fist
✋	\270B	✋	✋	raised hand
✌	\270C	✌	✌	victory hand
✏	\270F	✏	✏	pencil
✒	\2712	✒	✒	black nib
✔	\2714	✔	✔	heavy check mark
✖	\2716	✖	✖	heavy multiplication x
✨	\2728	✨	✨	sparkles
✳	\2733	✳	✳	eight spoked asterisk
✴	\2734	✴	✴	eight pointed black star
❄	\2744	❄	❄	snowflake
❇	\2747	❇	❇	sparkle
❌	\274C	❌	❌	cross mark
❎	\274E	❎	❎	negative squared cross mark
❓	\2753	❓	❓	black question mark ornament
❔	\2754	❔	❔	white question mark ornament
❕	\2755	❕	❕	white exclamation mark ornament
❗	\2757	❗	❗	heavy exclamation mark symbol
❤	\2764	❤	❤	heavy black heart
➕	\2795	➕	➕	heavy plus sign
➖	\2796	➖	➖	heavy minus sign
➗	\2797	➗	➗	heavy division sign
➡	\27A1	➡	➡	black rightwards arrow
➰	\27B0	➰	➰	curly loop

3. 交通運輸 (1F680-1F6C0)

圖案	CSS	HTML	BLOGGER 範本	英文
🚀	\1F680	🚀	🚀	rocket
🚃	\1F683	🚃	🚃	railway car
🚄	\1F684	🚄	🚄	high-speed train
🚅	\1F685	🚅	🚅	high-speed train with bullet nose
🚇	\1F687	🚇	🚇	metro
🚉	\1F689	🚉	🚉	station
🚌	\1F68C	🚌	🚌	bus
🚏	\1F68F	🚏	🚏	bus stop
🚑	\1F691	🚑	🚑	ambulance
🚒	\1F692	🚒	🚒	fire engine
🚓	\1F693	🚓	🚓	police car
🚕	\1F695	🚕	🚕	taxi
🚗	\1F697	🚗	🚗	automobile
🚙	\1F699	🚙	🚙	recreational vehicle
🚚	\1F69A	🚚	🚚	delivery truck
🚢	\1F6A2	🚢	🚢	ship
🚤	\1F6A4	🚤	🚤	speedboat
🚥	\1F6A5	🚥	🚥	horizontal traffic light
🚧	\1F6A7	🚧	🚧	construction sign
🚨	\1F6A8	🚨	🚨	police cars revolving light
🚩	\1F6A9	🚩	🚩	triangular flag on post
🚪	\1F6AA	🚪	🚪	door
🚫	\1F6AB	🚫	🚫	no entry sign
🚬	\1F6AC	🚬	🚬	smoking symbol
🚭	\1F6AD	🚭	🚭	no smoking symbol
🚲	\1F6B2	🚲	🚲	bicycle
🚶	\1F6B6	🚶	🚶	pedestrian
🚹	\1F6B9	🚹	🚹	mens symbol
🚺	\1F6BA	🚺	🚺	womens symbol
🚻	\1F6BB	🚻	🚻	restroom
🚼	\1F6BC	🚼	🚼	baby symbol
🚽	\1F6BD	🚽	🚽	toilet
🚾	\1F6BE	🚾	🚾	water closet
🛀	\1F6C0	🛀	🛀	bath

4. 圖框符號 (24C2-1F251)

圖案	CSS	HTML	BLOGGER 範本	英文
Ⓜ	\24C2	Ⓜ	Ⓜ	circled latin capital letter m
🅰	\1F170	🅰	🅰	negative squared latin capital letter a
🅱	\1F171	🅱	🅱	negative squared latin capital letter b
🅾	\1F17E	🅾	🅾	negative squared latin capital letter o
🅿	\1F17F	🅿	🅿	negative squared latin capital letter p
🆎	\1F18E	🆎	🆎	negative squared ab
🆑	\1F191	🆑	🆑	squared cl
🆒	\1F192	🆒	🆒	squared cool
🆓	\1F193	🆓	🆓	squared free
🆔	\1F194	🆔	🆔	squared id
🆕	\1F195	🆕	🆕	squared new
🆖	\1F196	🆖	🆖	squared ng
🆗	\1F197	🆗	🆗	squared ok
🆘	\1F198	🆘	🆘	squared sos
🆙	\1F199	🆙	🆙	squared up with exclamation mark
🆚	\1F19A	🆚	🆚	squared vs
🈁	\1F201	🈁	🈁	squared katakana koko
🈂	\1F202	🈂	🈂	squared katakana sa
🈚	\1F21A	🈚	🈚	squared cjk unified ideograph-7121
🈯	\1F22F	🈯	🈯	squared cjk unified ideograph-6307
🈲	\1F232	🈲	🈲	squared cjk unified ideograph-7981
🈳	\1F233	🈳	🈳	squared cjk unified ideograph-7a7a
🈴	\1F234	🈴	🈴	squared cjk unified ideograph-5408
🈵	\1F235	🈵	🈵	squared cjk unified ideograph-6e80
🈶	\1F236	🈶	🈶	squared cjk unified ideograph-6709
🈷	\1F237	🈷	🈷	squared cjk unified ideograph-6708
🈸	\1F238	🈸	🈸	squared cjk unified ideograph-7533
🈹	\1F239	🈹	🈹	squared cjk unified ideograph-5272
🈺	\1F23A	🈺	🈺	squared cjk unified ideograph-55b6
🉐	\1F250	🉐	🉐	circled ideograph advantage
🉑	\1F251	🉑	🉑	circled ideograph accept

5. 未分類

圖案	CSS	HTML	BLOGGER 範本	英文
©	\00A9	©	©	copyright sign
®	\00AE	®	®	registered sign
‼	\203C	‼	‼	double exclamation mark
⁉	\2049	⁉	⁉	exclamation question mark
™	\2122	™	™	trade mark sign
ℹ	\2139	ℹ	ℹ	information source
↔	\2194	↔	↔	left right arrow
↕	\2195	↕	↕	up down arrow
↖	\2196	↖	↖	north west arrow
↗	\2197	↗	↗	north east arrow
↘	\2198	↘	↘	south east arrow
↙	\2199	↙	↙	south west arrow
↩	\21A9	↩	↩	leftwards arrow with hook
↪	\21AA	↪	↪	rightwards arrow with hook
⌚	\231A	⌚	⌚	watch
⌛	\231B	⌛	⌛	hourglass
⏩	\23E9	⏩	⏩	black right-pointing double triangle
⏪	\23EA	⏪	⏪	black left-pointing double triangle
⏫	\23EB	⏫	⏫	black up-pointing double triangle
⏬	\23EC	⏬	⏬	black down-pointing double triangle
⏰	\23F0	⏰	⏰	alarm clock
⏳	\23F3	⏳	⏳	hourglass with flowing sand
▪	\25AA	▪	▪	black small square
▫	\25AB	▫	▫	white small square
▶	\25B6	▶	▶	black right-pointing triangle
◀	\25C0	◀	◀	black left-pointing triangle
◻	\25FB	◻	◻	white medium square
◼	\25FC	◼	◼	black medium square
◽	\25FD	◽	◽	white medium small square
◾	\25FE	◾	◾	black medium small square
☀	\2600	☀	☀	black sun with rays
☁	\2601	☁	☁	cloud
☎	\260E	☎	☎	black telephone
☑	\2611	☑	☑	ballot box with check
☔	\2614	☔	☔	umbrella with rain drops
☕	\2615	☕	☕	hot beverage
☝	\261D	☝	☝	white up pointing index
☺	\263A	☺	☺	white smiling face
♈	\2648	♈	♈	aries
♉	\2649	♉	♉	taurus
♊	\264A	♊	♊	gemini
♋	\264B	♋	♋	cancer
♌	\264C	♌	♌	leo
♍	\264D	♍	♍	virgo
♎	\264E	♎	♎	libra
♏	\264F	♏	♏	scorpius
♐	\2650	♐	♐	sagittarius
♑	\2651	♑	♑	capricorn
♒	\2652	♒	♒	aquarius
♓	\2653	♓	♓	pisces
♠	\2660	♠	♠	black spade suit
♣	\2663	♣	♣	black club suit
♥	\2665	♥	♥	black heart suit
♦	\2666	♦	♦	black diamond suit
♨	\2668	♨	♨	hot springs
♻	\267B	♻	♻	black universal recycling symbol
♿	\267F	♿	♿	wheelchair symbol
⚓	\2693	⚓	⚓	anchor
⚠	\26A0	⚠	⚠	warning sign
⚡	\26A1	⚡	⚡	high voltage sign
⚪	\26AA	⚪	⚪	medium white circle
⚫	\26AB	⚫	⚫	medium black circle
⚽	\26BD	⚽	⚽	soccer ball
⚾	\26BE	⚾	⚾	baseball
⛄	\26C4	⛄	⛄	snowman without snow
⛅	\26C5	⛅	⛅	sun behind cloud
⛎	\26CE	⛎	⛎	ophiuchus
⛔	\26D4	⛔	⛔	no entry
⛪	\26EA	⛪	⛪	church
⛲	\26F2	⛲	⛲	fountain
⛳	\26F3	⛳	⛳	flag in hole
⛵	\26F5	⛵	⛵	sailboat
⛺	\26FA	⛺	⛺	tent
⛽	\26FD	⛽	⛽	fuel pump
⤴	\2934	⤴	⤴	arrow pointing rightwards then curving upwards
⤵	\2935	⤵	⤵	arrow pointing rightwards then curving downwards
⬅	\2B05	⬅	⬅	leftwards black arrow
⬆	\2B06	⬆	⬆	upwards black arrow
⬇	\2B07	⬇	⬇	downwards black arrow
⬛	\2B1B	⬛	⬛	black large square
⬜	\2B1C	⬜	⬜	white large square
⭐	\2B50	⭐	⭐	white medium star
⭕	\2B55	⭕	⭕	heavy large circle
〰	\3030	〰	〰	wavy dash
〽	\303D	〽	〽	part alternation mark
㊗	\3297	㊗	㊗	circled ideograph congratulation
㊙	\3299	㊙	㊙	circled ideograph secret
🀄	\1F004	🀄	🀄	mahjong tile red dragon
🃏	\1F0CF	🃏	🃏	playing card black joker
🌀	\1F300	🌀	🌀	cyclone
🌁	\1F301	🌁	🌁	foggy
🌂	\1F302	🌂	🌂	closed umbrella
🌃	\1F303	🌃	🌃	night with stars
🌄	\1F304	🌄	🌄	sunrise over mountains
🌅	\1F305	🌅	🌅	sunrise
🌆	\1F306	🌆	🌆	cityscape at dusk
🌇	\1F307	🌇	🌇	sunset over buildings
🌈	\1F308	🌈	🌈	rainbow
🌉	\1F309	🌉	🌉	bridge at night
🌊	\1F30A	🌊	🌊	water wave
🌋	\1F30B	🌋	🌋	volcano
🌌	\1F30C	🌌	🌌	milky way
🌏	\1F30F	🌏	🌏	earth globe asia-australia
🌑	\1F311	🌑	🌑	new moon symbol
🌓	\1F313	🌓	🌓	first quarter moon symbol
🌔	\1F314	🌔	🌔	waxing gibbous moon symbol
🌕	\1F315	🌕	🌕	full moon symbol
🌙	\1F319	🌙	🌙	crescent moon
🌛	\1F31B	🌛	🌛	first quarter moon with face
🌟	\1F31F	🌟	🌟	glowing star
🌠	\1F320	🌠	🌠	shooting star
🌰	\1F330	🌰	🌰	chestnut
🌱	\1F331	🌱	🌱	seedling
🌴	\1F334	🌴	🌴	palm tree
🌵	\1F335	🌵	🌵	cactus
🌷	\1F337	🌷	🌷	tulip
🌸	\1F338	🌸	🌸	cherry blossom
🌹	\1F339	🌹	🌹	rose
🌺	\1F33A	🌺	🌺	hibiscus
🌻	\1F33B	🌻	🌻	sunflower
🌼	\1F33C	🌼	🌼	blossom
🌽	\1F33D	🌽	🌽	ear of maize
🌾	\1F33E	🌾	🌾	ear of rice
🌿	\1F33F	🌿	🌿	herb
🍀	\1F340	🍀	🍀	four leaf clover
🍁	\1F341	🍁	🍁	maple leaf
🍂	\1F342	🍂	🍂	fallen leaf
🍃	\1F343	🍃	🍃	leaf fluttering in wind
🍄	\1F344	🍄	🍄	mushroom
🍅	\1F345	🍅	🍅	tomato
🍆	\1F346	🍆	🍆	aubergine
🍇	\1F347	🍇	🍇	grapes
🍈	\1F348	🍈	🍈	melon
🍉	\1F349	🍉	🍉	watermelon
🍊	\1F34A	🍊	🍊	tangerine
🍌	\1F34C	🍌	🍌	banana
🍍	\1F34D	🍍	🍍	pineapple
🍎	\1F34E	🍎	🍎	red apple
🍏	\1F34F	🍏	🍏	green apple
🍑	\1F351	🍑	🍑	peach
🍒	\1F352	🍒	🍒	cherries
🍓	\1F353	🍓	🍓	strawberry
🍔	\1F354	🍔	🍔	hamburger
🍕	\1F355	🍕	🍕	slice of pizza
🍖	\1F356	🍖	🍖	meat on bone
🍗	\1F357	🍗	🍗	poultry leg
🍘	\1F358	🍘	🍘	rice cracker
🍙	\1F359	🍙	🍙	rice ball
🍚	\1F35A	🍚	🍚	cooked rice
🍛	\1F35B	🍛	🍛	curry and rice
🍜	\1F35C	🍜	🍜	steaming bowl
🍝	\1F35D	🍝	🍝	spaghetti
🍞	\1F35E	🍞	🍞	bread
🍟	\1F35F	🍟	🍟	french fries
🍠	\1F360	🍠	🍠	roasted sweet potato
🍡	\1F361	🍡	🍡	dango
🍢	\1F362	🍢	🍢	oden
🍣	\1F363	🍣	🍣	sushi
🍤	\1F364	🍤	🍤	fried shrimp
🍥	\1F365	🍥	🍥	fish cake with swirl design
🍦	\1F366	🍦	🍦	soft ice cream
🍧	\1F367	🍧	🍧	shaved ice
🍨	\1F368	🍨	🍨	ice cream
🍩	\1F369	🍩	🍩	doughnut
🍪	\1F36A	🍪	🍪	cookie
🍫	\1F36B	🍫	🍫	chocolate bar
🍬	\1F36C	🍬	🍬	candy
🍭	\1F36D	🍭	🍭	lollipop
🍮	\1F36E	🍮	🍮	custard
🍯	\1F36F	🍯	🍯	honey pot
🍰	\1F370	🍰	🍰	shortcake
🍱	\1F371	🍱	🍱	bento box
🍲	\1F372	🍲	🍲	pot of food
🍳	\1F373	🍳	🍳	cooking
🍴	\1F374	🍴	🍴	fork and knife
🍵	\1F375	🍵	🍵	teacup without handle
🍶	\1F376	🍶	🍶	sake bottle and cup
🍷	\1F377	🍷	🍷	wine glass
🍸	\1F378	🍸	🍸	cocktail glass
🍹	\1F379	🍹	🍹	tropical drink
🍺	\1F37A	🍺	🍺	beer mug
🍻	\1F37B	🍻	🍻	clinking beer mugs
🎀	\1F380	🎀	🎀	ribbon
🎁	\1F381	🎁	🎁	wrapped present
🎂	\1F382	🎂	🎂	birthday cake
🎃	\1F383	🎃	🎃	jack-o-lantern
🎄	\1F384	🎄	🎄	christmas tree
🎅	\1F385	🎅	🎅	father christmas
🎆	\1F386	🎆	🎆	fireworks
🎇	\1F387	🎇	🎇	firework sparkler
🎈	\1F388	🎈	🎈	balloon
🎉	\1F389	🎉	🎉	party popper
🎊	\1F38A	🎊	🎊	confetti ball
🎋	\1F38B	🎋	🎋	tanabata tree
🎌	\1F38C	🎌	🎌	crossed flags
🎍	\1F38D	🎍	🎍	pine decoration
🎎	\1F38E	🎎	🎎	japanese dolls
🎏	\1F38F	🎏	🎏	carp streamer
🎐	\1F390	🎐	🎐	wind chime
🎑	\1F391	🎑	🎑	moon viewing ceremony
🎒	\1F392	🎒	🎒	school satchel
🎓	\1F393	🎓	🎓	graduation cap
🎠	\1F3A0	🎠	🎠	carousel horse
🎡	\1F3A1	🎡	🎡	ferris wheel
🎢	\1F3A2	🎢	🎢	roller coaster
🎣	\1F3A3	🎣	🎣	fishing pole and fish
🎤	\1F3A4	🎤	🎤	microphone
🎥	\1F3A5	🎥	🎥	movie camera
🎦	\1F3A6	🎦	🎦	cinema
🎧	\1F3A7	🎧	🎧	headphone
🎨	\1F3A8	🎨	🎨	artist palette
🎩	\1F3A9	🎩	🎩	top hat
🎪	\1F3AA	🎪	🎪	circus tent
🎫	\1F3AB	🎫	🎫	ticket
🎬	\1F3AC	🎬	🎬	clapper board
🎭	\1F3AD	🎭	🎭	performing arts
🎮	\1F3AE	🎮	🎮	video game
🎯	\1F3AF	🎯	🎯	direct hit
🎰	\1F3B0	🎰	🎰	slot machine
🎱	\1F3B1	🎱	🎱	billiards
🎲	\1F3B2	🎲	🎲	game die
🎳	\1F3B3	🎳	🎳	bowling
🎴	\1F3B4	🎴	🎴	flower playing cards
🎵	\1F3B5	🎵	🎵	musical note
🎶	\1F3B6	🎶	🎶	multiple musical notes
🎷	\1F3B7	🎷	🎷	saxophone
🎸	\1F3B8	🎸	🎸	guitar
🎹	\1F3B9	🎹	🎹	musical keyboard
🎺	\1F3BA	🎺	🎺	trumpet
🎻	\1F3BB	🎻	🎻	violin
🎼	\1F3BC	🎼	🎼	musical score
🎽	\1F3BD	🎽	🎽	running shirt with sash
🎾	\1F3BE	🎾	🎾	tennis racquet and ball
🎿	\1F3BF	🎿	🎿	ski and ski boot
🏀	\1F3C0	🏀	🏀	basketball and hoop
🏁	\1F3C1	🏁	🏁	chequered flag
🏂	\1F3C2	🏂	🏂	snowboarder
🏃	\1F3C3	🏃	🏃	runner
🏄	\1F3C4	🏄	🏄	surfer
🏆	\1F3C6	🏆	🏆	trophy
🏈	\1F3C8	🏈	🏈	american football
🏊	\1F3CA	🏊	🏊	swimmer
🏠	\1F3E0	🏠	🏠	house building
🏡	\1F3E1	🏡	🏡	house with garden
🏢	\1F3E2	🏢	🏢	office building
🏣	\1F3E3	🏣	🏣	japanese post office
🏥	\1F3E5	🏥	🏥	hospital
🏦	\1F3E6	🏦	🏦	bank
🏧	\1F3E7	🏧	🏧	automated teller machine
🏨	\1F3E8	🏨	🏨	hotel
🏩	\1F3E9	🏩	🏩	love hotel
🏪	\1F3EA	🏪	🏪	convenience store
🏫	\1F3EB	🏫	🏫	school
🏬	\1F3EC	🏬	🏬	department store
🏭	\1F3ED	🏭	🏭	factory
🏮	\1F3EE	🏮	🏮	izakaya lantern
🏯	\1F3EF	🏯	🏯	japanese castle
🏰	\1F3F0	🏰	🏰	european castle
🐌	\1F40C	🐌	🐌	snail
🐍	\1F40D	🐍	🐍	snake
🐎	\1F40E	🐎	🐎	horse
🐑	\1F411	🐑	🐑	sheep
🐒	\1F412	🐒	🐒	monkey
🐔	\1F414	🐔	🐔	chicken
🐗	\1F417	🐗	🐗	boar
🐘	\1F418	🐘	🐘	elephant
🐙	\1F419	🐙	🐙	octopus
🐚	\1F41A	🐚	🐚	spiral shell
🐛	\1F41B	🐛	🐛	bug
🐜	\1F41C	🐜	🐜	ant
🐝	\1F41D	🐝	🐝	honeybee
🐞	\1F41E	🐞	🐞	lady beetle
🐟	\1F41F	🐟	🐟	fish
🐠	\1F420	🐠	🐠	tropical fish
🐡	\1F421	🐡	🐡	blowfish
🐢	\1F422	🐢	🐢	turtle
🐣	\1F423	🐣	🐣	hatching chick
🐤	\1F424	🐤	🐤	baby chick
🐥	\1F425	🐥	🐥	front-facing baby chick
🐦	\1F426	🐦	🐦	bird
🐧	\1F427	🐧	🐧	penguin
🐨	\1F428	🐨	🐨	koala
🐩	\1F429	🐩	🐩	poodle
🐫	\1F42B	🐫	🐫	bactrian camel
🐬	\1F42C	🐬	🐬	dolphin
🐭	\1F42D	🐭	🐭	mouse face
🐮	\1F42E	🐮	🐮	cow face
🐯	\1F42F	🐯	🐯	tiger face
🐰	\1F430	🐰	🐰	rabbit face
🐱	\1F431	🐱	🐱	cat face
🐲	\1F432	🐲	🐲	dragon face
🐳	\1F433	🐳	🐳	spouting whale
🐴	\1F434	🐴	🐴	horse face
🐵	\1F435	🐵	🐵	monkey face
🐶	\1F436	🐶	🐶	dog face
🐷	\1F437	🐷	🐷	pig face
🐸	\1F438	🐸	🐸	frog face
🐹	\1F439	🐹	🐹	hamster face
🐺	\1F43A	🐺	🐺	wolf face
🐻	\1F43B	🐻	🐻	bear face
🐼	\1F43C	🐼	🐼	panda face
🐽	\1F43D	🐽	🐽	pig nose
🐾	\1F43E	🐾	🐾	paw prints
👀	\1F440	👀	👀	eyes
👂	\1F442	👂	👂	ear
👃	\1F443	👃	👃	nose
👄	\1F444	👄	👄	mouth
👅	\1F445	👅	👅	tongue
👆	\1F446	👆	👆	white up pointing backhand index
👇	\1F447	👇	👇	white down pointing backhand index
👈	\1F448	👈	👈	white left pointing backhand index
👉	\1F449	👉	👉	white right pointing backhand index
👊	\1F44A	👊	👊	fisted hand sign
👋	\1F44B	👋	👋	waving hand sign
👌	\1F44C	👌	👌	ok hand sign
👍	\1F44D	👍	👍	thumbs up sign
👎	\1F44E	👎	👎	thumbs down sign
👏	\1F44F	👏	👏	clapping hands sign
👐	\1F450	👐	👐	open hands sign
👑	\1F451	👑	👑	crown
👒	\1F452	👒	👒	womans hat
👓	\1F453	👓	👓	eyeglasses
👔	\1F454	👔	👔	necktie
👕	\1F455	👕	👕	t-shirt
👖	\1F456	👖	👖	jeans
👗	\1F457	👗	👗	dress
👘	\1F458	👘	👘	kimono
👙	\1F459	👙	👙	bikini
👚	\1F45A	👚	👚	womans clothes
👛	\1F45B	👛	👛	purse
👜	\1F45C	👜	👜	handbag
👝	\1F45D	👝	👝	pouch
👞	\1F45E	👞	👞	mans shoe
👟	\1F45F	👟	👟	athletic shoe
👠	\1F460	👠	👠	high-heeled shoe
👡	\1F461	👡	👡	womans sandal
👢	\1F462	👢	👢	womans boots
👣	\1F463	👣	👣	footprints
👤	\1F464	👤	👤	bust in silhouette
👦	\1F466	👦	👦	boy
👧	\1F467	👧	👧	girl
👨	\1F468	👨	👨	man
👩	\1F469	👩	👩	woman
👪	\1F46A	👪	👪	family
👫	\1F46B	👫	👫	man and woman holding hands
👮	\1F46E	👮	👮	police officer
👯	\1F46F	👯	👯	woman with bunny ears
👰	\1F470	👰	👰	bride with veil
👱	\1F471	👱	👱	person with blond hair
👲	\1F472	👲	👲	man with gua pi mao
👳	\1F473	👳	👳	man with turban
👴	\1F474	👴	👴	older man
👵	\1F475	👵	👵	older woman
👶	\1F476	👶	👶	baby
👷	\1F477	👷	👷	construction worker
👸	\1F478	👸	👸	princess
👹	\1F479	👹	👹	japanese ogre
👺	\1F47A	👺	👺	japanese goblin
👻	\1F47B	👻	👻	ghost
👼	\1F47C	👼	👼	baby angel
👽	\1F47D	👽	👽	extraterrestrial alien
👾	\1F47E	👾	👾	alien monster
👿	\1F47F	👿	👿	imp
💀	\1F480	💀	💀	skull
💁	\1F481	💁	💁	information desk person
💂	\1F482	💂	💂	guardsman
💃	\1F483	💃	💃	dancer
💄	\1F484	💄	💄	lipstick
💅	\1F485	💅	💅	nail polish
💆	\1F486	💆	💆	face massage
💇	\1F487	💇	💇	haircut
💈	\1F488	💈	💈	barber pole
💉	\1F489	💉	💉	syringe
💊	\1F48A	💊	💊	pill
💋	\1F48B	💋	💋	kiss mark
💌	\1F48C	💌	💌	love letter
💍	\1F48D	💍	💍	ring
💎	\1F48E	💎	💎	gem stone
💏	\1F48F	💏	💏	kiss
💐	\1F490	💐	💐	bouquet
💑	\1F491	💑	💑	couple with heart
💒	\1F492	💒	💒	wedding
💓	\1F493	💓	💓	beating heart
💔	\1F494	💔	💔	broken heart
💕	\1F495	💕	💕	two hearts
💖	\1F496	💖	💖	sparkling heart
💗	\1F497	💗	💗	growing heart
💘	\1F498	💘	💘	heart with arrow
💙	\1F499	💙	💙	blue heart
💚	\1F49A	💚	💚	green heart
💛	\1F49B	💛	💛	yellow heart
💜	\1F49C	💜	💜	purple heart
💝	\1F49D	💝	💝	heart with ribbon
💞	\1F49E	💞	💞	revolving hearts
💟	\1F49F	💟	💟	heart decoration
💠	\1F4A0	💠	💠	diamond shape with a dot inside
💡	\1F4A1	💡	💡	electric light bulb
💢	\1F4A2	💢	💢	anger symbol
💣	\1F4A3	💣	💣	bomb
💤	\1F4A4	💤	💤	sleeping symbol
💥	\1F4A5	💥	💥	collision symbol
💦	\1F4A6	💦	💦	splashing sweat symbol
💧	\1F4A7	💧	💧	droplet
💨	\1F4A8	💨	💨	dash symbol
💩	\1F4A9	💩	💩	pile of poo
💪	\1F4AA	💪	💪	flexed biceps
💫	\1F4AB	💫	💫	dizzy symbol
💬	\1F4AC	💬	💬	speech balloon
💮	\1F4AE	💮	💮	white flower
💯	\1F4AF	💯	💯	hundred points symbol
💰	\1F4B0	💰	💰	money bag
💱	\1F4B1	💱	💱	currency exchange
💲	\1F4B2	💲	💲	heavy dollar sign
💳	\1F4B3	💳	💳	credit card
💴	\1F4B4	💴	💴	banknote with yen sign
💵	\1F4B5	💵	💵	banknote with dollar sign
💸	\1F4B8	💸	💸	money with wings
💹	\1F4B9	💹	💹	chart with upwards trend and yen sign
💺	\1F4BA	💺	💺	seat
💻	\1F4BB	💻	💻	personal computer
💼	\1F4BC	💼	💼	briefcase
💽	\1F4BD	💽	💽	minidisc
💾	\1F4BE	💾	💾	floppy disk
💿	\1F4BF	💿	💿	optical disc
📀	\1F4C0	📀	📀	dvd
📁	\1F4C1	📁	📁	file folder
📂	\1F4C2	📂	📂	open file folder
📃	\1F4C3	📃	📃	page with curl
📄	\1F4C4	📄	📄	page facing up
📅	\1F4C5	📅	📅	calendar
📆	\1F4C6	📆	📆	tear-off calendar
📇	\1F4C7	📇	📇	card index
📈	\1F4C8	📈	📈	chart with upwards trend
📉	\1F4C9	📉	📉	chart with downwards trend
📊	\1F4CA	📊	📊	bar chart
📋	\1F4CB	📋	📋	clipboard
📌	\1F4CC	📌	📌	pushpin
📍	\1F4CD	📍	📍	round pushpin
📎	\1F4CE	📎	📎	paperclip
📏	\1F4CF	📏	📏	straight ruler
📐	\1F4D0	📐	📐	triangular ruler
📑	\1F4D1	📑	📑	bookmark tabs
📒	\1F4D2	📒	📒	ledger
📓	\1F4D3	📓	📓	notebook
📔	\1F4D4	📔	📔	notebook with decorative cover
📕	\1F4D5	📕	📕	closed book
📖	\1F4D6	📖	📖	open book
📗	\1F4D7	📗	📗	green book
📘	\1F4D8	📘	📘	blue book
📙	\1F4D9	📙	📙	orange book
📚	\1F4DA	📚	📚	books
📛	\1F4DB	📛	📛	name badge
📜	\1F4DC	📜	📜	scroll
📝	\1F4DD	📝	📝	memo
📞	\1F4DE	📞	📞	telephone receiver
📟	\1F4DF	📟	📟	pager
📠	\1F4E0	📠	📠	fax machine
📡	\1F4E1	📡	📡	satellite antenna
📢	\1F4E2	📢	📢	public address loudspeaker
📣	\1F4E3	📣	📣	cheering megaphone
📤	\1F4E4	📤	📤	outbox tray
📥	\1F4E5	📥	📥	inbox tray
📦	\1F4E6	📦	📦	package
📧	\1F4E7	📧	📧	e-mail symbol
📨	\1F4E8	📨	📨	incoming envelope
📩	\1F4E9	📩	📩	envelope with downwards arrow above
📪	\1F4EA	📪	📪	closed mailbox with lowered flag
📫	\1F4EB	📫	📫	closed mailbox with raised flag
📮	\1F4EE	📮	📮	postbox
📰	\1F4F0	📰	📰	newspaper
📱	\1F4F1	📱	📱	mobile phone
📲	\1F4F2	📲	📲	mobile phone with rightwards arrow at left
📳	\1F4F3	📳	📳	vibration mode
📴	\1F4F4	📴	📴	mobile phone off
📶	\1F4F6	📶	📶	antenna with bars
📷	\1F4F7	📷	📷	camera
📹	\1F4F9	📹	📹	video camera
📺	\1F4FA	📺	📺	television
📻	\1F4FB	📻	📻	radio
📼	\1F4FC	📼	📼	videocassette
🔃	\1F503	🔃	🔃	clockwise downwards and upwards open circle arrows
🔊	\1F50A	🔊	🔊	speaker with three sound waves
🔋	\1F50B	🔋	🔋	battery
🔌	\1F50C	🔌	🔌	electric plug
🔍	\1F50D	🔍	🔍	left-pointing magnifying glass
🔎	\1F50E	🔎	🔎	right-pointing magnifying glass
🔏	\1F50F	🔏	🔏	lock with ink pen
🔐	\1F510	🔐	🔐	closed lock with key
🔑	\1F511	🔑	🔑	key
🔒	\1F512	🔒	🔒	lock
🔓	\1F513	🔓	🔓	open lock
🔔	\1F514	🔔	🔔	bell
🔖	\1F516	🔖	🔖	bookmark
🔗	\1F517	🔗	🔗	link symbol
🔘	\1F518	🔘	🔘	radio button
🔙	\1F519	🔙	🔙	back with leftwards arrow above
🔚	\1F51A	🔚	🔚	end with leftwards arrow above
🔛	\1F51B	🔛	🔛	on with exclamation mark with left right arrow above
🔜	\1F51C	🔜	🔜	soon with rightwards arrow above
🔝	\1F51D	🔝	🔝	top with upwards arrow above
🔞	\1F51E	🔞	🔞	no one under eighteen symbol
🔟	\1F51F	🔟	🔟	keycap ten
🔠	\1F520	🔠	🔠	input symbol for latin capital letters
🔡	\1F521	🔡	🔡	input symbol for latin small letters
🔢	\1F522	🔢	🔢	input symbol for numbers
🔣	\1F523	🔣	🔣	input symbol for symbols
🔤	\1F524	🔤	🔤	input symbol for latin letters
🔥	\1F525	🔥	🔥	fire
🔦	\1F526	🔦	🔦	electric torch
🔧	\1F527	🔧	🔧	wrench
🔨	\1F528	🔨	🔨	hammer
🔩	\1F529	🔩	🔩	nut and bolt
🔪	\1F52A	🔪	🔪	hocho
🔫	\1F52B	🔫	🔫	pistol
🔮	\1F52E	🔮	🔮	crystal ball
🔯	\1F52F	🔯	🔯	six pointed star with middle dot
🔰	\1F530	🔰	🔰	japanese symbol for beginner
🔱	\1F531	🔱	🔱	trident emblem
🔲	\1F532	🔲	🔲	black square button
🔳	\1F533	🔳	🔳	white square button
🔴	\1F534	🔴	🔴	large red circle
🔵	\1F535	🔵	🔵	large blue circle
🔶	\1F536	🔶	🔶	large orange diamond
🔷	\1F537	🔷	🔷	large blue diamond
🔸	\1F538	🔸	🔸	small orange diamond
🔹	\1F539	🔹	🔹	small blue diamond
🔺	\1F53A	🔺	🔺	up-pointing red triangle
🔻	\1F53B	🔻	🔻	down-pointing red triangle
🔼	\1F53C	🔼	🔼	up-pointing small red triangle
🔽	\1F53D	🔽	🔽	down-pointing small red triangle
🕐	\1F550	🕐	🕐	clock face one oclock
🕑	\1F551	🕑	🕑	clock face two oclock
🕒	\1F552	🕒	🕒	clock face three oclock
🕓	\1F553	🕓	🕓	clock face four oclock
🕔	\1F554	🕔	🕔	clock face five oclock
🕕	\1F555	🕕	🕕	clock face six oclock
🕖	\1F556	🕖	🕖	clock face seven oclock
🕗	\1F557	🕗	🕗	clock face eight oclock
🕘	\1F558	🕘	🕘	clock face nine oclock
🕙	\1F559	🕙	🕙	clock face ten oclock
🕚	\1F55A	🕚	🕚	clock face eleven oclock
🕛	\1F55B	🕛	🕛	clock face twelve oclock
🗻	\1F5FB	🗻	🗻	mount fuji
🗼	\1F5FC	🗼	🗼	tokyo tower
🗽	\1F5FD	🗽	🗽	statue of liberty
🗾	\1F5FE	🗾	🗾	silhouette of japan
🗿	\1F5FF	🗿	🗿	moyai

6a. 其他表情 (1F600-1F636)

圖案	CSS	HTML	BLOGGER 範本	英文
😀	\1F600	😀	😀	grinning face
😇	\1F607	😇	😇	smiling face with halo
😈	\1F608	😈	😈	smiling face with horns
😎	\1F60E	😎	😎	smiling face with sunglasses
😐	\1F610	😐	😐	neutral face
😑	\1F611	😑	😑	expressionless face
😕	\1F615	😕	😕	confused face
😗	\1F617	😗	😗	kissing face
😙	\1F619	😙	😙	kissing face with smiling eyes
😛	\1F61B	😛	😛	face with stuck-out tongue
😟	\1F61F	😟	😟	worried face
😦	\1F626	😦	😦	frowning face with open mouth
😧	\1F627	😧	😧	anguished face
😬	\1F62C	😬	😬	grimacing face
😮	\1F62E	😮	😮	face with open mouth
😯	\1F62F	😯	😯	hushed face
😴	\1F634	😴	😴	sleeping face
😶	\1F636	😶	😶	face without mouth

6b. 其他交通運輸 (1F681-1F6C5)

圖案	CSS	HTML	BLOGGER 範本	英文
🚁	\1F681	🚁	🚁	helicopter
🚂	\1F682	🚂	🚂	steam locomotive
🚆	\1F686	🚆	🚆	train
🚈	\1F688	🚈	🚈	light rail
🚊	\1F68A	🚊	🚊	tram
🚍	\1F68D	🚍	🚍	oncoming bus
🚎	\1F68E	🚎	🚎	trolleybus
🚐	\1F690	🚐	🚐	minibus
🚔	\1F694	🚔	🚔	oncoming police car
🚖	\1F696	🚖	🚖	oncoming taxi
🚘	\1F698	🚘	🚘	oncoming automobile
🚛	\1F69B	🚛	🚛	articulated lorry
🚜	\1F69C	🚜	🚜	tractor
🚝	\1F69D	🚝	🚝	monorail
🚞	\1F69E	🚞	🚞	mountain railway
🚟	\1F69F	🚟	🚟	suspension railway
🚠	\1F6A0	🚠	🚠	mountain cableway
🚡	\1F6A1	🚡	🚡	aerial tramway
🚣	\1F6A3	🚣	🚣	rowboat
🚦	\1F6A6	🚦	🚦	vertical traffic light
🚮	\1F6AE	🚮	🚮	put litter in its place symbol
🚯	\1F6AF	🚯	🚯	do not litter symbol
🚰	\1F6B0	🚰	🚰	potable water symbol
🚱	\1F6B1	🚱	🚱	non-potable water symbol
🚳	\1F6B3	🚳	🚳	no bicycles
🚴	\1F6B4	🚴	🚴	bicyclist
🚵	\1F6B5	🚵	🚵	mountain bicyclist
🚷	\1F6B7	🚷	🚷	no pedestrians
🚸	\1F6B8	🚸	🚸	children crossing
🚿	\1F6BF	🚿	🚿	shower
🛁	\1F6C1	🛁	🛁	bathtub
🛂	\1F6C2	🛂	🛂	passport control
🛃	\1F6C3	🛃	🛃	customs
🛄	\1F6C4	🛄	🛄	baggage claim
🛅	\1F6C5	🛅	🛅	left luggage

6c. 其他圖案 (1F30D-1F567)

圖案	CSS	HTML	BLOGGER 範本	英文
🌍	\1F30D	🌍	🌍	earth globe europe-africa
🌎	\1F30E	🌎	🌎	earth globe americas
🌐	\1F310	🌐	🌐	globe with meridians
🌒	\1F312	🌒	🌒	waxing crescent moon symbol
🌖	\1F316	🌖	🌖	waning gibbous moon symbol
🌗	\1F317	🌗	🌗	last quarter moon symbol
🌘	\1F318	🌘	🌘	waning crescent moon symbol
🌚	\1F31A	🌚	🌚	new moon with face
🌜	\1F31C	🌜	🌜	last quarter moon with face
🌝	\1F31D	🌝	🌝	full moon with face
🌞	\1F31E	🌞	🌞	sun with face
🌲	\1F332	🌲	🌲	evergreen tree
🌳	\1F333	🌳	🌳	deciduous tree
🍋	\1F34B	🍋	🍋	lemon
🍐	\1F350	🍐	🍐	pear
🍼	\1F37C	🍼	🍼	baby bottle
🏇	\1F3C7	🏇	🏇	horse racing
🏉	\1F3C9	🏉	🏉	rugby football
🏤	\1F3E4	🏤	🏤	european post office
🐀	\1F400	🐀	🐀	rat
🐁	\1F401	🐁	🐁	mouse
🐂	\1F402	🐂	🐂	ox
🐃	\1F403	🐃	🐃	water buffalo
🐄	\1F404	🐄	🐄	cow
🐅	\1F405	🐅	🐅	tiger
🐆	\1F406	🐆	🐆	leopard
🐇	\1F407	🐇	🐇	rabbit
🐈	\1F408	🐈	🐈	cat
🐉	\1F409	🐉	🐉	dragon
🐊	\1F40A	🐊	🐊	crocodile
🐋	\1F40B	🐋	🐋	whale
🐏	\1F40F	🐏	🐏	ram
🐐	\1F410	🐐	🐐	goat
🐓	\1F413	🐓	🐓	rooster
🐕	\1F415	🐕	🐕	dog
🐖	\1F416	🐖	🐖	pig
🐪	\1F42A	🐪	🐪	dromedary camel
👥	\1F465	👥	👥	busts in silhouette
👬	\1F46C	👬	👬	two men holding hands
👭	\1F46D	👭	👭	two women holding hands
💭	\1F4AD	💭	💭	thought balloon
💶	\1F4B6	💶	💶	banknote with euro sign
💷	\1F4B7	💷	💷	banknote with pound sign
📬	\1F4EC	📬	📬	open mailbox with raised flag
📭	\1F4ED	📭	📭	open mailbox with lowered flag
📯	\1F4EF	📯	📯	postal horn
📵	\1F4F5	📵	📵	no mobile phones
🔀	\1F500	🔀	🔀	twisted rightwards arrows
🔁	\1F501	🔁	🔁	clockwise rightwards and leftwards open circle arrows
🔂	\1F502	🔂	🔂	clockwise rightwards and leftwards open circle arrows with circled one overlay
🔄	\1F504	🔄	🔄	anticlockwise downwards and upwards open circle arrows
🔅	\1F505	🔅	🔅	low brightness symbol
🔆	\1F506	🔆	🔆	high brightness symbol
🔇	\1F507	🔇	🔇	speaker with cancellation stroke
🔉	\1F509	🔉	🔉	speaker with one sound wave
🔕	\1F515	🔕	🔕	bell with cancellation stroke
🔬	\1F52C	🔬	🔬	microscope
🔭	\1F52D	🔭	🔭	telescope
🕜	\1F55C	🕜	🕜	clock face one-thirty
🕝	\1F55D	🕝	🕝	clock face two-thirty
🕞	\1F55E	🕞	🕞	clock face three-thirty
🕟	\1F55F	🕟	🕟	clock face four-thirty
🕠	\1F560	🕠	🕠	clock face five-thirty
🕡	\1F561	🕡	🕡	clock face six-thirty
🕢	\1F562	🕢	🕢	clock face seven-thirty
🕣	\1F563	🕣	🕣	clock face eight-thirty
🕤	\1F564	🕤	🕤	clock face nine-thirty
🕥	\1F565	🕥	🕥	clock face ten-thirty
🕦	\1F566	🕦	🕦	clock face eleven-thirty
🕧	\1F567	🕧	🕧	clock face twelve-thirty

更多字型相關文章：

----
如這篇文章對您有幫助，請順手按個 +1 或分享，謝謝！

如何讓 Unicode 表情圖案 (特殊符號) 在網頁上正常顯示？

June 19, 2015, 1:58 am

≫ Next: 取代 ICON FONT 網頁小圖示的好選擇﹍UNICODE 特殊符號

≪ Previous: Unicode 表情圖案(emoji ) + 特殊符號字元一覽表

$

0

0

上一篇「Unicode 表情圖案(emoji ) + 特殊符號字元一覽表」，展示了許多可以取代網站小圖示的 UNICODE，其優點非常顯而易見：

1. 字元的傳輸量遠低於圖片的傳輸量
2. 可以減少許多小圖示的 http 請求量

相信對於在意網站效能的站長而言，以上兩點是非常重要的。不過 UNICODE 並非每個瀏覽器版本、每個作業系統都能完全支援，這一點上一篇有詳細說明。那麼接下來的問題會是，要怎麼讓自己網站所使用的 UNICODE 表情圖案、特殊字元，都能讓所有訪客看到呢？

一、引用字型檔

1. 支援 UNICODE 的字型

實際上，查了許多資料才發現，支援 UNICODE 表情圖案的字型並不多，而其中一個比較廣泛的字型是，微軟 WINDOWS 系統自帶的字型「Segoe UI Symbol」。

然而，點進去這個連結後，你會發現部分 UNICODE 字元可能會出現方塊狀(無法顯示)，因為 Segoe UI Symbol 這個字型，在 Win7 / Win8 所涵蓋的 UNICODE 字元數都不一樣。如果訪客的作業系統是 Win7，而我們網站放了 Win8 才能顯示的 UNICODE，訪客就看不到了。


2. 開放字型資料庫

值得慶幸的是，這個國外網站「Open Font Library」提供了 Segoe UI Symbol 這個字型，含括了 WIN7 / WIN8 都能顯示的字元，讓我們的網站可以直接連結引用該字型，實在是太方便了。

這篇「Open Font Library 開放字型資料庫，百種字體免費下載」簡單介紹了該網站，他提供我們使用各種免費字型，可運用在任意用途，還能重製字型、甚至上傳自己的作品，與所有其他使用者分享。

接下來介紹如何從 Open Font Library，引用 Segoe UI Symbol 這個字型。

二、安裝 Segoe UI Symbol

1. 先進入這個網址：

• http://openfontlibrary.org/en/font/segoe-ui-symbol

2. 畫面往下捲，在右邊欄位找到「USE THIS FONT」，可看到安裝方式。以 Blogger 為例，到後台「範本」→「編輯 HTML」，游標點進範本區塊，按 Ctrl-F 搜尋 </head>這個字串，找到後在此字串的前一行，插入以下程式碼：

<link rel="stylesheet" media="screen" href="http://openfontlibrary.org/face/segoe-ui-symbol" rel="stylesheet" type="text/css"/>

3. 接著在想使用 UNICODE 特殊符號的地方，引用字型 (font-family) 名稱 "SegoeUISymbolRegular"即可，熟悉 CSS 的讀者相信知道應該怎麼做。


4. 如果不懂 CSS，你也可以這麼做，例如使用以下 HTML 碼：


就能看到這個 UNICODE 火箭圖案了：

三、網站平台的相容性

安裝好字型後，其實還有一些問題待解決 → 網站平台的相容性。

一般來說，想要顯示火箭圖案 ，直接反白選取、複製這個字元，貼到想顯示的地方，網頁就能出現這個火箭圖案 → 恭喜你，成功的話，你的平台困難係數為 1，是最簡單的層級。

然而，Blogger 平台對 UNICODE 的支援度不太好，事情無法這麼如我們意，以下會花不少篇幅來解決這個問題。

如果讀者不是使用 BLOGGER 平台，也許你直接對著火箭複製貼上就能成功顯示，那麼就不必再看接下來的內容。

但，如果你失敗的話，就請依序按著本文以下的步驟，逐一嘗試來找出適合你平台的顯示方式，後面還有兩個層級要說明。

四、使用 UNICODE 編碼

困難係數 1 失敗的話，請改用這個方法 → 將 UNICODE 編碼。

首先複製這個火箭圖案 ，接著進入「Unicode 表情圖案(emoji ) + 特殊符號字元一覽表」，按 Ctrl-F 搜尋這個圖案，會找到這一行：



參閱 "HTML"這一欄，可找到火箭圖案的 UNICODE 編碼為 "&#x1F680;"，接下來將之前顯示火箭圖案的 HTML 碼改為以下：


這就是困難係數 2 的使用方式，應該大部分平台都能正常顯示了。

以 Blogger 而言，這樣的語法可以使用在：

1. 文章中 (HTML 編輯模式) → 千萬不要切換撰寫模式
2. HTML/JavaScript 小工具
3. 千萬不要用在 Blogger 範本中，很恐怖！

Blogger 該提醒的事情，都在以上紅字中了，讀者請切記！

五、將 UNICODE 再編碼

相信看完以上內容，讀者都能猜到困難係數 3 是什麼情境 → 就是 Blogger 範本。

如果要在 Blogger 範本使用 UNICODE 特殊符號，切記，建議先閱讀「備份範本的訣竅」系列文章，一定要先備份範本，否則會有大災難。

Blogger 範本對 UNICODE 的編碼解讀有很大的問題，為了讓 UNICODE 能顯示，這件事搞了很久才無意間找到方法。要成功顯示 UNICODE的話，一樣先參考我整理好的圖表：



看到 "Blogger 範本"這一行，將火箭圖案的 HTML 語法改為以下：


關鍵在於對著 "&"這個符號再次編碼，就能解決 Blogger 範本對 UNICODE 會產生的錯誤了。

六、CSS 編碼方式

WFU 製作的表格還有一欄 CSS，因此補充說明一下利用 CSS 顯示 UNICODE 特殊符號的方法。



從表格可看到 "CSS"這一欄的字串為 "\1F680"。如果熟悉 CSS 語法的話，可以利用偽類 :after 或 :before 來顯示 UNICODE，例如以下語法：

<style>
.rocket:after {
content: "\1F680";
}
</style>
因此善加利用「Unicode 表情圖案(emoji ) + 特殊符號字元一覽表」這個表格，可以在各種情境、甚至 CSS 都能顯示 UNICODE，建議讀者將這個表格的網址加入書籤，方便將來查詢。

七、補充

本篇看似解決了所有問題，其實因為篇幅的關係，還有最重要的一個問題尚未提及。

開頭提到，使用 UNICODE 代替圖片，可以解決載入速度問題的問題。然而，UNICODE 的特殊圖案字元數相當多，字型檔的容量也不小。使用 UNICODE 就是為了節省傳輸量，但安裝字型反而可能花費更多傳輸量，似乎是一件矛盾的事？

不過不用擔心，這件事是有解的，請待下一篇的詳細說明：

• 取代 ICON FONT 網頁小圖示的好選擇﹍UNICODE 特殊符號

更多字型相關文章：

----
如這篇文章對您有幫助，請順手按個 +1 或分享，謝謝！

取代 ICON FONT 網頁小圖示的好選擇﹍UNICODE 特殊符號

June 25, 2015, 9:07 pm

≫ Next: Facebook 停止發佈粉絲頁 RSS﹍目前只剩這個替代方案能訂閱

≪ Previous: 如何讓 Unicode 表情圖案 (特殊符號) 在網頁上正常顯示？

$

0

0

你的網站是否也用了很多小圖示，例如 "首頁"、"留言對話泡泡"、"Email"等等？這些圖檔雖然體積小，但每個檔案的載入都需要耗費一個 http 請求，是影響網頁載入速度的一個小原因。

最早為了解決這個問題，出現「CSS SPRITE」技術，將多個小圖合併為一張圖，減少了大量 http 請求。但由於手續繁雜、加上管理不便，沒什麼人有耐心採用這項技術。

後來發展出「ICON FONT」，把小圖示製作成字形，不但可減少 http 請求，每個圖示還能向量無限縮放尺寸，簡直是劃時代的技術。其中最有名的是「FONT AWESOME」這套字型，包含了不少網頁常用圖示，是許多網頁範本的愛用字型。

不過最近發現的驚奇是，其實從遠古時代就一直存在的 UNICODE 特殊符號，會是網頁小圖示更方便的選擇，本篇將詳細介紹他的優點。

(示意圖出處: foodiesfeed.com)

先簡單看一下 Unicode 特殊符號的效果，下圖是本站之前側邊欄使用的小圖示：




目前已經全面汰換成 Unicode 圖案：

一、UNICODE 與 FONT AWESOME 比較

Font Awesome 算是 Icon Font 的代表性字型，因此作為比較基準。

1. 字型檔

兩者都需要載入外部字型檔，雖然減少了小圖示的 http 請求，不過字型檔都不小，且 Unicode 的字型檔更大。

然而網頁小圖示使用的數量並不多，Unicode 字型檔有技巧可以只載入需要的特殊符號就好，如此檔案傳輸量反而遠低於 Font Awesome，後面會詳述。


2. 符號數量

符號數量越多，代表字型檔案越大。目前 Font Awesme 官網公布的數字為，4.3 版含 519 個圖案。

而 Unicode 各國文字的數量太多先略過，屬於圖案的部分超過一千個，可參考「Unicode 表情圖案 + 特殊符號一覽表」。

兩者皆不斷更新，持續有新圖案推出，


3. 使用方式

這一項才是真正讓 WFU 想採用 Unicode 的一點，主要原因為 Font Awesome 字型的使用方式讓我覺得不方便，可參考「官網範例」，例如想要顯示照相機圖案，其使用的語法為：

<i class="fa fa-camera-retro"></i>
這麼一大串語法還滿麻煩的，對於輸入不太方便，並非 WFU 想追求的懶人法。

使用 Unicode 的話，這一切就能懶人化，先查閱「Unicode 表情圖案 + 特殊符號一覽表」，找到對應的圖案，例如火箭圖案，那麼在網頁想顯示的地方，直接擺上 Html 代碼：

🚀
輸入以上字元就行了，是不是方便很多呢？

二、最佳安裝方式

在網頁安裝 Unicode 字型的方式，上一篇「如何讓 Unicode 特殊符號在網頁上正常顯示？」已經有簡單的教學，說明如何外連「Open Font Library」提供的字型檔。而其缺點為，必須載入整個 Unicode 字型檔，且檔案不小，以下說明只載入特定字元的方法。

1. 字型檔分流路徑

首先找出 Open Font Library 所提供的「Segoe UI Symbol」字型路徑：

http://openfontlibrary.org/assets/fonts/segoe-ui-symbol/e729ed87ea736b6b2c6f64550775452f/523ab078aac307d0e576a80bc155d32e/SegoeUISymbolRegular.ttf
要直接外連也可以，但外部伺服器哪天出問題也不是我們能控制的，最保險還是上傳到自己的網路空間，例如 Google Drive，可參考「Google Drive 檔案分流教學」，分流後取得外連網址。


2. 安裝語法

接著在範本中 </head> 之前，插入以下 CSS 語法：

<style>
@font-face {
font-family: 'SegoeUISymbolRegular';
src: url('http://openfontlibrary.org/assets/fonts/segoe-ui-symbol/e729ed87ea736b6b2c6f64550775452f/523ab078aac307d0e576a80bc155d32e/SegoeUISymbolRegular.ttf') format('truetype');
unicode-range: U+1F680, U+1F683, U+1F684;
}
.symbol{font-family: 'SegoeUISymbolRegular';}
</style>

• 綠色字串請參照「1. 字型檔分流路徑」自行改為分流後的路徑。
• 紅色字串為代表 Unicode 圖案的編碼字串，請參照「Unicode 表情圖案 + 特殊符號一覽表」，查閱 "CSS"這一行的字串，例如將火箭圖案的編碼 "\1F680"改成 "U+1F680"即可。訣竅很簡單，就是將 "\"字元改為 "U+"。
• 上面程式碼的舉例用了三個圖案，分別為 "火箭"、"火車"、"高鐵"圖案，如果整個網站只需要用到這三個圖案，那麼紅色字串的部分，請填入這三個編碼即可，彼此間用小寫逗號 ","隔開。
• 藍色字串如用不到可刪除，請見之後的說明。

三、使用方式

有兩種使用方法，讀者可根據自己的需求來選擇：

• 第一種準備動作多，使用方法字串較短。
• 第二種準備動作少，使用方法字串較長。

方式-1：

如果 Unicode 字元確定只在網頁某個區塊使用，例如文章區塊(假設 class 名稱為 post-body)，那麼可參考「網頁中英文字型跨平台設定最佳化」→「六、依網頁不同區塊設定 font-family」，記得在文章區塊的 font-family 之中，加入這個字型 "SegoeUISymbolRegular"，例如將上述程式碼的藍色字串改為：

.post-body{font-family: 所有原本的字型名稱, SegoeUISymbolRegular; }

完成以上設定後，在文章區塊就能隨意加入你想顯示的 Unicode 圖案。例如想加入火箭圖案，在「Unicode 表情圖案 + 特殊符號一覽表」查到火箭的 "HTML"編碼為 ""，在文章區塊直接使用此字串即可。


方式-2：

如果對 CSS 不熟悉，「使用方式-1」的方法做不來，那麼可以保留原本安裝程式碼中的藍色字串，然後在網頁中任何想使用 Unicode 圖案(例如火箭符號)的地方，插入以下語法：

<span class="symbol">&#x1F680;</span>
這會是比較簡單的方法，若要使用其他符號，請查詢 WFU 製作的「Unicode 特殊符號一覽表」來替換 HTML 編碼字元。

四、補充及使用效果

如果覺得 Unicode 特殊符號的色彩單調，其實就像一般字型一樣，都可以用 CSS 做各種效果。如果熟悉 CSS 語法，利用上色、背景色、放大縮小、動畫等等，就能讓 Unicode 圖案活潑起來。

最後附上 WFU BLOG 其他區塊使用 Unicode 圖案的效果，由於 Unicode 圖案選擇性高，數量遠超過任何一款 Icon Font，相信讀者都能找到各種實用的小圖示，加快網頁的載入速度。


標題區塊：




首頁圖案：




文末資訊：

更多字型相關主題：

----
如這篇文章對您有幫助，請順手按個 +1 或分享，謝謝！

Facebook 停止發佈粉絲頁 RSS﹍目前只剩這個替代方案能訂閱

June 30, 2015, 4:14 am

≫ Next: 讓網頁顯示特定中文字型﹍安裝實作教學

≪ Previous: 取代 ICON FONT 網頁小圖示的好選擇﹍UNICODE 特殊符號

$

0

0

之前製作了「FB 粉絲頁 RSS 網址線上產生器」，很可惜撐不到一年，日前該篇文章留言 #5 有讀者通知：「6/23 Rss for FB service has been closed down」，意思就是 FB 不支援粉絲頁的 RSS 了。

既然 FB 不玩了，那麼這件事只能靠熱心的網友來提供第三方服務，否則要提供 RSS 不是很簡單的事。運氣不錯的是，還真的有國外網友提供 RSS 服務，而且好像也找不到第二個了。

另外由於新版 FB API 的限制，就算 FB 粉絲頁能訂閱 RSS，使用上也無法再像以前一樣便利了，請見本文詳細的說明。

一、FB API 的變革

許多網路服務雖然免費又方便，但在不收費的情形下，使用者也沒什麼選擇性，或是說無法對網路公司有什麼約束、要求，API 隨時說改就改，任何養成一段時間的使用習慣，都需要有隨時放棄的心理準備。

1. 變革紀錄

這個網頁是 FB API 的變革紀錄：

• https://developers.facebook.com/docs/apps/changelog

我們可看到各版本 API 的支援期限，如果讀者的網站使用了舊版的 FB API，請注意一下到期日期，例如 V2.0 版在明年 2016 的 8 月會失效。


2. 停止 RSS 支援

官網繼續往下捲，可找到 "Page RSS Feed endpoint"這個標題，這裡說明了從 2015 年 6 月 23 日開始，FB 停止發佈粉絲頁的 RSS，這也是最近開始失效的原因。

取而代之，FB API 現在提供的是「粉絲頁 JSON」格式的資料。簡單來說，這樣的的資料格式無法訂閱，但可以用程式線上讀取。


3. 替代方案

因此現在，除非有人願意自己提供主機，幫我們把 FB 粉絲頁的資料，讀取 JSON 格式後，存在主機上，並發佈為 RSS，這樣我們才能訂閱。(P.S. 請注意，主機跟流量都是要錢的！)

另外麻煩的是，官網也說明了，用 FB api 雖可取得 JSON 格式資料，但需要驗證身份取得授權，期限為 90 天。這代表說，提供第三方服務的好心網友，無法永遠替我們取得授權，我們必須每 90 天執行授權的動作。

二、FBRSS.COM

這位熱心的國外網友架設了一個網站：

• http://fbrss.com/

進入網站後，請依以下流程：



按圖中紅框按鈕，驗證 FB 身份，讓這個網站取得授權。




最後會出現上圖畫面：

• 請記下紅框標示的日期，在這個期限之前，必須再回來這個網站、登入 FB、重新取得授權，訂閱的 RSS 才能繼續有效。
• 下方會顯示我們所有追蹤的 FB 粉絲頁，請看紅線的部分，左邊紅線是 RSS 格式的網址，右邊紅線是 ATOM 格式的網址。
• 按右鍵複製網址後，就可利用「Feedly」這類的閱讀器來訂閱了。

Facebook 相關文章：

----
如這篇文章對您有幫助，請順手按個 +1 或分享，謝謝！