用 Line 傳未讀訊息給自己，成為待辦事項﹍不用擔心已讀訊息忘了處理

March 21, 2018, 9:07 pm

≫ Next: 有些事還是要花了錢才有效果﹍SEO 流量也是

≪ Previous: 部落格使用「結構化資料」的最佳作法 JSON-LD﹍提供「文章」型態的範例程式碼

$

0

0

在某種程度上，Line 的未讀訊息就等於是收件匣的未讀郵件，都會是潛在的待辦事項。對我而言，現在客戶 Line 的未讀訊息，成為待辦事項的比例已經遠高於郵件。原因大概是這樣：

• 使用郵件溝通不如 Line 方便，還要另外打開郵件軟體、文體需要比較正式等等
• Line 的通知比較即時，郵件會有時間差、或是要另外裝外掛才能比較快收到通知
• 也因此簡短的溝通，我都會要求客戶用 Line、或即時通聯繫，可節省溝通的時間成本

既然客戶的 Line 未讀訊息是待辦事項，久了會有一個問題，有時不小心、或手殘操作錯誤，會把還沒準備要處理的訊息點開 ，那麼出門在外使用手機時，要怎麼發待辦事項給自己比較方便呢？

之前曾寫過一篇「Line 處理待辦事項的技巧：讓已讀訊息保持未讀狀態」，但這只能處理尚未點開的訊息，而且操作上要花一點時間，也需謹慎以免不小心點開訊息。

本篇找到的解決方案，不用再害怕點開未讀訊息，可以放心地把訊息看完，然後立即「傳給自己一則未讀訊息」，也就是發給自己一個待辦事項，畫面上 Line 會顯示未讀的數字，可以提醒自己有事情要做。相信這樣的處理方式，可以比上一篇更有效率、更節省時間 。

一、手機處理待辦事項的方式

1. 電腦處理方式

基本上本篇的解決方案，只針對手機處理待辦事項的方式，因為電腦的操作有鍵盤很方便，加上時間、空間條件的允許，製作待辦事項非常容易。且每個人有自己習慣的方式、軟體，因此這部分就略過。


2. 未讀訊息數量提示

我也會使用 Evernote 來紀錄待辦事項，但是我覺得最方便、無腦、不用思考的方式，是類似 Facebook 通知這樣的方式，能顯示未讀數量，可提醒自己點開來看看有什麼事要處理。



這也是為什麼「收件匣未讀訊息數量提示」、「Line 未讀訊息數量提示」，很適合作為待辦事項收集工具的原因。


3. 利用 Line 群組

Line 有一個滿多人都知道，可以發待辦事項給自己的方式：

• 建立一個「群組」，成員只有自己
• 發訊息到這個群組，就成了自己的待辦事項

如果用得習慣這也是一個方法，不過我用了一陣子覺得有一些缺點，就沒使用了：

• 訊息的狀態都是已讀，無法提醒自己有待辦事項
• 只能自己定期巡視這個群組，看看有沒有待辦事項
• 需要靠大腦記住「定期巡視群組」的話，遲早會漏掉待辦事項，因為大腦隨著年紀只會越來越不可靠。
• 因為都是已讀，無法立即判別這個群組裡的訊息，哪些處理過、哪些還沒處理過，那麼每次就會多花一些時間來判別，缺乏效率。

要能有效率地產生待辦事項，關鍵在於我們能否用 Line 傳訊息給自己，又同時能夠保持未讀狀態，也就是能讓 Line 顯示未讀數量？

二、手機安裝兩個 Line

1. 同時使用兩個 Line 帳號

想到 +Ken CHEN 曾寫過一篇「Android上同時登入兩個LINE帳號，讓你工作、好友區分管理」，這個方法剛好成為本篇的最佳解。

該篇提到的概念是分別使用工作帳號與私人帳號，而本篇借用這個概念：

• 讀者可以分別使用一個本尊 Line 帳號，另外建立一個閒置的 Line 帳號。
• 在手機上要發待辦事項給自己時，開啟閒置 Line 帳號，傳訊息給本尊即可。
• 本尊收到的訊息只要保持未讀狀態，就不會忘了要處理這件事。

2. 安裝 App Cloner

• 安裝網址：App Cloner

這是 Android 平台的 App，安裝過程有不少需要注意的地方，請參考前面 Ken 寫的教學文章連結。

如果第二個帳號非閒置帳號，想要使用更多功能，例如下載貼圖，會有一些問題產生，請詳細閱讀教學文章的讀者留言，看看能否解決類似狀況。


3. 安裝心得

安裝過程可選擇使用不同顏色的圖示，放在桌面上才不會跟 Line 主程式混淆，同時取個不一樣的名稱作為識別：

三、使用技巧

1. 使用 FB 閒置帳號註冊

同一隻手機的第二個 Line App，登入時可能會遇上麻煩，因為如果沒有兩個手機門號的話，註冊第二個帳號時將無法綁定手機。

不過註冊 Line 現在不一定要綁定手機門號，也可以使用 FB 帳號來註冊。如果目的跟我一樣，第二個帳號只是拿來發待辦事項給自己，那麼也不一定要用 FB 主帳號來註冊，隨便拿個閒置的 FB 帳號登入、註冊 Line 即可。

接著將兩個帳號互加好友。


2. 關閉更新、通知

第二個 Line 沒有其他用途的話，那麼可將第二個 App 的設定改為不檢查更新、不顯示通知等等，減少系統資源的使用。


3. 可以安心閱讀未讀訊息

• 以往 Line 主帳號我會刻意不點開訊息，保持未讀狀態，免得點開後忘了處理。等有空時回到電腦前，再一起處理所有訊息。
• 但並非所有未讀訊息都會成為待辦事項，那麼現在有了第二個 Line，利用零碎時間可以先消化完一部分，不會成為待辦事項的訊息。
• 當看到會成為待辦事項的訊息時，打開第二個 Line，傳送訊息給主帳號，例如「回覆 XX 客戶」
• 同時也可先回覆客戶「好的，晚點會回覆您」，不至讓客戶久候、一直是未讀狀態
• 等回到電腦前，看到 Line 的未讀訊息「回覆 XX 客戶」，就知道要開啟 XX 客戶的對話紀錄進行處理。

4. 其他技巧

原本我習慣出門時，行動裝置用 evernote 來紀錄待辦事項。現在有了第二個 Line 後，發待辦事項給自己真是太方便了。

• 臨時想到的 idea
• 想到要處理的事情
• 他人交託事項

任何事情都可用第二個 Line 發待辦給自己，輸入速度快、方便，一則訊息就是一件待辦，畫面清楚有條理。

這些訊息都可以回到方便作業的環境時再逐一處理，不會因依賴大腦而忘記。

以上是我的使用心得，也歡迎分享你的使用方法，說不定還能延伸出更多不錯的應用。

更多 Line 相關文章：

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

---

有些事還是要花了錢才有效果﹍SEO 流量也是

March 27, 2018, 9:07 pm

≫ Next: Font Awesome 5 正式支援 Line 圖示﹍CDN 安裝 + 版本向下相容心得

≪ Previous: 用 Line 傳未讀訊息給自己，成為待辦事項﹍不用擔心已讀訊息忘了處理

$

0

0

在這篇「是否痞客邦、WordPress 的 SEO 比 Blogger 好，有這樣的事嗎？」留言 #4 有讀者提出 SEO 相關問題，並且希望瞭解 SEO 搜尋排名的依據，因為該讀者認為某個競爭對手的網站資歷、內容都不如他，卻被 Google 排名在前。

為了找出影響排名的因素，這位讀者很認真分析各種線索。我相信會有這樣想法的站長一定不少，也就是把經營重心放在 SEO 流量上面。剛好前陣子寫了這篇「從小編到總編之路﹍如何成為部落客中的佼佼者」，探討以內容為主的網站，我建議站長投資自己，把時間、資源放在讓自己成為「專家」的這條路。

然而不是所有網站都以內容為主，或是說該領域已經是完全競爭市場，那麼本篇也算上一篇的續集、或是補完，主要為這些族群而寫：

• 商業網站
• 已經出名、成為佼佼者的網站
• 需要競爭 SEO 流量的網站

(圖片出處: pixabay.com)

一、很多事都要花錢才有效果

一開始不好意思，先把難聽的話放前面，「天下沒有白吃的午餐」。我常在 PTT 八卦板看到這樣類似的問掛：「有什麼快速賺錢的方法？」。比較好奇的是，真的有這麼多人，認為可以賺錢的知識，免費就能拿得到？

能夠免費 Google 到的資訊，代表所有人也都唾手可得。就像在市場上曝了光的內線消息，在股市裡會瞬間反應完畢，能賺的話只能短時間裡比誰手腳快，時間一長就沒有任何利潤了。

如果是商業網站，其實在網路上詢問「如何獲得 SEO 流量」，跟詢問「如何賺錢」是差不多的意涵，只是層級不太一樣，因為提高流量的最終目的就是轉換成收益啊。

就算有佛心的高手願意回答，那也代表了從回答的那一刻開始，這個資訊已經從網路上開始流通，在市場上曝了光，所有人都能搜尋到這個資訊。當大家都開始用這招後，就失去原本的效用了。

二、為何不需要鑽研 SEO

開始正題之前，還是需要再提醒讀者這件事。但為了避免誤解，需要論述得仔細一些。

1. 需要瞭解的 SEO 基本知識

如果是本站的忠實讀者，自然知道 WFU 不希望站長們太注重 SEO。但是非本站的讀者，只看到「不要太注重 SEO」這幾個字，有的人會逕自解讀為「完全不要注重 SEO」，這在邏輯上是差很多的。

我大部分的 SEO 文章都會強調，SEO 只要瞭解基本的就好了，而基本的範疇為何，請務必詳讀這一篇：

• Blogger 只要做到這幾件事, 就能輕鬆加強 SEO 搜尋排名

意思就是說，SEO 文章只需要看這一篇，瞭解這一篇的概念就行了，其他的知識可不用再多深究。


2. 內容為主的網站，請讓自己成為佼佼者

「從小編到總編之路﹍如何成為部落客中的佼佼者」說明得很清楚，把時間花在讓自己成為佼佼者，長期來看，效果會遠勝花在 SEO，那麼自然不需要鑽研 SEO。


3. 非內容為主的網站，鑽研 SEO 也沒用

如果是商業網站、或是完全競爭市場的領域，那麼想自己鑽研 SEO 的話，前面說明得很清楚了，不花錢是不可能得到真正有效的招數。

如果自認為是萬中無一的 SEO 練武奇才，有辦法自己研發出 SEO 絕招，那麼可以問問自己，有沒有信心贏過市面上的 SEO 公司？

如果你的網站想靠自己研究的 SEO 提升流量，而競爭對手花錢請 SEO 公司操盤，這樣究竟鹿死誰手呢？

如果覺得這三點論述下來是有道理的，那麼恭喜你，可以省下花在研究 SEO 的時間了。

三、有資金挹注的效果

一般的站長除非有在業界打滾，否則不容易瞭解競爭對手的經營策略、或是操作手法。如果是主機商、或是能進入客戶後台的工程師角色，比較有機會知道多一些內幕。

這裡想要說明的是，如果競爭對手有資金、人脈，你可能很難想像，對方資源砸下去後，可以獲得什麼樣的成果。




這是某客戶的 Blogger 後台畫面，上圖可看到，網站才一成立，其實文章數也沒很多，但資金一運作下去，流量馬上從幾乎零，到單月爆衝近 600 萬。

之後不需再持續投入資源，因為網站權重已經起來，現在單靠 SEO 每個月都很穩定平均有 200 萬左右。

這個案例可以很好的說明，在商業競爭的世界，如果還跟過去一樣，習慣花大量的時間土法煉鋼，一切自己來：

• SEO 自己研究
• 網站自己架、找免費工具裝
• 自己設計版面、配色
• 廣告隨性擺、不瞭解交叉測試
• 自己到處貼文章宣傳

當遇上有經營團隊的競爭對手，各種專業技術外包給專家、或是直接雇用專家，那麼 WFU 必須說，這樣會越來越看不到對手的車尾燈。

四、花錢也要成為專家

WFU 對 SEO 的觀念是「內容為王」，也就是先培養自己成為專家，產出的內容在市場上有不可取代性，才有出名的機會，網站才能成為該領域的佼佼者。

當網站的內容、或是你的專業知識足以變現，而且也準備商業化的時候，此時網站的經營進入了商業領域，也就是成為本篇文章的受眾族群，那麼就得開始學習「如何花錢」、「外包專業技術」。

開始商業經營後，你的對手不再是「大小事自己搞」的網站，而是要面對各種分工、協作的專業團隊，那麼需要提升的高階技能清單可是不少，例如：

• 管理、統御能力
• 溝通、談判技巧
• 尋找合作夥伴、廠商、買主的能力
• 講價、執行預算的能力

以上只簡單列出幾種，現在有沒有覺得，經營單純的內容網站，相對而言輕鬆太多了？以前只要專注在成為內容的佼佼者，現在則是各方面都要成為佼佼者，才有辦法在商業市場上生存。這就像上班族只要做好份內的事就好，等到自己創業才知道當老闆的艱辛。想要輕鬆，那就是放棄商業化，回去乖乖經營單純的內容網站就好。

這個階段需要學習的技能太多，其實一天 24 小時根本不夠用，相信此時已經不太會有心思鑽研 SEO 細節，反而會希望直接拿「金錢」來換取「時間」、「技術」。

不過需要注意的是，連「花錢的能力」也需要訓練，否則找錯合作對象、把砸錢當作試手氣，錢可是很快就會燒光，也代表準備從市場出局。

五、網站可以外包的項目

最後整理一下，網站經營可以外包的項目，以及能夠為網站帶來的益處：

1. SEO + 宣傳行銷

其實 SEO 跟行銷在某種程度上是可以綁在一起的，兩者當然不完全是等號，但做了宣傳、行銷後，其實也能為 SEO 帶來正面效果，也就是兩者具有「相關性」(correlation)。

你可以選擇直接找 SEO 公司為網站「做」SEO，不過另一種選項也可找公關、行銷公司，經由宣傳的效果帶來流量，也是有提升 SEO 的效果。


2. 網站架設 + 維護

如果有程式基礎的話，架設網站這件事當然可以自己來。不過很多客戶反而是沒有程式基礎，但會在網路 google 各種工具、程式碼，然後整個網站複製貼上、東拼西湊就弄起來了。

如果都沒事是最好，然而一旦這些自己也看不懂的 code 某天打架、網站開天窗時，再來找上 WFU，其實我也不是很願意修理拼裝車，要嘛會刻意出高價，不然就是請客戶砍掉找付費範本重新來過。

當網站進入商業經營的階段後，請「珍惜時間、遠離程式碼」(註)，把網站架設及維護的時間外包給專家處理，站長才有時間創造網站的核心利益與價值。

註：此句改自「要改的地方太多了，那就改天吧」某篇經典用語。


3. 網頁設計

網頁的版面設計、友善介面，是極度專業的一個領域，可惜多數站長沒有很重視這一塊。想想看一個商業化的網站，例如被罵到臭頭的 PCHOME，操作介面被喻為上個世紀的產物，當競爭對手的網站更有質感、操作更友善，使用者自然不留情面地跳槽。

一個網站有沒有美感，會直接影響上游廠商、買主的評價與觀感，也會是商品能否成交的重要因素之一。所以建議還是花筆錢請設計師，絕對是划算的投資，而且這還只是一次性的費用。


4. 廣告

網站可以外包的廣告分兩種──

A. 網站的廣告規劃：如果網站的營收主要來自於廣告點擊(例如 Adsense)，那麼廣告的版面配置、尺寸等等，如果懂程式的話可以自己來。否則可以交給廣告代理商，專家會知道如何進行優化。

B. 網站的廣告投遞：如果需要幫自己網站下廣告，無論是 Google、FB...等，這也是一門專業學問。除非資金很多，否則建議交給專業公司來操作。自己亂下廣告很容易打水漂，錢無法花在刀口上，還學不到什麼經驗，很快就把經費花光光。


5. 法律顧問

可參考這篇「Blogger 刪了你的網站並告知是 Spam 垃圾網站怎麼辦？是否自架站會比較安全？」，無論是免費部落格平台、或是自架站，只要是商業網站，都可能遇到法律問題，而且只要遇一次就很慘。

我在該篇的建議為，當網站規模不大時，或許先想辦法諮詢法律專業人士就好，因為可能還無法負擔這樣的費用。

但是當規模越來越大時，就需要為網站找位法律顧問，可以讓公司不會瞬間被告垮(不會被檢舉)，或是避免做出錯誤決策。

六、總結

我看過某些課程標榜「網路開店不用花錢」，而實際上只想做無本生意的人，往往賺不了什麼錢。原因在於不想花錢，其實最後花的是自己的時間。

真正懂得賺錢的人，就是拿「金錢」換取專家的「時間」與「技術」，讓自己有更多的時間，賺更多的錢。

在商業競爭市場，當你瞭解到時間的重要性時，相信不管是 SEO 流量、或是各種網站經營的問題，都會自然而然有了答案。

更多 SEO 相關文章：

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

Font Awesome 5 正式支援 Line 圖示﹍CDN 安裝 + 版本向下相容心得

April 4, 2018, 12:47 am

≫ Next: 製作會上下彈跳的按鈕，吸引訪客注意也增加點擊的機率﹍CSS 動畫技巧

≪ Previous: 有些事還是要花了錢才有效果﹍SEO 流量也是

$

0

0

長久以來使用「Font Awesome」真的非常方便，網頁製作各種小圖示時不用再煩惱，只要到「Font Awesome 圖示速查表」翻一翻多能找到需要的圖案。

不過幫客戶處理需求時，最常遇到找不到「Line」的圖案，只好建議先用相近的「Whatsapp」擋著用。沒辦法，Line 在全世界的知名度不夠，主要是東亞地區的國家風行，不能怪 Font Awesome 不收錄。

最近發現客戶的 Font Awesome 圖示出現了 Line，原來從第 5 版開始已經正式支援 Line 圖示，這算是一個好消息，至少以後這件事不用再花時間溝通。

只是對於 Font Awesome 舊版的使用者而言，第 5 版的出現很難說是個好消息，因為官方表示程式碼從這一版開始算是重開機，整個架構、安裝方式都跟以前不一樣，原因看起來是方便商業化(現在 Pro 版有收費機制)。

那麼本篇除了整理一下基本的安裝使用心得，也會說明舊版本的程式碼要如何跟 Font Awesome 5 相容。

一、Font Awesome 5 介紹

以個人而言，並不會想多深入研究 Font Awesome 5，因為部落格只要架好，需要用到的圖示多半一開始就決定，不會常常變更網站的小圖示。也就是說，為了不常需要操作的功能，研究新的操作方法不是很有效率。

所以如果不是網頁設計人員，或是 Font Awesome 5 有無法取代的圖示，那麼我會建議直接用舊版就好，安裝、使用都比較簡單，沒有那麼複雜。


1. 變革

• 官網：fontawesome.com

進入官網後，可以看到大大的付費版「Pro」按鈕，宣告正式進入付費時代。右邊四排分類圖示正是新版的分類方式：

• SOLID：「實心/粗」→ 大部分為免費
• REGULAR：「一般」→ 少部分為免費
• LIGHT：「空心/細」→ 付費
• BRANDS：「品牌 logo」→ 免費

這也就是說，安裝了 Font Awesome 5 後，除非付費買 Pro 版，否則能使用的圖示比以前少很多。


2. 圖示

• 圖示一覽：fontawesome.com/icons

進入官網「圖示」頁面後會發現，所有圖示依照以下方式呈現：

• 深色：免費版可使用的圖示
• 淺色：滑鼠經過會如上圖，出現「Pro」字樣，代表為付費版圖示

從這個頁面的圖示一覽，可以發現一些常用的圖示，現在連免費版都沒有了，例如上圖的「時鐘」。

是否付費就看個人了，不過還好官網仍保留舊版的說明頁面，還是有免費的管道可使用 Font Awesome。


3. 舊版

• 4.7 版官網：fontawesome.com/v4.7.0

進入以上頁面後，就能使用所有免費圖示了。

二、CDN 安裝方式

那麼還想使用 Font Awesome 5 的讀者，可繼續看以下的安裝說明。

1. 安裝 CSS

• 官網說明：Use Font Awesome Free CDN

官網提供了 CSS 的免費 CDN 外連，可在範本中 </head>之前插入以下程式碼引用 csss 檔：

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.9/css/all.css" integrity="sha384-5SOiIsAziJl6AWe0HWRKTXlfcSHKmYV4RBF18PPJ173Kzn7jzMyFuTtk8JA7QQG1" crossorigin="anonymous"></link>


2. 圖示使用方式

例如常見的向下箭頭圖示，網址為：

• fontawesome.com/icons/angle-down

複製左下角紅框處的 HTML 碼，貼到網頁要顯示圖示的位置即可：

<i class="fas fa-angle-down"></i>

右上角的紅框處可看到「SOLID」為免費版可使用的圖示類型，其他「REGULAR」、「LIGHT」均標示 "PRO" 字樣，為付費版圖示。


3. 安裝 JS

Font Awesome 5 還多了一種 JS 的安裝方式，可將字型轉為 SVG 圖片，能等比例放大縮小。

這個的方式對於一般使用者而言可能太過複雜，不太適合無腦使用，有這方面的專業需求可參考這篇「5 分鐘快速了解 FontAwesome 5」的說明。

三、與舊版相容的方式

如果網站曾使用舊版 4.X 版本，現在想要裝 5.X 版本，那麼究竟網站各處 4.X 的圖示安裝語法 HTML，能否跟新版相容，請務必詳讀接下來的內容。

1. 新版的變革

借用前面出現過的這張圖：



用過舊版一定知道，安裝語法的 class 規則為 "fa fa-圖示名稱"，但上圖可看到，「SOLID」類別的圖示，安裝語法變成了 "fas fa-圖示名稱"。

整理一下四種類別的語法：

• SOLID："fas fa-圖示名稱"
• REGULAR："far fa-圖示名稱"
• LIGHT："fal fa-圖示名稱"
• BRANDS："fab fa-圖示名稱"

因此很明顯的，如果網站改安裝 Font Awesome 5 後，舊的語法就無效了，必須想辦法將原本的 "fa" 字串轉換為 4 種類別的 class 字串


2. 官方轉換程式(JS)

為了相容舊版本的語法，官網提供的教學請見這個頁面：

• Upgrading from Version 4

Font Awesome 的安裝方式請改為引用以下兩個 JS 檔，以版本 5.0.9 為例：

<script src="https://use.fontawesome.com/releases/v5.0.9/js/all.js"></script>
<script src="https://use.fontawesome.com/releases/v5.0.9/js/v4-shims.js"></script>

這樣舊的語法就能相容，而使用新版圖示時，就要用新的圖示語法了。


3. 非官方轉換程式

如果不想為了 Font Awesome 5，讓網頁載入兩個 JS 檔外連的話，有國外網友字型做了簡單的 JS 轉換工具，可參考這個網頁：

• fontawesome4to5.js

其實他的原理很簡單，就是將舊的語法一個個轉為新的格式，從原始碼就看得出來。

使用這個方案的話，只要引用官方 5.X 的 CSS 外連，加上這個網頁的 JS 內容即可。

四、其他心得

「Font Awesome 圖示速查表」除了提供 HTML 安裝方式，還有 CSS、UNICODE 的安裝方式。

但安裝了 5.X 版後，如果 4.X 版使用 CSS、UNICODE，多半會看不到，因此需要另外處理 CSS、UNICODE 安裝方式的相容性。

解決方法在這個國外討論串「fontawesome 5 font-family not work」，將重點整理如下：

• 需要修改 font-family名稱
• 需要修改 font-weight，因為大部分可免費使用的 REGULAR 圖示，font-weight 尺寸是不一樣的

提供一個範例，常見的向下箭頭圖示，CSS 需要修改為：

font-family: Font Awesome\ 5 Free;
font-weight: 900;
content: "\f107";
其中 content 編號有可能沒變，但少數圖案是有變的，所以最好還是檢查一下 5.X 版的編號。

更多字型相關文章：

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

製作會上下彈跳的按鈕，吸引訪客注意也增加點擊的機率﹍CSS 動畫技巧

April 10, 2018, 9:07 pm

≫ Next: Blogger 升級 HTTPS 後，如何面對按讚數歸零？

≪ Previous: Font Awesome 5 正式支援 Line 圖示﹍CDN 安裝 + 版本向下相容心得

$

0

0

最近接到一個需求，案主希望做一個固定在網頁右下角的按鈕。且為了引起訪客注意，指定這個按鈕必須上下不斷彈跳。

這樣的設計的確不錯，因為製作網頁的最終目的，就是讓訪客下定決心並且行動，無論目標是讓訪客購買產品、按讚、或留言聯繫等等，這個行為總稱「行動呼籲」，也就是 Call To Action(CTA)。

讓訪客行動的 CTA 按鈕，站長們需要好好花心思設計，例如尺寸要夠大、顏色夠搶眼，才不會目標族群(Target Audience)想行動時，卻找不到按鈕。

而下面這個依本篇需求做出的上下晃動按鈕，也會是 CTA 按鈕很好的範例：

Blogger 諮詢/架站/設計

(圖片出處: pixabay.com)

一、彈跳按鈕效果

1. 到達頁(Landing Page)範例



上圖是一個到達頁範例，銷售頁面最重要的行動呼籲按鈕，從上圖靜態畫面或許沒有十分明顯。不過如果進入該頁面：

• https://clinic.careonline.com.tw

就會看到「登錄診所」按鈕會上下緩慢飄動，真正的顧客絕對會注意到並點擊。


2. 各種彈跳效果

這篇文章介紹了一個整理好的動畫效果庫 animate.css ：

• 微動畫簡單做！使用 animate.css 五秒提升作品質感

只要引用這個 CSS 外連，就有 75 種動畫效果可使用。文章也做了一張動畫效果預覽圖，可快速找到需要的效果來引用。

如果覺得閱讀說明書很麻煩，也可參考以下 WFU 整理的程式碼，不用外掛、使用簡單的 CSS 語法就可做出本篇範例的彈跳效果。

二、範例程式碼

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


1. CSS

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

<style>
@keyframes bounce{from{transform:translateY(0px)}to{transform:translateY(-10px)}}
@-webkit-keyframes bounce{from{transform:translateY(0px)}to{transform:translateY(-10px)}}
.bounce {animation: bounce 1s infinite alternate;-webkit-animation: bounce 1s infinite alternate;}
</style>

• 10px 為彈跳的幅度 ，可修改兩處 10px 的數值
• 1s 代表循環的時間為 1 秒，可修改兩處 1s 數值

2. HTML

接著在任何想要顯示上下彈跳按鈕的地方，使用以下 HTML 碼：

<img class="bounce" src="填入圖片網址"/>
如果不是使用圖片 IMG 標籤，請記得把使用的 HTML 標籤加上 class="bounce" 才會產生作用。

效果大致像下面這個按鈕：

Blogger 諮詢/架站/設計

三、補充說明

開頭有提到客戶希望這個按鈕固定在網頁右下角，這個效果用 CSS 語法就可做到，請讀者參考這篇「快速回到網頁上方 Go Top 按鈕 + 各種動畫效果」，自行修改 CSS 參數即可。

更多 CSS 相關技巧：

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

Blogger 升級 HTTPS 後，如何面對按讚數歸零？

April 13, 2018, 9:11 pm

≫ Next: Blogger 在網站管理員(Google Console)看到 Index Coverage 問題不用擔心

≪ Previous: 製作會上下彈跳的按鈕，吸引訪客注意也增加點擊的機率﹍CSS 動畫技巧

$

0

0

前陣子「Blogger 官方免費幫自訂網址升級 HTTPS！」之後，陸續有不少使用者表示 Facebook 讚按鈕消失了、或是讚數歸零了，需要本站協助處理。

一開始認為這件事並不複雜，只要修改一下讚按鈕對應的文章網址就好，初步的處理結果也是如此。沒想到過了幾天之後，有客戶表示按讚數一開始雖然有出現，但隨著時間過去，所有的文章陸陸續續又都歸零了。

看來這件事的難度超乎原本想像，因此整理一下這陣子的處理心得。

(圖片出處: pixabay.com)

一、按讚數的原理

1. 以網址為依據

一開始有必要說明一下 FB「讚」、「留言板」等工具運作的原理：

• 這些外掛在儲存資料的時候，必須有一個獨一無二的 ID 用來存取。
• 每篇文章可用來識別、獨一無二的判斷依據，就是網址字串，也是 FB 判別的 ID。
• 網址字串中，HTTP 與 HTTPS 網址字串會被視為不同 ID
• 所以網站升級為 HTTPS 後，FB「讚」、「留言板」等工具會改為讀取文章頁面的 HTTPS
  網址
• 原本 HTTP 網址儲存的資料，就會無法顯示

2. 修改外掛讀取的網址

瞭解原理後，處理起來就不難，只要 FB「讚」、「留言板」等工具，不要讀取新的 HTTPS 文章網址時，改為讀取舊的 HTTP 網址，那麼讚數、留言資料就會出現了。


3. HTTPS 網址的問題

然而對於新的文章，「讚」按鈕其實應該讀取 HTTPS 網址。那麼，如果為了舊文章的資料，讓部落格新舊文章的「讚」按鈕一律讀取 HTTP 網址，這樣新文章的讚按鈕，勢必會產生一些問題，例如別人分享我們文章會使用 HTTPS 網址，那麼讚數的累積 FB 會如何判斷呢？

二、依日期處理

1. 轉換 HTTPS 日期

部落格全部文章都讓「讚」按鈕讀取 HTTP 網址不是好的處理方式，最好是：

• 舊文章讀取 HTTP 網址
• 新文章讀取 HTTPS 網址

以部落格轉換 HTTPS 那天為分界點，之前發佈的日期為舊文章，反之為新文章。


2. Blogger 網址參數

然而，用發佈日期當分界點會有一個問題，因為「發佈日期」是可以變更的。有的站長為了讓舊文章曝光，常常會把幾年前的文章改用新的日期發佈，這樣的好處不少，例如：

• 在 FB 或各處分享時看起來像新文章
• Google 搜尋結果的日期比較新，容易被點擊

然而帶來的後果，就是讚按鈕可能被判斷為需要讀取 HTTPS 網址，那麼按讚數就歸零了。

為了解決這個問題，剛好 Blogger 文章網址有「年」、「月」這兩個參數，就算發佈日期變更了，網址仍然不會變，所以該篇文章可以從文章網址的年份、月份參數，來讓讚按鈕判斷要讀取 HTTP、或 HTTPS 參數。

三、FB 除錯 Debug 工具誤事

照理說按前面兩道流程處理後，就可解決升級 HTTPS 後按讚數歸零的問題。但接下來就遇到開頭所述，客戶表示原本舊文章可顯示的按讚數，陸陸續續依舊歸零了。

1. 歸零時間點不一

為何歸零的時間不一，這件事值得探究一下，才能找出真正原因。如果修改讚按鈕讀取的網址後，仍會逐漸歸零，那麼為何不一開始就歸零？

使用 FB 官方提供的「分享偵錯工具」，發現客戶一開始提供的歸零文章網址，在十幾個小時之前有進行抓取。

於是問客人最近是否有分享文章到 FB、或是有請人代操粉絲團、或是做過其他可疑動作，但得到的答案都是沒有。

由於這位客戶的流量很大，而這類網站常常成為爬蟲的目標，一開始曾懷疑是否有爬蟲程式定期、自動使用 FB API 進行類似抓取的動作。

但無論如何，經過觀察分析的結論是，只要使用 FB 官方偵錯工具讀取舊文章 HTTP 網址，原本累積的讚數也會歸零。


2. 本站進行實測

為了證實推論，拿自己的網站做個實驗。本站倒是不擔心讚數歸零，因為去年「WFU BLOG 改版」時，就已經不使用讚按鈕了。



上圖這篇「從小編到總編之路﹍如何成為部落客中的佼佼者」是本站轉換 HTTPS 之前的文章，可看到累積讚數為 492。





使用 FB 偵錯工具後發現，在本站轉換 HTTPS 之後的日期「2 月 21 日」，這篇文章的 HTTP 網址被抓取過，所以的確讚數也被歸零了。


3. FB 自動爬取的時間點

以上面這篇文章為例，現在的時間點為 4 月，上一次 FB 的抓取時間點為 2 月下旬，其實間隔算滿久的，為何我的客戶大部分文章，被 FB 自動抓取的時間點都不到 24 小時呢？

只要 FB 不去爬取 HTTP 網址的文章，那麼該篇文章的按讚數，是可以保留的。

但我的推測是，因為客戶網站的流量很大：

• FB 對大流量的網站，跟 Google 搜尋引擎類似，會比較頻繁的爬取
• 對於分享到 FB 的文章，有人點擊時，FB 就順勢再爬取一次

以上推論沒有官方文件支持，但這可以解釋為何我的客戶舊文章的按讚數，會這麼快歸零的原因。

四、自製讚按鈕

那麼這件事該如何解決呢，是否舊文章的讚數就永不見天日了呢？

當然是可以解決的，不然 WFU BLOG 所有文章的按讚數，在沒有讚按鈕的情況下，是如何出現的呢~~

1. 放棄讚按鈕

由於使用官方讚按鈕後，將無可避免，最終所有文章的讚數都會歸零，那麼也許站長得先做這個心理準備：

• 轉換 HTTPS 之前的舊文章，不要使用讚按鈕

其實會在網站按讚的訪客微乎其微，讚數的累積其實都是經由分享後，在 FB 上按讚的結果。所以網站上我們需要的會是「分享」按鈕，而非讚按鈕。


2. 使用自製讚按鈕 + 分享按鈕

下圖是我幫客戶製作，不能按、沒有功能的讚按鈕(及分享按鈕)示意圖：



其實看起來跟真的也是差不多，分享按鈕是可以按的，這比較重要。

而按讚數用 FB API 就可取得。


3. 搭配日期判斷

最後，再搭配前面提過的日期判斷方式：

• 舊文章使用假的讚按鈕+按讚數+分享按鈕
• 新文章使用真的讚按鈕+分享按鈕

這樣就算大功告成了。

五、補充說明

除非是沒有人要看的文章，FB 不會再去爬取該篇文章，那麼 HTTP 網址的讚數就能永久保留。

為何 FB 重新爬取 HTTP 網址後，讚數會被歸零，以下是我的推測：




再看一次這張圖：

• 取得的網址：是 HTTP 網址
• 標準網址：如紅框處，是 HTTPS 網址

請參考「Blogger 官方免費幫自訂網址升級 HTTPS！ 設定處理流程注意事項整理」，建議讀者在後台將「HTTPS 重新導向」設定為「是」。

也因為如此，原本的 HTTP 網址會被 301 轉址到 HTTPS 網址，那麼 FB 爬取 HTTP 網址時，就會把原本的舊文章網址，視為新的 HTTPS 網址。

結果就導致，HTTP 網址被 FB 重新爬取過時，會將 HTTPS 網址的讚數等資料，覆蓋原本的 HTTP 網址資料，導致讚數歸零。

瞭解以上 FB 的運作原理後，提醒一下讀者：

• 將來若分享舊文章到 FB，請別太在乎讚數的累積
• 因為 301 轉址的關係，FB 會把之後的按讚數算在 HTTPS，那麼網站上舊文章 HTTP 的讚數，理論上都無法增加
• 按照本文處理的舊文章，最好抱持著能夠恢復顯示過去的按讚數就好，以免期待有落差。

更多 Facebook 相關文章：

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

Blogger 在網站管理員(Google Console)看到 Index Coverage 問題不用擔心

April 20, 2018, 12:06 am

≫ Next: 輕鬆讓 Blogger 搜尋結果出現麵包屑(breadcrumbs)導航﹍使用結構化資料 JSON-LD

≪ Previous: Blogger 升級 HTTPS 後，如何面對按讚數歸零？

$

0

0

只要是 Blogger 站長，進入「網站管理員」(Google Console) 應該都會看過這個警告訊息：



由於文字描述太過恐怖，大部分站長看到 "排名降低" 這樣的字眼肯定會嚇到，但實際上根本不是那樣子，我也不清楚 Google 為何不針對自家產品 Blogger 調整一下說明。

因為這個狀況接到非常多客戶或讀者的詢問，那麼就用一篇文章整理一下事件發生的原因。

一、Robot.txt 設定

1. 定義

要瞭解 Index Coverage 之前需要先知道什麼是 Robot.txt：

• 可參考官網說明「建立 robots.txt 檔案」
• 也可參考這篇「Blogger開放搜尋偏好設定 可自訂robots.txt」

簡單說，Robot.txt 就是給 Google 機器人看的指示說明，告訴 Google 什麼頁面你可以來爬、什麼頁面不准爬。

這個文件內容可以算是「君子協議」，Google 機器人會遵守，但其他搜尋引擎、或是其他爬蟲會不會遵守，就要看是不是君子了。


2. Blogger 預設值

Blogger 後台可以改 Robot.txt 的內容：

• 設定 → 搜尋偏好設定 → 自訂 robots.txt → 編輯

但我會建議 Blogger 站長完全不理會 Robot.txt，因為 Blogger 的 Robot.txt 預設內容並沒有什麼問題，若是改了到時害網站文章無法被 Google 收錄反而更慘。

如果自認很懂 SEO 的站長，才適合改這個檔案。

想要瞭解 Blogger 預設值，把以下網址改為自己的網域就可看到：

https://www.wfublog.com/robots.txt

3. 內容說明

進入該網址後內容大致像這樣：




簡單翻成中文：

• 允許所有爬蟲
• 不允許爬取 /search 這個目錄的所有網頁
• 允許爬取 / 根目錄所有網頁
• 指定網站地圖的位置

裡面的重點在於 "不允許爬取 /search 這個目錄的所有網頁"，也就是 Blogger 網址中，你看到所有包含 "/search" 字串的網頁都不允許爬取，包含了以下頁面：

• 標籤頁面
• 搜尋頁面
• 較新的文章、較舊的文章頁面

想瞭解更多的話，可參考「Blogger 七種頁面形態判斷語法詳解」。

二、Index Coverage 問題

1. Blogger 的設計

Blogger 預設讓這些標籤、搜尋等頁面不被爬取，是有其原因的。這些頁面的內容，其實跟文章頁面的文字會重複，因此把標籤、搜尋等頁面進行索引的話，Google 爬蟲等於在做重複的工作，一份文件拷貝多份帶回家，不但佔空間，日後搜尋也浪費自己的時間。

所以 Blogger 的 Robot.txt 預設值完全沒有任何問題，但是對於不了解以上原理的站長，在舊版 Google Console 就會有這樣的提問：

• 網頁遭 robots.txt 封鎖

上面這個 Blogger 中文論壇討論串的提問，有附上舊版 Google Console 產生的錯誤訊息畫面。

不過其實這現象一點問題都沒有，是自然而然會發生的事，所以完全不需要解決。


2. Index Coverage 問題

而現在會出現的「Index Coverage 問題」，其實跟「網頁遭 robots.txt 封鎖」是差不多的狀況，詳情可參考官網說明「索引涵蓋範圍狀態報表」。

因為 Blogger 預設的 Robot.txt 讓標籤、搜尋頁面不讓搜尋引擎爬取，所以「 Index Coverage 訊息」也是必然現象。

從頭看到這裡的讀者，只要你沒動過 Robot.txt，那麼可以安心不理會這則訊息了。

三、補充說明

如果不是把 SEO 當作興趣研究的站長，其實 Google Console 的訊息多半可以不必理會。

對於「網站管理員」的基本使用，我建議只要參考這篇「Google 網站管理員的活用方法﹍我的例行待辦事項」即可。定期照著做，就能解決大多數網站產生的問題。

更多 Google 相關工具：

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

輕鬆讓 Blogger 搜尋結果出現麵包屑(breadcrumbs)導航﹍使用結構化資料 JSON-LD

May 1, 2018, 9:07 pm

≫ Next: 網頁資料存成 CSV 需要解決的問題整理﹍亂碼 + JS 技巧 + Bootstrap 表格

≪ Previous: Blogger 在網站管理員(Google Console)看到 Index Coverage 問題不用擔心

$

0

0

相信有關注 SEO 的站長都知道什麼是麵包屑(breadcrumbs)，如不清楚的話可參考「麵包屑導航之於SEO的重要性」、「面向搜索引擎优化 之 面包屑导航」。

簡單說這功能就像童話故事，小男孩為了認路而留下的麵包屑，具有協助導覽網站的效果，可讓訪客快速知道該篇文章處於網站中什麼位置，就像下圖的 Google 搜尋結果：



紅框處就是麵包屑效果，訪客可知道這篇文章的分類，前往哪個標籤可找到相關資料，避免看完文章後不知道要做什麼。

Blogger 可經由修改範本來做出麵包屑導覽效果，但不是一件輕鬆的事，而且還要處理版面美觀等問題。而使用本篇的技術後，也就是利用最新的結構化資料 JSON-LD 格式，只要複製貼上、不必懂程式碼也能無腦套用。

(圖片出處: peakpx.com)

一、有無麵包屑的差別

首先看一下沒有設置麵包屑導航時，Google 搜尋的結果。



例如上圖第一個搜尋結果，本站的這篇文章標題下方，出現的是文章網址。其實訪客不會在乎網址字串有什麼，所以搜尋結果的網址，除了網域之外幾乎等於無意義的資訊。

比較一下第二個搜尋結果，接在「梅問題」的網域之後就是麵包屑導航，相較之下 "網頁設計"、"Javascript" 這些分類會是比較有意義的資訊。




為網站加上麵包屑導航資訊後，重新來看搜尋結果，上圖紅框出現了該篇文章的標籤 "Bootstrap"、"jQuery"、"RWD"，感覺好多了！

二、修改 Blogger 版面結構的方式

修改 Blogger 範本並加入麵包屑結構，不是非常困難的事，但也沒有輕鬆到哪裡去，如果不懂程式碼、不熟悉範本的話。

這篇「Blogger 製作 Breadcrumb 文章標籤導航麵包屑」，詳細說明了製作方式：

• 修改範本，在特定位置插入麵包屑
• 調整版面 CSS 樣式
• 不同頁面的處理方式

因為說明地很詳盡，可以了解所有修改的知識與原理。

三、使用結構化資料 JSON-LD

因為本站的文章標題下方，原本就會顯示相關標籤，因此整個網頁的版面配置，沒有另外製作麵包屑功能的需求。

前陣子寫這篇「部落格使用 "結構化資料" 的最佳作法 JSON-LD」時，發現 "結構化資料" 也可以設定 "麵包屑導航"，當下認為這是個好消息，因為 JSON-LD 設定的資料不需要顯示在網頁上，但又能夠被 Google 搜尋引擎索引，對於不需顯示 "麵包屑" 的網站來說真是太棒了。

有興趣瞭解 "結構化資料" 的讀者，請詳讀該篇文章，除了說明 JSON-LD 格式的優點，也會知道為何我認為這個發明遠勝其他格式的 "結構化資料"。

不想理解程式碼，想要複製就能使用的讀者，請加入本站會員，就可看到以下我分享的 "麵包屑導航" 結構化資料程式碼。

1. 準備動作

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


2. 修改範本

請到後台「主題」→「編輯 HTML」，游標點進範本區塊，按 Ctrl-F 搜尋以下字串：

<b:includable id='post' var='post'>

找到後在此字串的下一行，插入以下程式碼：

簡單說明一下這段程式碼做了什麼事：

• 這個頁面「Breadcrumb JSON-LD」展示了基本的 "麵包屑" 結構化資料的格式
• 以上的程式碼會自動讀取文章的標籤，並自動產生 JSON-LD 標準格式
• 最多只顯示前三個標籤資訊

3. 測試效果

儲存範本後，可利用「Google 結構化資料測試工具」測試你的文章是否成功產生麵包屑。




成功的話，效果類似上圖。

四、顯示文章的標籤

這部分為補充說明，本站不在網頁上顯示「麵包屑」的效果，是因為 Blogger 官方本身就提供了顯示 "標籤" 的功能，如果另外又製作 "麵包屑" 的區塊就顯得重複了。

如果讀者的文章沒有顯示標籤，可能是沒有開啟這個功能，請按以下流程處理即可：

• 後台「版面配置」→「網誌文章」小工具 → 編輯 → 勾選「標籤」功能即可

有一些可能性會讓「標籤」無法顯示，也許用了非官方範本，或是修改範本時動到相關的程式碼。如果無法自行恢復時，建議再找專家處理。

更多 SEO 相關文章：

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

網頁資料存成 CSV 需要解決的問題整理﹍亂碼 + JS 技巧 + Bootstrap 表格

May 8, 2018, 9:00 pm

≫ Next: 取得教育信箱(EDU EMAIL)的管道及使用心得

≪ Previous: 輕鬆讓 Blogger 搜尋結果出現麵包屑(breadcrumbs)導航﹍使用結構化資料 JSON-LD

$

0

0

最近客戶需要在網頁上顯示大量的會員資料後，製作一個「匯出」按鈕，將表格所有資料匯出存成 CSV 檔，再用 EXCEL 之類的試算表軟體開啟。

整個流程要用的的技術其實沒有太高深，但是陷阱卻是很多，因此整理成一篇備存。

(圖片出處: pexels.com)

一、需要解決的難題

1. JS 如何儲存 CSV

一開始需要瞭解如何將資料存成 CSV 檔，概念可參考這個討論串「How to export JavaScript array info to csv (on client side)?」：

• 在頁面製作一個超連結，而網址連結的字串可以設定成 CSV 這樣的型態
• 把所有資料格式整理好，用逗點分隔開，塞進 href 的值即可
• 使用者點擊連結後，就能存成 CSV 檔

2. 解決 UNICODE 亂碼問題

可惜這樣的 CSV 檔，用 EXCEL 開啟後，只要內容有中文(UNICODE)就會產生亂碼，原因可參考這篇「【Javascript】匯出 csv」。

利用這篇的技巧，在 CSV 檔開頭前幾個字元，塞入特定的編碼字串，可讓 CSV 檔成功在 EXCEL 顯示中文。


3. 資料太多時會被截斷

看完前面第一點的概念後，就知道存成 CSV 檔是靠網址傳值的概念。但客戶的會員資料起碼有幾萬筆，很快就超出瀏覽器網址字串限制的長度，所以無法成功儲存所有的會員資料為 CSV 檔。

這個討論串「Export HTML table to csv in google chrome browser」使用了不同的作法：

• 原本的作法藉著網址傳遞字串資料，會受到網址字串的長度限制。
• 新的作法將字串轉換為二進位資料(BLOB)，依然用網址傳遞，但資料型態不同，就不會受到字串的長度限制。
• BLOB 格式的資料大小依然會有上限，但存成 CSV 檔的資料型態，要超出限制是極度困難的事情，所以除非資料多到像影片檔那麼大，那麼可不必擔心此事。

4. 依然是 UNICODE 亂碼問題

解決資料長度問題，改用 BLOB 格式後，又要再度面臨亂碼問題。

找到這篇「使用 JavaScript 导出 CSV 文件」，一樣在資料開始處加入特殊編碼字串，終於一切都正常了。

二、表格範例 + 匯出按鈕

• 以下範例表格內容，取自「利用 Google 試算表當小型資料庫 (4)使用 SQL 語法讓搜尋功能更強大」及本站會員系統
• 表格的美化使用「Bootstrap」內建的條紋換色效果
• 按下綠色按鈕，可匯出會員資料，存成 CSV 檔

匯出 WFU BLOG 會員資料

權限	序號	暱稱	性別	註冊日期
加值會員	W00001	Wayne Fu	男生	2014/9/12
一般會員	W00002	Che	女生	2014/9/17
一般會員	W00003	Ken	男生	2014/9/17
一般會員	W00004	Sun	男生	2014/9/17
一般會員	W00005	Liu	男生	2014/9/17
一般會員	W00006	Don	男生	2014/9/18
一般會員	W00007	Cha	女生	2014/9/18
一般會員	W00008	Tun	女生	2014/9/18
一般會員	W00009	陳	男生	2014/9/18
一般會員	W00010	HY	男生	2014/9/18
一般會員	W00011	美	女生	2014/9/18
一般會員	W00012	Kat	女生	2014/9/19
一般會員	W00013	Mar	男生	2014/9/19
一般會員	W00014	Wan	男生	2014/9/20
一般會員	W00015	Bas	女生	2014/9/20
一般會員	W00016	莊	男生	2014/9/23
一般會員	W00017	詹	女生	2014/9/23
一般會員	W00018	Li	男生	2014/10/2
一般會員	W00019	陳	女生	2014/10/2
一般會員	W00020	淵	男生	2014/10/3

三、範例程式碼

以上效果的範例程式碼如下：

<script src='//ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js'></script>
<link href='//maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css' rel='stylesheet'></link>
<a id="exportBtn" class="btn btn-success" target="_blank" download="WFUBLOG-會員資料.csv">匯出 WFU BLOG 會員資料</a>
<br/><br/>
<style>
#member_list {white-space: nowrap;}
#member_list thead{background: #5893c8;color:#fff;}
</style>
<div id="member_list" class="table-responsive">
<table class="table table-striped table-bordered">
<thead>
<tr>
<th>權限</th>
<th>序號</th>
<th>暱稱</th>
<th>性別</th>
<th>註冊日期</th>
</tr>
</thead>
<tbody>
<tr>
<td>加值會員</td>
<td>W00001</td>
<td>Wayne Fu</td>
<td>男生</td>
<td>2014/9/12</td>
</tr>
<tr>
<td>一般會員</td>
<td>W00002</td>
<td>Che</td>
<td>女生</td>
<td>2014/9/17</td>
</tr>
<tr>
<td>一般會員</td>
<td>W00003</td>
<td>Ken</td>
<td>男生</td>
<td>2014/9/17</td>
</tr>
<tr>
<td>一般會員</td>
<td>W00004</td>
<td>Sun</td>
<td>男生</td>
<td>2014/9/17</td>
</tr>
<tr>
<td>一般會員</td>
<td>W00005</td>
<td>Liu</td>
<td>男生</td>
<td>2014/9/17</td>
</tr>
<tr>
<td>一般會員</td>
<td>W00006</td>
<td>Don</td>
<td>男生</td>
<td>2014/9/18</td>
</tr>
<tr>
<td>一般會員</td>
<td>W00007</td>
<td>Cha</td>
<td>女生</td>
<td>2014/9/18</td>
</tr>
<tr>
<td>一般會員</td>
<td>W00008</td>
<td>Tun</td>
<td>女生</td>
<td>2014/9/18</td>
</tr>
<tr>
<td>一般會員</td>
<td>W00009</td>
<td>陳</td>
<td>男生</td>
<td>2014/9/18</td>
</tr>
<tr>
<td>一般會員</td>
<td>W00010</td>
<td>HY</td>
<td>男生</td>
<td>2014/9/18</td>
</tr>
<tr>
<td>一般會員</td>
<td>W00011</td>
<td>美</td>
<td>女生</td>
<td>2014/9/18</td>
</tr>
<tr>
<td>一般會員</td>
<td>W00012</td>
<td>Kat</td>
<td>女生</td>
<td>2014/9/19</td>
</tr>
<tr>
<td>一般會員</td>
<td>W00013</td>
<td>Mar</td>
<td>男生</td>
<td>2014/9/19</td>
</tr>
<tr>
<td>一般會員</td>
<td>W00014</td>
<td>Wan</td>
<td>男生</td>
<td>2014/9/20</td>
</tr>
<tr>
<td>一般會員</td>
<td>W00015</td>
<td>Bas</td>
<td>女生</td>
<td>2014/9/20</td>
</tr>
<tr>
<td>一般會員</td>
<td>W00016</td>
<td>莊</td>
<td>男生</td>
<td>2014/9/23</td>
</tr>
<tr>
<td>一般會員</td>
<td>W00017</td>
<td>詹</td>
<td>女生</td>
<td>2014/9/23</td>
</tr>
<tr>
<td>一般會員</td>
<td>W00018</td>
<td>Li</td>
<td>男生</td>
<td>2014/10/2</td>
</tr>
<tr>
<td>一般會員</td>
<td>W00019</td>
<td>陳</td>
<td>女生</td>
<td>2014/10/2</td>
</tr>
<tr>
<td>一般會員</td>
<td>W00020</td>
<td>淵</td>
<td>男生</td>
<td>2014/10/3</td>
</tr>
</tbody>
</table>
</div>
<script>
// 點擊匯出
$("#exportBtn").click(function() {
var csvList = [],
titleList = [],
memberContent = "",
csvContent;

// 取得標題
$("#member_list th").each(function() {
titleList.push(this.innerHTML);
});
csvList.push(titleList);

// 取得所有資料
$("#member_list tbody > tr").each(function() {
var regList = [];
$(this).children("td").each(function() {
regList.push(this.innerHTML);
});
csvList.push(regList);
});

// 產生 csv 內容
csvList.forEach(function(rowArray) {
var row = rowArray.join(",");
memberContent += row + "\r\n";
});

// 產生 csv Blob
csvContent = URL.createObjectURL(new Blob(["\uFEFF" + memberContent], {
type: 'text/csv;charset=utf-8;'
}));

// 產生 csv 連結
this.href = csvContent;
});
</script>


• 前 2 行綠字可參考「引用 jQuery 的注意事項」，檢查範本是否已安裝過 jQuery、Bootstrap，如果已經安裝過請刪除，以免重複安裝。
• 藍字可修改下載的檔名
• 如果熟悉 JS，可參考註釋內容自行修改

更多「網頁技巧」相關文章：

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

---

取得教育信箱(EDU EMAIL)的管道及使用心得

May 18, 2018, 9:07 am

≫ Next: 三國志11__五奇戰記(4)__起源

≪ Previous: 網頁資料存成 CSV 需要解決的問題整理﹍亂碼 + JS 技巧 + Bootstrap 表格

$

0

0

網路上有不少服務或資源，會提供學生身份、或教育單位的教職員優惠，也就是所謂的「教育版」。而判斷能否使用教育版的身份識別，會看電子郵件是否為 EDU 網域。

會找到這篇的讀者，想必已經知道 EDU 教育信箱的用途，也知道有什麼軟體、或服務可省下的費用，這部分的內容就先略過。

其實在台灣，如果非學生、教職員的身份，一樣有辦法可以獲得 EDU 教育信箱。多數大學生畢業後，學校提供的 EDU 信箱仍可繼續使用。而越來越多大學，也開放校友申請 EMAIL，讀者不妨上網查一下。

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

(圖片出處: G Suite)

一、校友會資料庫不齊全

WFU 查了一下母校，發現有開放校友繼續使用在學的 EMAIL 信箱，於是去信詢問操作、使用方法。

一開始往來回覆的速度都滿快的，得到資訊後進行操作時，卻一直無法登入，總是顯示帳號或密碼錯誤。我的推測是，目前的郵件伺服器應該沒有我的帳號資料。這麼想是滿合理的，在電腦化之前的校友本來就不會有資料。而就算是電腦化後的年代，計算中心也不會那麼勤勞，把一、二十年來(也就是網路世代以來)的所有舊校友郵件帳號，都搬到目前的郵件伺服器。

我不清楚母校是何時開放校友使用 EMAIL，不過我相信在開放的時間點之前的舊校友，帳號不會出現在目前的郵件伺服器。於是我的最後一封郵件詢問，能否移轉我的郵件帳號到目前的伺服器，結果就沒下文了。

我想校友會若未對此事進行收費的服務(就算我已表達付費意願)，計算中心人員也沒必要做白工處理這樣的事，所以乾脆打消取得校友信箱的念頭了。

當然，這是我的母校的狀況，讀者還是可以碰碰運氣，說不定從你的母校取得教育信箱是很容易的。

二、購買 EDU 郵件

其實國外有不少管道可取得 EDU 信箱，但因為語言的關係需要時間研究。為了不讓這樣的資源被濫用，以下心得只有加值會員可用點數兌換。

三、教育單位可使用 G Suite 服務

測試完這次購買的郵件帳號，也瞭解到為何可以大量產生 EDU 郵件帳號，因為是使用 G Suite 教育版的服務(內含 Gmail)，優點為：

• 完全不需自行維護郵件伺服器，所有的郵件由 Google 管理，省下流量、空間費用。
• 學校只需要控管帳號、密碼就好
• Gmail 畫面重要處都有學校的 Logo、名稱，依然可以算是學校的郵件系統
• 跟自行維護相比，學校幾乎不用什麼成本，就能使用 Gmail 不斷更新的功能
• 而且申請的帳號再多都不是問題，因為郵件容量是 Google 負責的

那麼台灣的教育單位，是可以考慮將郵件系統外包給 Gmail，不但省經費，不用處理垃圾郵件問題，附加功能又強。

申請方法可參考「開始使用 G Suite 教育版」、「Google教育方案G Suite for Education申請-2017版本」，基本上 Google 完全是免費提供，這樣子將來校友要申請帳號也不用麻煩了。

更多 Google 相關文章：

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

三國志11__五奇戰記(4)__起源

May 24, 2018, 9:07 am

≫ Next: 如何使用 CDN 免費網頁字型﹍簡單快速沒有侵權麻煩

≪ Previous: 取得教育信箱(EDU EMAIL)的管道及使用心得

$

0

0

將近十年前留下「經典戰記三部曲」後，五奇兄弟就歸隱山林。由於「孫伍兵法」已廣為流傳，不求名利的五奇自覺心願已了。

近期在 PTT KEOI 版發現有佈告「311 三分歸晉 用新武將該怎玩?」，五奇看了這個架空的年代，新武將唯一的空白郡為「新野」，不正是當初的成名發跡之地嗎？

(按：「三分歸晉英雄復出」劇本下載請見「三國志11有趣劇本彙整」)

一、背景介紹

伍伊：三11都十幾年了，很久沒看到苦手求救，難道還有孫伍兵法無法抗衡的劇本？

伍佴：既然同是新野，拿上次的招數開局便是。

伍參：不成，251 劇本空白郡多，且勢力分裂，只要打下一城就可獲得所有人才。

伍賜：對，且「三分歸晉」晉軍坐擁全國領土，不但打下任一郡都拿不到人才，且晉軍每月進攻永不停止，就算我們兄弟聯手、能力值各加 100，遲早還是輸給資源消耗戰。

伍武：更不用說這變態劇本港關城防霹靂高，以往的火攻坑兵都會無效。而且在正中央開局，還搬不了家，別想偷溜到四個角落龜起來。

伍伊：看起來真是一個自虐的劇本呢！

伍佴：會選這個開局真是瘋了~

伍參：那可不是？

伍賜：選魏、蜀、吳開局還比較像正常人...

伍武：就是可惜祖傳的孫伍兵法也治不了這個瞎掰的劇本！！




沈默片晌──

伍伊：hmm...這麼說來...你們也同意接下這個任務了！

伍佴：離開家鄉這麼久了，是滿想回去看看的~

伍參：誰不想呢？

伍賜：就等你這句話...

伍武：新野，我們來了！！

二、陣前會議

五奇這群不正常的瘋子，由於思鄉沒多做考慮就決定挑戰此劇本，不過策略分析是他們的強項，由擅長「開會」的伍伊召開了陣前會議──

伍伊：這次難度太高，就算熟讀兵法也未必成功，先聽聽大伙的看法。老五你智力最高，新野有奇巧妙招能守住嗎？

伍武：新野連外三條主徑，我翻遍整本兵法，任一主徑都沒有火球陣、堵路的可能性。同時湖陽港為晉軍屬地，也沒攻城器具可坑兵。再加上只有我們五兄弟，經綜合能力分析考量，守住新野的機率一共是 0%。

伍伊：咳(清喉嚨)...很實在的分析，棄新野勢在必行。老五你武力最高，有沒有能打得下的鄰郡？

伍武：港關已被阻絕，引兵只能從許昌、宛下手。然而這次許昌有 135k 駐軍，251 新野開局的成功經驗無法複製。宛城只有 30k，引兵攻下的機率是有，但要考慮鄰郡的動向，以及晉軍的援軍問題。

伍伊：除了引兵沒別條路？兵行險著，也只好用此詭道了。看來要解決的問題很多，一個個來。老五你建設能力(政治)最好，新野多快會被進攻？

伍武：根據兵棋推演，只要敵方建設出「三農+三市+其他必要設施」，就會開始進攻新野。許昌 5/11 就會出發──




江夏隨後也會進逼，有時江陵 6/1 也來湊熱鬧。




伍伊：所以不但引兵要快，許昌也要試著拖慢建設速度。那麼宛的援軍是怎麼回事？

伍武：根據兵棋推演，宛的迎擊部隊糧盡之時，上庸會立刻派出援軍，如此新野恐怕撐不到攻下宛城之際，必須想辦法用設施拖住上庸的援兵。

伍伊：嗯...之後要制訂的戰術細節可不少。老五你最有魅力，萬一可打下宛城，晉軍會有人歸降嗎？

伍武：根據一份信心水準 99%，誤差範圍正負 0.87% 的可靠市調結果，所有史實武將願意加入五奇的人數為 0。

伍伊：hmm...這麼不堪啊...

伍武：換我問了吧，大家覺得新野如果守不住，難道換作宛城就守得住了嗎？

伍佴：Zzz...

伍參：ㄜ...還在開會啊！

伍賜：該我上場了嗎？

伍伊：連五弟都覺得希望不大的話，那應該就是這樣了，做個會議總結吧──

• 方針：速攻宛城是唯一活路，至於其他困難則見招拆招。
• 戰術：
  • 引兵取宛城
  • 阻止上庸派出援軍
  • 延遲許昌進攻時機

三、進攻宛城

281/1/1
五：1900 馬、4000 金、10000 米
四：2000 劍
三：2000 槍(移動力比劍兵稍高)

雖然伍武開局就把新野 4000 金全部帶走，但五奇親兄弟不計較，就算沒薪水做白工也不會減少絲毫忠誠度。


1/11
二：1 馬、12 米
一：1 馬




1/21
進入宛之前先整好隊，伍參、伍賜、伍武一定要位於上圖之處。

本戰記行軍站位非常重要，失之毫釐差之千里，一步之差就可能盤勢瞬間崩潰，建議先瞭解「各兵種在不同地形的移動力」。




2/1
伍武在圖中位置製作火球，必須由伍佴點燃；其他人依序進入宛。

伍佴距離宛城的移動力最少，故敵人的追擊目標會是伍佴，而非伍武。




2/11
一樣特別注意伍參、伍賜的位置，因為這兩人無馬缺乏行動力。

因火球阻隔，迎擊的宛軍右側有森林影響行動力，故只會從左側繞出。

出陣的士兵數有可能介於 20 ~ 25k，如果是 25k 則運氣最好，可縮短攻下宛城的時間。

伍武：經兵棋推演，守軍只會帶 10 旬兵糧，引兵戰術利用此點，只要拖過 10 旬就能有效消滅敵軍。




2/21
將宛軍追擊目標伍佴往新野移動，其他人往東逃竄，避開張繡騎兵的移動力、以及兩格的用計範圍。




看一下移動後的結果，伍參、伍賜移動的最遠距離僅能剛好避開騎兵用計範圍，也可以說運氣不錯，就差那麼一格讓整個戰術得以成立。

另外伍伊往最北邊移動，目標進入許昌。

伍佴往最南邊移動，目標進入江夏。




3/1
超過 1 兵的三個部隊，目標是前往上庸阻止援軍，但又需要計算宛軍的移動範圍，因此只能亦步亦趨小心站位。

伍武：經兵棋推演顯示，若伍佴直接將張繡帶往江夏，由於路程不夠長，在宛軍缺糧前伍佴就可能遇上吳軍而被消滅，導致宛軍未缺糧就退回宛城，戰術失敗。

故圖中伍佴本回合的操作至為重要，故意往下跑引張繡進入森林，拖延他一回合後，戰術就得以成功。




3/11
五四三照樣計算宛軍動向，另外伍伊此回合可進入許昌境內。

伍武：陣前會議說明過，許昌 5/11 就會進攻新野。經兵棋推演，洛陽在差不多的時間點也會出發攻擊許昌，故只要讓許昌晚一兩旬完成三農、三市等必要設施，在洛陽的攻擊下，許昌就無暇進攻新野。

因此伍伊只要 5 月之前騷擾許昌 1 ~ 2 次，新野就不受威脅了。




但伍伊的站位需要小心，因為郭嘉「鬼謀」用計範圍多一格，停留位置至少要離上圖騎兵 4 格才保險，預防郭嘉出現在曹軍第一個部隊。




4/11
五四三終於以最快速度趕到上庸，並準備在此築起土牆。此時宛軍尚未缺糧，上庸身為補給郡，只有申家兄弟 2 人駐守，加上晉軍行動力之故，目前不會管境內的伍家軍。

伍武：此處戰術說明如下──

• 翻閱兵法之後，以目前伍家軍的資源，宛對上庸不存在有效的火球陣堵路戰術。
• 經觀摩「公孫恭戰記」之後，"北平動物園" 戰術可讓上庸守軍不攻擊土壘，也無法前往宛城，缺點是必須持續有人站在上庸境內。

• 上圖即為兵棋推演的效果，強如鬼門也奈何不了。
• 經兵棋推演，若上庸境內沒有伍家軍，上庸會立刻派援軍前往宛城。由於宛城仍屬於晉軍，援軍不會攻擊土壘，但會繞向新野湖陽港，再轉向宛城。因援軍至少攜帶 20 旬軍糧，沒有缺糧問題。只要援軍能抵達宛城，伍軍立即失敗

因此，五四三以最快速度造好土牆後，派一人站上庸境內，就能複製公孫恭的成功模式，不但癱瘓上庸，也斷了宛的援軍。




4/21
回到江夏戰場，在這個位置、及時間點，伍佴可能兩回合內被追上或消滅，故他的米刻意只給到下回合。

但無論如何最晚 4 月底，江夏都將會前來協議停戰，這也讓新野少了一方威脅。(停戰的時機及要件請參考「三國志11 綜合主題相關文章彙整」 )




伍武：經兵棋推演，這裡會有幾種分歧點──

• 張繡騎兵在新野點火球而忘了追擊，宛軍按照預定時程缺糧，伍佴也缺糧自動回城
• 張繡追進江夏，勢必與吳軍交戰，導致除了張繡以外的宛軍都缺糧，而張繡會被消滅(大概比缺糧晚一回合)

5/1
此為停戰後的畫面，「騎將」在東吳前三猛將面前最多只能撐兩回合。




再回到上庸，因為宛軍在此回合將開始缺糧，上庸也火速調來 30 位將領準備救援。

伍武：經兵棋推演，5/1 這個時間點上庸通常不會出陣，但少數情況如本戰記會出陣的話，也不用擔心，因為申家兄弟不會帶騎兵，智力也不足以對伍軍用計。若被用計仍不影響戰術執行，劍兵就算被消滅伍軍一樣可另外找人站在上庸境內。




就算最差的強況遇上弓兵，由於本回合土壘可即時完成，戰術不受影響。

伍武：經兵棋推演，弓兵會選擇攻擊劍兵，推測是造成的殺傷力較高，剛好可保護建設主力騎兵。




5/11
暫時由被攻擊後的劍兵站在此處牽制上庸，待伍佴回新野後帶 1 兵來交接即可。




宛軍已缺糧，將往距離最近的湖陽港撤退，而張繡本回合才會被消滅，這也代表宛城第二批迎擊部隊下回合就會出陣。




因此本回合伍伊必須就定位，將宛軍引向許昌。

請注意伍伊的站位，距離主城的移動力要小於伍參，守軍判斷威脅性比較大，才會追擊伍伊。




5/21
一：守軍已出擊，帶向許昌。
三：階段性任務結束，回新野將槍繳庫。
五：前往城西進行防禦工事。




伍伊站位需小心，洛陽已經過來攻打許昌，要同時避開上方弓兵射程、宛軍用計範圍、郭嘉鬼謀範圍。




6/1
伍伊被三方夾擊退無可退，站在原地準備束手就縛。但可以確定的是，被捲入混戰的宛軍大約兩回合內就會被消滅了。




感謝曹操愛才，五奇戰記差點就腰斬了。




伍佴終於回到新野，派出 1 馬、1000 米，足足可在上庸待個 20 年。




宛軍出擊後，伍武站在宛城兩格內讓守軍逃跑，並開始建箭樓。




6/21
伍伊終於回到新野，派出攻城主力 10000 劍兵，但由於米不夠，看要帶 70~100 旬米都可。

伍武：經兵棋推演，第二次出擊的宛軍被消滅後，通常會視剩餘兵裝決定出陣數(以此劇本配置，只剩三種兵裝各 1000)。那麼伍軍只要分別用三顆火球就能消滅剩餘三批守軍。但似乎因為上庸援軍被斷，宛軍判斷出陣已無意義，故採堅壁清野，消耗攻城兵力，也實屬合理。




7/1
一：因宛不再迎敵，10000 劍兵直接攻城。
二：前往上庸換班
四：加入攻城行列(因離開上庸導致文聘出港追擊，但米不夠他走到宛城)
五：繼續建設、讓城裡逃兵




7/11
伍參換裝完改 1 馬出陣，之後只需在宛城旁放火，增加城內傷亡即可。




8/11
伍武如圖建好 2 箭樓，就可到城東繼續建設。




10/11
隔壁打得火熱，雙方都無暇顧及宛城，新野暫時也不受威脅，何時拿下宛城只看伍軍要或不要而已。但保險起見，最好等伍武完成他的火球再打下宛城。




11/1
沒想到這麼間不容緩、許昌危急存亡之秋的時刻，曹操竟然還能騰出手來騷擾新野...




12/1
也罷，伍武做完 7 顆火球再也沒有多餘的錢進行其他建設。

伍伊雖然早就缺糧，但士兵逃跑無妨，重要的是保留兵裝部隊。

伍賜將新野物資全部打包，此回合可正式將陣地轉移到宛城，給予最後一擊。






伍賜：張角帥翻了！是個人才~咱們兄弟將如虎添翼！

伍伊：可惜市調說明了一切，不會有人投降，只怕是空歡喜一場...

伍武：俘虜每人每月得花 50 金，宛城目前資金缺乏、百廢待舉，最好只留對守城戰有幫助的高智、高武統將領，或許將來有一絲機會可以登庸。




伍伊：釋放名單就這麼決定吧！

伍武：初期人手缺乏，俘虜張角、張任、婁圭可以理解；而牽弘、胡奮、郭攸之能力還不到頂尖，釋放雖可惜但可以理解。不過大哥，留下鄒氏的用意是...？

伍伊：這個......那是因為......我想想啊...

(伍參 OS：加油啊...大哥靠你了！)

伍伊：是特技，咱兄弟沒有的特技(清喉嚨)。鄒氏擁有罕見的「奏樂」特技，可提升氣力。宛城能否守下尚在未定之天，不但艱鉅且無法預知終期，會造成伍家軍的士氣低落。鄒氏就算只能待在牢房，我相信對眾將士們來說，精神上都會是莫大的鼓舞！

伍參：不愧是大哥，我就知道你行，50 塊我出~

伍賜：大哥是對的，宛城可以守久一點沒問題啊！

伍佴：大哥，我在這站很久了~什麼時候可以回宛城啊？五弟，給我的米太多了，你趕快想想宛城要怎麼守，把我調回去吧！

四、下回分曉

五奇一改出陣前，對防守宛城不報任何希望的消極姿態，現在忽然間精神大振，找到了死守宛城的意志力與決心。

除了設定目標，「意志力」+「決心」才是成事與否的最大關鍵。五奇產生了內心驅使的動力後，腦中能浮現多少守城的妙計呢？請見下集的進展：

• [三國志11] 五奇戰記(4)__固守宛城大作戰

(伍武：試著兵棋推演，若將張濟斬首會發生什麼事...)

更多五奇戰記：

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

如何使用 CDN 免費網頁字型﹍簡單快速沒有侵權麻煩

May 25, 2018, 2:55 am

≫ Next: 三國志11__五奇戰記(4)__(下) 固守宛城大作戰

≪ Previous: 三國志11__五奇戰記(4)__起源

$

0

0

有遇過幾次客戶要求網站使用特定的字型，看起來這樣的要求似乎不是太困難，然而實際上，客戶多半對「網頁字型」沒什麼概念，以為 Windows 下某軟體有看過某字型，就可以在網頁上使用。

網頁字型的使用，不是一件輕鬆的事，需要瞭解的概念大致有這些：

• 不是自己的電腦可看到某字型，別人的電腦也會有那個字型
• 不是自己的電腦能使用某字型，該字型就能在網頁上使用
• 一個字型能否用在網站上，需要詳讀該字型的授權條款：
  
  • 就算買了付費字型，也不代表一定可以用在網站上
  • 有的網頁字型是依照網頁瀏覽人數計費
  • 有的字型是依照時間計費(月/年)

對於一般非營利、或做小生意的網站及部落格，瞭解以上概念後，為了節省時間及麻煩、避免收到法院傳票，最簡單的方式就是直接使用「免費的網頁字型」。雖說是免費的字型，還是有很多步驟要進行，以及相關概念要瞭解，請見本篇的說明。

一、使用作業系統預設字型

設定網頁字型最簡單的方式，就是為各種作業系統的訪客，顯示預設的字型，就不會有任何問題，也不會讓訪客只能看到 "新細明體"。

詳細的原理、以及 CSS 設定細節，請參考「網頁中文字型除了微軟正黑體, 還有這些好選擇！」、「網頁中英文字型跨平台設定最佳化」這兩篇基礎文章。

為什麼這樣的方式最簡單呢？因為網頁不需引用額外的字型檔連結，那麼載入速度就比較快。想像一下網頁如果額外載入一個幾 MB 的中文字型，訪客很快就跑光了。

二、有 CDN 的網頁字型

客戶們另一種可能比較沒有概念的地方是，不知道使用特定字型需要載入字型檔，所以也不知道網路上要有個空間放字型檔，並產生一個連結能讓網站載入。

由於找網路空間、取得連結這個流程並不輕鬆，而且這個網路空間的連線速度快不快，也會影響網頁字型的載入速度。那麼最好的解決方案，是看有沒有佛心服務，為所有站長們提供免費網頁字型的 CDN 連結。

這篇「FontCDN 更好用的 Google Fonts 網頁字型搜尋工具」介紹了這個 CDN 服務，讓站長們不用再煩惱網頁空間的問題，可參考文章說明取得你想使用的網頁字型連結。

例如在「FontCDN 官網」 找到這個字型 "Lobster"，點擊後出現下圖：

• 第一行 <link... 的全部內容複製起來
• 貼在範本中 </head>的前一行就完成引用
• 第三行 font-family 語法，用來設定讓自訂區塊顯示該字型

三、Blogger 預設字型

1. 官方範本

如果是 Blogger 使用者，其實官方就提供了許多免費字型可用。如果你使用官方範本，操作方式如下：

後台 → 主題 → 自訂 → 進階




如上圖，想要變更字型的區塊都可挑選字型。除了基本的幾種字型，Blogger 官方另外提供了大量的免費網頁字型可挑選，並可直接預覽字型效果。

設定完畢後，按右上角「套用至網誌」就完成了，不必處理麻煩的 CSS 語法問題。


2. 非官方範本

如果非官方範本、或是曾經修改過範本，就麻煩一些，有可能範本被修改後，導致原本設定字型的功能消失了，按照前面一樣的步驟進入「Blogger 主題設定工具」，會找不到字型的選項。

那麼此時可以另開一個全新的 Blogger 部落格，然後按照一樣的流程進「Blogger 主題設定工具」，隨便找個區塊設定你要的字型，並「套用至網誌」。

假設我剛剛設定的字型一樣是 "Lobster"，接著開啟這個新 Blogger 的網頁，按右鍵「檢視網頁原始碼」，然後搜尋 "Lobster"，大概會看到這樣的畫面：



把上圖紅框處所有的 code 複製起來，然後一樣貼到範本中 </head>的前一行就完成這個字型的引用了。

最後一個動作，在範本中為想要顯示這個字型的區塊，設定這個字型的 font-family 即可。

更多字型相關文章：

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

三國志11__五奇戰記(4)__(下) 固守宛城大作戰

June 9, 2018, 9:07 am

≫ Next: 經營何種類型的網站，可以靠 Adsense 廣告點擊收入維持生計？

≪ Previous: 如何使用 CDN 免費網頁字型﹍簡單快速沒有侵權麻煩

$

0

0

「上集」五奇經過縝密的策劃與算計，加上大量的兵推反覆驗證，終於成功拿下宛城。但從殘留的兵力來看，只能算是慘勝。

而形勢更加嚴峻的是，在沒獲得更多將領的情況下，必須以更少的人手與兵力防守宛城。

一、宛城防守策略

1. 防守城東



如上圖建好 7 火球 + 1 箭樓，可防堵大部分的狀況。




不過等到宛右下方的經濟區有建設，且上圖位置有騎兵(或精銳兵種)時，其移動力可越過火球，走到下方森林攻擊經濟區。不過只要派 1 兵帶 1k 米，就能抵擋二十年沒問題。

會有少數不好應付的情況：

• 飛將、遁走：少數能若越過火球的特技，不過因為靠城很近，多打一不難解決，也可每回合造火球攻擊，讓呂布只能滅火而沒有還手之力。
• 鬼謀：到了後期晉軍發展出神火計，郭嘉在某些位置可點燃火球攻擊箭樓，此時近乎無解，解法只有兩種：
  • 敵部隊很多時，想辦法控制讓鬼謀待在上圖曹真的前排位置，那裡因點燃火球也攻擊不到箭樓，所以不會點火球
  • 在神火計出來之前，若看到晉軍有鬼謀出陣時，想盡辦法抓到鬼謀

2. 防守城西

曾測試各種封鎖方式──





若用土壘封住通道，加上陣等設施，晉軍見此路不通，且攻擊難度難度大於城東通道，有可能從北方繞往城東，剛好被右側的火球陣塞住。但實際上，敵軍部隊內部會記錄兩種隱藏方針(玩家請打開 san11 編輯器)：

• 征服：會攻擊所有看到的敵軍、障礙物或經濟區
• 攻擊：已攻擊主城為主

大部分敵軍的方針都是「征服」，所以只要移動範圍有土壘，100% 會攻擊土壘，長久下來城西必定守不住。




找到的唯一解，在城西箭樓上方建立 5 個火球，初期可保護箭樓不被攻擊。左邊一排荒地無法建設，當敵軍從這裡進來時──




在上圖箭樓旁建火球，並馬上引爆火球，形成一道天然屏障，剛好可以保護箭樓不被攻擊。敵軍看此路不通，而且進攻難度大於城東(2 箭樓 > 1 箭樓)，就會繞道往城東了。

初期按以上要領防守即可，但後期晉軍有了弩兵「強弩」、「神火計」後，可以點燃火球攻擊箭樓，此部陣將失效。

但此時宛城的發展已經有足夠兵力、將領可作戰，所以可拆掉所有火球、箭樓 x 2，改放一個太鼓台，直接開戰沒問題。


3. 防守新野

新野方向其實完全無法防守，但如能控制敵軍一次只來 1 ~ 2 個部隊，那麼就足以防守。




經實驗，本戰記宛城只剩五千出頭的兵，敵軍只會出陣 3 個部隊。再經反覆測試，歸納以下狀況：

• 敵軍進攻部隊至少為守軍 2 倍兵力
• 守軍兵力越少，敵軍出陣部隊也越少
• 守軍維持 5000 兵時，敵軍最少出陣 10000 兵，最多 2 個部隊。

所以宛城只要維持 5000 兵以下，將來敵軍最多只會出陣 2 個部隊。而新野要曹軍被消滅後晉軍才會佔領，且要一段時間後才有足夠資源進攻宛城。由於晉軍多半由長安、洛陽、許昌出兵，要輪到新野出兵，且一次出 2 個部隊的機率非常之低，所以只需要在新野隘口附近建軍事設施就能抵禦 1 個部隊。

二、固守宛城

282/1/11
劇本初始的 4000 金不夠建設所有防禦設施，在打下宛城後，還有城西的 5 顆火球、以及城東的箭樓待完成。

在 281/12/1 佔領宛城後，12/21 長安立即發兵攻打。由於時間緊迫，必須先完成城西的火球 x 5。




1/21
在長安敵軍進入宛後，按計畫點燃火球即可，同時剩餘兵力到城東建箭樓，三回合內可完成，來得及封阻繞道的長安軍。

右上晉軍的攻擊目標是許昌，由於主徑塞太多人才會進入宛，注意伍伊不要位於弓兵射程就好，否則箭樓還沒建好卡 ZOC，弓兵可是會越過火球的。

同時閒置人員可開始建設宛城，例如市場(初期十分欠缺資金)。




3/21
長安軍繞道城東後，宛城就有半年的空檔可以建設、休養生息。沒錢建設時進行搜索指令，可獲得一些錢財、或是寶物，將來可送給忠誠低的武將免花錢。

一開始晉軍的科技還沒有「騎射」，代表越過火球後沒有攻擊目標(經濟區)，所以此時騎兵不會越過火球，暫時可不用派伍參在火球陣下方站崗。




5/21
曹魏撐不到一年半率先陣亡




6/1
正港二奇與四奇很快就流浪到宛城，但流口水也沒用，五奇不可能招攬到任何人的，所以別浪費行動力進行登庸，把時間花在進行內政比較實在。


7/1

進入 7 月後，神奇的事情發生了──











原本最頭痛的「人才」困境，一瞬間不復存在。有了人才，宛城建設速度就非常快了。




一方面利用現有人才，繼續招攬更多人才。




一方面完成所有必要設施，全部升級為 LV3。(靠河三個位置可能會被攻擊，建黑市)

同時也建好新野隘口的防禦措施。

接下來就是累積錢、米、兵裝、攻城器具，以及買賣糧，做好養兵十年的準備。

三、宛城發展方針及要點

1. 內政

內政就算做到滿，固定收入只有 1k 金、10k 米，所以還是要靠買賣糧大法才能累積得快一點。以下為目標：

• 累積到 100k 米以上時，足以支撐作戰糧食後，可以開始徵兵，逐步增加到 20~25k 的兵力。
• 徵兵的速度別太快，重點是控制敵軍出陣的速度，最好一次只來 1 個部隊，比較好對付。
• 累積到 500 k 以上的米時，可考慮往外突破。

兵裝的部分，以下為目標存量：

• 弩最重要，目標 20k 以上
• 戟、馬各準備 5~10k 即可
• 槍不用錢，可不準備(宛城特色)
• 攻城器具不急，後期再準備都可
  • 若有「射程」武將，井欄可準備 1~2 台，當弩兵用
  • 木獸為將來攻城主力，可準備 3~4 台

2. 人才

到達目標兵力 25k 後，可以開始作戰，例如把城西火球打掉，圍毆進來的 1~2 支敵軍，最後一擊用戟兵擄人。

初期的擄人重點為：

• 武力、智力 80 以上的將領
• 內政有幫助的特技，如富豪、徵收
• 兵裝有幫助的特技，如能吏、繁殖
• 戰鬥相關特技，如軟硬癱、亂戰、猛者、掠奪、鬼謀、射程
• 仁政可省下非常多錢，越早拿到越好
• 不可能登庸的將領(義兄弟、夫妻...) 直接解決掉

3. 科技

可以戰鬥後，技巧 P 會累積很快，科技發展順序如下：

• 弩兵：直衝 3 級「強弩」，到時宛城防守易如反掌，3 格的射程代表一次可派出將近 10 支弩兵部隊攻擊 1 支敵軍，很容易就能燒傷敵將領
• 再來是熟練兵
• 再來是強化車軸
• 準備打出去之前再點「開發木獸」即可

還有多的點數，看要結義兄弟、或加強特定兵種就好。

四、作戰要點

1. 通則

• 兵力維持在 20~25k 即可，若過多時會引來太多部隊，有可能要多面作戰，不小心操作不當就會崩盤。
• 避免多面開戰，最好戰場只在一處(城西或新野隘口)
• 一次只對付 1~2 部隊
• 出陣以兵少、部隊多為原則，可凸顯圍毆效果；多部隊包圍敵軍容易擄獲敵將
• 一個出陣部隊，槍、戟、馬最多可 2.5k~3k，弩兵、井欄約 1.5~2k

2. 城西攻防

只要好好控制宛城士兵數量，也不要一次消滅太多敵軍部隊，主要戰場都會在城西。





放敵軍進城西通道，用弩兵海削減兵力。等研發出「強弩」後，幾乎可派出兩倍的弩兵部隊發射火箭，敵軍很容易燒傷。


3. 城東攻防

敵軍若全塞在城東，導致城西無戰事，沒技巧 P 可刷有時也很無聊。




可沿路派 1 兵吸引城東敵軍攻擊，例如上圖的黃蓋，一路引到城西。




接著在城西進行圍毆即可




研發出「強弩」後，可用個小技巧，不用戰鬥就能招人。由於射程遠，可派出多達 4 支弩兵部隊到城東。

例如上圖的「關興」隊，裡面的「沮授」忠誠度較低，有機會登用。把兵力射到很低、而米還很多的狀態，這樣「關興」部隊得待一年以上才能回城，沮授遲早被我們登走。


4. 新野攻防



新野這裡靠弩兵海就能守住。但上圖是不好的範例，因為宛城士兵數、消滅敵軍速度控制不佳，導致新野來了 3 個部隊，這樣不好防守，沒有快速消滅敵軍的好方法。




當晉軍有「強弩」、「神火計」後，新野防守會麻煩一些。

上圖是另一個不好的範例，控制不佳導致兩面作戰，這是很危險的，而且新野第二個部隊為弩兵，會遠距離用神火計、強弩等攻擊設施。

總之新野敵軍有弩兵時，記得躲在西側森林，可避免遭到大傷害。

五、反攻突圍

因為雙方資源懸殊，宛城二、三十年之內應該不太可能打得出去。最簡單、也最耗時的打法，就是把晉軍的將領抓光、砍光。

如果要說能在最短時間內反攻的必要條件，大概會是這樣：

• 米累積到 500k 以上(軍糧無缺)
• 晉軍武力、智力 80 以上的將領被抓得差不多
• 抓到「捕搏」
• 完成前面提到的科技項目

由於本篇篇幅太長，以下簡單敘述作法就好，暫時不附圖文了：

• 等待所有敵軍都塞在城東的空檔
• 等待上庸兵力不多，但漢中又還沒來補兵之前，派部隊進入上庸境內，引出所有上庸剩餘兵力
• 吸引敵軍成為攻擊目標的那個部隊，退回宛城境內，誘使所有上庸部隊繞新野過來追擊
• 趁上庸部隊遠離後，打開土牆，主力軟硬癱部隊(約 5k 兵力) + 3~4 個木獸(15~20k)，進入上庸
• 主力部隊料理剩餘守軍(最多只會有 5k)，木獸 2~3 回合內可打下上庸
• 其中一個木獸由「捕搏」進行最後一擊，可抓到至少 5~60 位守軍將領
• 全部砍了

以上流程反覆幾次，晉軍就沒人了；之後宛城就能大搖大擺用木獸出去掃蕩了。

更多五奇戰記：

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

經營何種類型的網站，可以靠 Adsense 廣告點擊收入維持生計？

June 9, 2018, 9:07 am

≫ Next: Blogger 諮詢聯繫填寫表單 SOP

≪ Previous: 三國志11__五奇戰記(4)__(下) 固守宛城大作戰

$

0

0

前陣子接到一個架站需求，雖然客製功能很多，但客戶開出的預算比起一般水平高出不少。其實跟客戶也不算不認識，所以跟他聊聊架站的目的，其中幾點他提到：

• 希望以興趣養活自己，因此我有設定Adsense
• 同時不希望廣告造成訪客困擾，這其中的平衡需要你幫忙調整
• 因為我自己也不太喜歡廣告XD 不過沒有收入也養不起興趣

看到這幾句有點嚇到，能純靠廣告收入獲得上班薪水程度的部落格網站沒多少，要嘛我恰巧遇到萬中選一的絕世高手，要嘛可能客戶的目標設定不太實際。

我的個性不會看到大案子就一定接，而且這個客戶也算是 PTT 彼此知道的版友，不太可能當客戶對架站目的有誤解時，為了賺錢就幫他先架再說。所以最要緊是的先釐清客戶現狀，我可不希望他花了錢架了站，三、五年後才發現，別說維持生計，連把架站的錢賺回來都很勉強。

還好後來知道，客戶有在上班、是有薪水收入的，代表網站的廣告只是順便，但希望有朝一日網站若爆紅時，廣告收入能到達預期的水平。

如果是這樣我就放心了，沒有把生計壓在網站的廣告收入至少不會出事。但我相信一定很多站長也會抱持同樣的憧憬，希望有一天只靠廣告就有夠多的被動收入。其實我當初也這麼想過，只是沒多久就發現，這件事有它的物理極限在，一般人、或是正常的經營方式，不太可能賺到足夠的廣告收入過活，只有極、極、極少數的人做得到。

那麼本篇就來聊聊，什麼樣的網站，有可能靠 Adsense 點擊收入過活。站長們也可評估自己，是否決定要往這條路前進。

(圖片出處: pixabay.com)

一、部落格廣告收入的要件

影響廣告收入多寡，是由這兩者決定：

• 點擊出價：中文出價較低，英語系出價很高
• 點擊數：流量越高，點擊數也會越高，因為會去點廣告的人就是只有那個百分比

身處台灣，出價我們無法控制，只能想辦法增加「流量」。如果是部落格，持續增加流量的方式，就是增加「文章數」。(行銷手法等變數先略過，先假設大家都一樣厲害)

所以，要靠廣告為生的物理限制就是，單靠我們自己，究竟能生產出幾篇「文章」呢？

我想，單靠幾篇爆紅的文章，而不增加文章數，想要吃一輩子，是不切實際的事，這種極端的例子先不討論。


1. 要多少流量才能維生

上網找了一些分享廣告收入、有相關數據的文章，這篇「需要多少流量並引導訪客點擊廣告，才能每年從 Adsense 賺到 14600 美元？」，其舉例摘要如下：

• 點擊率 5% (我認為太高)
• 點擊收入 USD 0.23 (我認為偏高)
• 每日流量約 15,000 計算，一天收入約一千出頭
• 一個月收入可超過三萬，算是可維持生計的水準

但拿 WFU BLOG 的數據比較後，以我的點擊率、及點擊收入，我可能要每日流量超出 5 萬 很多才有辦法到達這個收入水平。而事實上 WFU BLOG 的日流量遠低於 5 萬的十分之一。

這是另一篇香港網友寫的「4年親身經驗：Google Adsense網賺值不值得用？」，幣別不同讓讀者參考看看，靠廣告收入維生的要求實在太高。


2. 不是文章多就能帶來流量

網站經營之初，要逐步累積文章數才可能帶來流量。但也不是拼命猛寫就有用，如果質量跟不上產量，其實帶來的負面影響更大。讀者心目中對網站的評等一降，除了回訪率降低，也減少分享數、文章的擴散率。

總之，要累積流量除了衝文章數之外，其他的物理限制就是：

• 你能寫出幾篇高水平的文章？
• 你能否持續寫出一定水準的文章？
• 如何產生新靈感、有新主題可寫？

江郎也有才盡的一天，肚子墨水要有辦法持續補充。質量不夠高的文章，連搜尋排名都沒有，自然無法由 SEO 帶來流量。

瞭解基本概念後，接下來看看哪些網站、何種經營方式，可以獲得龐大的流量。

二、英文網站出價高

第一個突破物理限制的方法，是寫英文網站，因為英文廣告出價高，可能比中文地區多上 10 倍。

然而，英文網站要擠上搜尋排名，競爭激烈程度可能難上不只 10 倍，想想使用英文的人口跟繁體中文人口的比例就好。

但如果是人才，轉戰英文一樣會是人才，那麼我認為獲得足夠的廣告收入是有機會的。

這篇「GOOGLE ADSENSE 前十大收入站主」列出某個時期的英文網站收入前 10 名，可以參考每日流量要設定多少為奮鬥目標。

三、快速產出內容的管道

部落格站長寫到後來就會發現，最大的困難是不知道要寫什麼，沒有那麼多可維持質量的主題可寫。要突破大腦的物理限制，最簡單的方法，就是「內容非全由自己生產」。

1. 內容搬運工

概念可直接參考這篇「你是內容的生產者，還是搬運工？」，用這個方式可節省很多找題材、靈感的時間。


2. 翻譯

翻譯也算是搬運工，訂閱大量國外相關的英文網站後，每天就有寫不完、翻譯不完的素材。

但這條路早有太多站長在做，除非你的領域還沒人碰，否則大概也沒什麼空間了。


3. 爬蟲網站

另一種搬運的形式，是直接將他人網站的文章，直接全部爬回自己網站。

以前有個客戶，他會爬境外的網站，搬到自己的網站，所以我大概知道一個月要多少流量，可以獲得上班族的薪水。那個月流量對一般部落格來說，算是天文數字，所以我比較建議一般站長別走衝流量這條路，你生產文章的速度趕不上人家抄襲文章的速度，做黑的反而才能靠廣告收入維生。

某個很大的內容農場，專門爬微博(經留言 #1 提醒，應是"微信"公眾號之類)的文章再整理，現在網站的權重已經數一數二，就算同樣的主題一般優質網站的排名也贏不了農場。

說來很洩氣，但執意當正派的「內容生產者」，廣告收入是絕對贏不了農場，這也是為何我不斷建議讀者別走這條路，不要把廣告收入看太重。

四、內容由他人提供

其他「內容不由自己生產」的管道，可以有下面這些作法：

1. 請小編

有資金的話，可以買他人時間，也就是請小編來寫部落格。當然，網站要先大到一定程度才可能這麼做，否則哪有錢養員工呢？


2. 共筆

早期的「MMDays」網站，由好幾位一同撰寫，例如 Monday、Sunday...，可以避免一個人才思枯竭的狀況。


3. 轉載

大型媒體網站的小編很有優勢，想不出主題可寫時，可徵求網路熱門文章的作者同意，再轉載到媒體網站。作者多半會同意，因為可增加知名度。

一般部落格要轉載別人文章，原作者倒不一定買單，因為沒有知名度，被轉載還會對 SEO 有影響。

除非人脈廣、夠資深，例如「內容駭客」，才有資格走轉載這條路。

五、論壇

撇開一般網站的型態，能獲得大量廣告點擊收入的，就是架設論壇了。而論壇也是屬於「內容由他人提供」的型態。

開頭提到的客戶，也有想要架設論壇，不過一樣要給站長們提醒：

• 要設計出一個功能完善、獎勵機制健全的論壇，其實所費不貲，也要考慮主機、流量等費用。
• 這個新的論壇，是否有足夠誘因，能吸引大量使用者加入？
• 如果已經有現成的同類型論壇，為何原使用者要放棄原論壇？
• 例如遊戲相關論壇，為何不用巴哈，而要來這個新的論壇？

所以個人認為，經營論壇的難度，會遠比經營內容網站更為艱鉅。

七、全世界通用的工具

最後一種想到的，能靠廣告獲得大量收入的網站類型，是提供全世界(或該語系)通用的工具網站。

這類的網站很多，例如前端工程師可能會用的「Javascript 美化工具」，或是部落格站長們常會用到的「Pixabay CC0 免費圖庫」。

但共通點是：

• 只有最頂尖的工具能夠存活下來

畢竟同樣的工具，只要在一個網站使用就好。搜尋該類工具，使用者通常只會點第一個搜尋結果。而使用者的書籤，也只會儲存一個最好用的網站。

總而言之，從工具類網站的存活率來看，要經營也是遠比內容網站還難。

八、總結

本篇介紹非常多的網站經營型態，在在顯示要獲得大量廣告收入的話，跟付出的時間、精力、成本相比，是非常不划算的，甚至可以說是──

• 等於在幫 Adsense 做廉價勞工

站長們可以把時薪換算一下，別說要獲得基本工資，可能連 1/10 都沒有。

那麼寫這篇的用意為何呢？我會建議站長們有空看看這兩篇「找回經營網站的動力」、「如何成為部落客中的佼佼者」，把目標放在獲得廣告收入，是 CP 值相當低的一件事，也可以說是消耗我們的時間、生命。

如果把經營網站的目標，擺在「建立個人品牌」，讓網站打開我們的知名度，用所寫的文章建立起專業度，將來不管是獲得貴人賞識、合作機會，或是成為接案來源，這些報酬都遠遠不是廣告收入可以相比的。

更多 Adsense 相關文章：

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

Blogger 諮詢聯繫填寫表單 SOP

June 24, 2018, 9:07 am

≫ Next: 用 Line、FB 手機 APP 開啟網頁對前端工程師的困擾﹍JS 辨識內建瀏覽器(webview)的方法

≪ Previous: 經營何種類型的網站，可以靠 Adsense 廣告點擊收入維持生計？

$

0

0

本站常會接到許多 Blogger 相關的提問、合作案件、或是詢價，無論是簡單的問題，或是大型的專案，只要提供的資訊不足，就不容易進行回覆，需要花費多次往來溝通的時間。

因此若有需要向本站洽詢之前，麻煩按照本文流程提供必要資訊。

(圖片出處: picjumbo.com)

一、初步資訊分類

經由以下問題，可協助釐清您的需求分類，以及是否需要填寫表單：

• 是否需要協助架站？
  
  • 是 → 請參考「BLOGGER 架設網站客製化作業流程」，按照該篇說明與我聯繫，並提供需求明細。
  • 否 → 繼續下一個問題
• 是否要發客製、合作案件給本站？
  
  • 是 → 請參考「Blogger 提案合作」瞭解本站的服務項目，用該篇表單與我聯繫，並提供需求明細。
  • 否 → 繼續下一個問題
• 您的提問是否為 Blogger 官方範本問題？
  
  • 否 → 非官方範本問題需要「付費諮詢」，請參考「Blogger "長期免費諮詢" + "付費諮詢" 申請」。
  • 是 → 繼續下一個問題
• 您的提問為 CSS 相關問題？
  
  • 是 → CSS 相關問題需要「付費諮詢」，請參考「Blogger "長期免費諮詢" + "付費諮詢" 申請」。
  • 否 → 繼續下一個問題
• 您的問題是否本站有相關文章？
  
  • 是 → 如果您在本站看過相關文章，請在該篇文章留言即可。
  • 否 → 繼續下一個問題
• 請問是否首次聯絡？
  
  • 是 → 請填寫下面表單的所有資訊
  • 否 → 請用之前的郵件直接回覆、改郵件標題即可，不必重新填寫表單

二、必要資訊

確認完以上問題後，根據不同的聯繫管道，需請填寫一些必要資訊(一般會在 24 小時內回覆)：


1. 使用 Email

可複製以下項目到您的郵件：

• 您的稱呼：
• 您的網址或提問的相關網址：
• 請簡單自介、或如何找到本站：
• 詳細描述您的需求、問題或意見，如提供的資訊不足，可能無法回覆：

聯繫方式如下：

• 聯繫人：Wayne Fu
• Email：wayne@wfublog.com

2. 聯絡表單

或者您也可以直接使用下面的表單與我聯繫：

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

用 Line、FB 手機 APP 開啟網頁對前端工程師的困擾﹍JS 辨識內建瀏覽器(webview)的方法

June 24, 2018, 9:07 am

≫ Next: Blogger 恢復網址後綴(.com)，可能導致 Google 網站管理員索引大幅下降(search console)

≪ Previous: Blogger 諮詢聯繫填寫表單 SOP

$

0

0

前陣子的一個專案，客戶反應很多使用者用手機操作時，網頁會有錯誤導致無法註冊。但我手機實測的結果又沒有發生任何問題，於是請客戶提供使用者的操作環境，例如 Android 或 iOS 系統，瀏覽器版本等等。

結果都不是這些原因，最後才發現是因為使用者在 Line 上面開啟網站連結所引起。當 Line 點擊連結時，並不會呼叫手機的預設瀏覽器(例如 Chrome、Safari 等)，而是會開啟內建瀏覽器，專有名詞叫做 In-App browser，或是 webview。

這件事就非常麻煩了，因為內建瀏覽器並不像主流瀏覽器能支援最新的網頁技術、JS 或 CSS 語法等等，要 Debug 問題也是非常麻煩的事。

偏偏客戶的使用者有很大的比例會操作 Line，所以解決網頁在「內建瀏覽器」上的問題，變成一件必要且急迫的事。

先說結論，研究半天後發現，這件事以目前的技術，沒有治本的解法，只能先用治標的方式撐著，等待科技的進步來化解這個麻煩，或是看能否有消滅「內建瀏覽器」這個產物的可能性。

(圖片出處: pixabay.com)

一、什麼是內建瀏覽器

前端工程師已經夠悲情了，要應付 PC 網頁、各種行動裝置的眾家瀏覽器(及不同版本)的網頁效果，現在竟然還有手機「內建瀏覽器」這個大魔王。

為何說是大魔王呢？以前多半只要告訴客人 "請使用主流瀏覽器，才能支援最新的網頁技術，獲得最佳效果"，但現在這句話已經無法輕易打發客人了，因為越來越多手機 APP 在開啟網頁連結時，都不呼叫外部瀏覽器，反而一律使用「內建瀏覽器」，例如 Line、FB、twitter、instagram、微信....等等族繁不及備載。

可參考這篇「關於 WebView: 10 件你需要知道的事」，實際上手機的 "內建瀏覽器" 並不具備完整的瀏覽器功能，所以前端開發者也不太可能用這個環境來開發網頁。

那為何這個殘缺的瀏覽器，卻成為眾多手機 APP 的最愛，一定要用內建瀏覽器來開啟網頁，不惜犧牲使用者體驗呢？

二、為何 APP 要用 webview

原本跟客戶說這是 Line 的問題，不是我們網頁的問題，還想說請客戶去跟 Line 抗議，要求取消強制用內建瀏覽器來開啟網頁。

不過大概爬了一下文後，就知道這是不可能的事，APP 不會放棄使用內建瀏覽器，原因大致是這樣：

• 使用外部瀏覽器後，使用者注意力一分散，就會忘了回到 APP
• APP 死命也要將使用者注意力留住，而內建瀏覽器按右上角關閉後，會立即回到 APP
• 使用外部瀏覽器開啟時間長，而內建瀏覽器輕薄短小，開啟速度快，回到 APP 也快
• 使用外部瀏覽器後，蒐集不到使用者的數據
• 在 APP 內執行 webview，所有使用者行為都被 APP 掌握
• 掌握使用者行為的數據，不會輕易被 APP 放棄

三、內建瀏覽器會產生什麼問題

既然「內建瀏覽器」已經確定成為前端開發者的夢魘，那麼必須試著與惡魔相處。

雖無法百戰百勝，但知己知彼仍是非常必要，這篇「你知道你的網站可能在 InAppBrowser/webview 無法使用嗎?」是前端開發者必讀的一篇整理：

• 購物網站會發生的問題
• 哪些基本的 JS 語法無法執行
• 哪些語法執行效果跟網頁不一樣
• 提供一個測試網頁，可用來測試各種 APP 開啟連結的效果

四、解決方法

1. 沒有治本之道

如果能夠有一個 js 判斷方式，偵測到「內建瀏覽器」時作對應的處置，相信這可以算是 "治本" 的方法。

可惜的是，測試了大部分 Google 到的語法，多半都沒有作用，這代表：

• 網頁技術不斷在更新
• 行動裝置作業系統不斷在升級
• 一些過去可行的判斷語法，會隨著時間失效
• 就算目前找到了可行的語法，也可能一段時間後就無效

2. 後端處理語法

這個 Github 上的專案，可用來偵測 APP 是否呼叫內建瀏覽器：

• Detect InApp

不過是用來裝在後端，所以我不清楚效果如何。

而且如前面我說的，除非這個專案持續有人不斷在維護，否則隨著網頁技術、環境改變，語法可能就失效了。


3. 變通作法

最後是退而求其次的作法，也是我採用的方法，針對客群使用者環境處理。例如 Line 的使用者族群較多，就偵測是否使用 Line 開啟內建瀏覽器。

參考這篇「檢查目前瀏覽器的版本」，提供了 3 種檢測手機 APP 是否開啟內建瀏覽器的語法：

(function() {
var u = navigator.userAgent,
ua = navigator.userAgent.toLowerCase(),
isLineApp = u.indexOf("Line") > -1, // Line 內建瀏覽器
isFbApp = u.indexOf("FBAV") > -1, // FB App 內建瀏覽器
isWeixinApp = ua.match(/MicroMessenger/i) == "micromessenger"; // 微信內建瀏覽器

// 如果是 Line 內建瀏覽器
if (isLineApp) {
// do sth
}

// 如果是 FB App 內建瀏覽器
if (isFbApp) {
// do sth
}

// 如果是 微信內建瀏覽器
if (isWeixinApp) {
// do sth
}
})();
以我客戶的狀況為例，使用者在手機用 Line 開啟連結後會導致特定管道的登入功能失效，那麼可以使用 isLineApp 來偵測是否用 Line 開啟內建瀏覽器。當偵測到時，關閉「特定管道的登入/註冊」的功能來減少不良的用戶體驗。

五、沒有完美的解決方案

由於手機的 APP 太多了，且不會知道將來要流行什麼 APP，所以目前真的只能看到一個洞、塞一個洞。但麻煩的是，有些洞是堵不起來的。

這個 stackoverflow 討論串「How to detect pages when a user browses inside twitter in app?」，有人提出 twitter 要如何偵測呼叫內建瀏覽器，可惜答案是 "不可能"，因為 twitter 沒有針對 webview 這件事，在 navigator.userAgent 塞相關字串。

我們需要慶幸的是，至少一些使用率較高的 APP，例如 FB、Line 等，會在 navigator.userAgent 塞字串讓我們判別。將來如果有使用者回報網頁在某些 APP 執行異常時，前端工程師們再想辦法 Google 該內建瀏覽器的偵測字串吧！

更多 Javascript 相關技巧：

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

---

Blogger 恢復網址後綴(.com)，可能導致 Google 網站管理員索引大幅下降(search console)

July 1, 2018, 9:07 am

≫ Next: 防止網頁圖片被下載的密技

≪ Previous: 用 Line、FB 手機 APP 開啟網頁對前端工程師的困擾﹍JS 辨識內建瀏覽器(webview)的方法

$

0

0

前陣子客戶使用網站管理員(search console)時遇上問題，他表示：

把Blogger與Search console串聯，目的是為了看到瀏覽者是搜尋什麼關鍵字而找到我。但串聯成功後，我在Search console的搜尋分析裡面，卻遲遲看不到任何關鍵字的數據

一開始的直覺是，也許網站管理員提交的時間不夠長，所以需要時間來累積數據。不過到了 search console 後台看時，的確發現一些異常的狀態。

仔細想想，也許跟上個月 Blogger 官方發佈的訊息有關，也就是網址後綴一律恢復為 blogspot.com，因此本篇整理一下相關處理心得。

(圖片出處: pixabay.com)

一、Blogger 網址後綴事件

1. 網址後綴變成 .tw

沒想到這件事都已經 6 年了，一開始 Blogger 的網址後綴一直都是 blogspot.com，直到 6 年前因為許多事的綜合因素(跟 Google 撤出中國也有些關聯)，Blogger 決定讓網址根據不同的「國家/地區」來顯示不同的後綴，例如 .tw .jp .hk 等等，詳細的源由可參考這篇「Blogger 將網址從 .com 轉換為 .tw 的影響及因應之道」。


2. 網址後綴恢復 .com

不過上個月，官方將許多小公告統整打包，在官網發佈了「It's spring cleaning time for Blogger」，大概就是「春季特報」這樣的概念。需要看中文簡短翻譯的話，可參考「2018 Blogger 更新」

其中很不顯眼的夾帶了一條「網址後綴恢復為 blogspot.com」，這當然是好事，至少 SEO 會有一點點加分，網域權重不會被各種不同後綴給瓜分掉。

只是當初為了顯示各種不同網址後綴的理由，為何現在可以無視了，官方倒是沒有提到。


3. 移除程式碼

我相信有非常多站長(非自訂網域)，都會在範本加上一段程式碼，強制將網址後綴恢復為 .com，例如「Blogger 將網址從 .com 轉換為 .tw 的影響及因應之道」→「四、不讓 Blogger 轉址的方法」，這裡提供的程式碼，或是網路上 google 來得程式碼。

因為現在已經不需要這段程式碼了，那麼請務必到範本中將這段程式碼移除，否則訪客進入網站時，網址都會被強制跳轉一次。

二、對網站管理員 Search Console 的影響

回到開頭的案例，我進入客戶的網站管理員後台，大概檢查了一下：




請注意紅框的網址，客戶當初是用 blogspot.tw 這個網址來申請，這是造成本次事件的主要原因。




進入主要頁面後，可看到 sitemap 沒有問題，所有文章都已經提交了，且被收錄。




可是很奇怪，怎麼索引數不多，還越來越少呢？

從客戶提交的網址「blogspot.tw」，聯想到 Blogger 恢復網址後綴「blogspot.com」，可知道從 2018 五月開始，各個國家、地區的訪客一律被轉址到 "blogspot.com"，Blogger 網站的所有流量都會跑到 "blogspot.com"，代表 "blogspot.tw" 這個網址成為跟 G+ 差不多的命運。

"blogspot.tw" 紀錄不到任何流量後，自然 search console 也會逐步刪除這個網域的索引量，直到歸零為止，所以客戶看不到他要的數據、資訊就很合理了。

三、提交 blogspot.com 網域

所以本篇的結論很簡單，請 Blogger 站長們檢查一下 search console，當初登錄網站時，是否就是順手從瀏覽器直接複製網址，才會導致提交了 "blogspot.tw" 這樣的網址。

如果是的話，請重新登錄新的網站，使用 "blogspot.com" 網址，那麼所有的數據、索引、資訊，就會逐步正常了。

更多 Blogger 相關文章：

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

防止網頁圖片被下載的密技

July 1, 2018, 9:07 am

≫ Next: 讓圖片有放大鏡效果的 jQuery 外掛, 支援手機版﹍mlens

≪ Previous: Blogger 恢復網址後綴(.com)，可能導致 Google 網站管理員索引大幅下降(search console)

$

0

0

最近接到一個需求，由於案主網站的圖文常被中國網站、或農場網站盜取，所以希望能夠讓網頁上的圖片，不要那麼容易被下載。

當然我也跟案主說了，任何方法都不可能阻止圖片被取得，最簡單的按一下 Print Screen 鍵就拿走了，所以不如做好浮水印比較實在。

不過案主的出發點是，至少不要簡單的按右鍵就能另存圖片，這樣可以讓大部分的使用者覺得取得圖片很麻煩，就打消偷圖片的念頭。

以防盜的觀念來說，是這樣子沒錯，雖然不存在完全防盜的方法，但只要竊取的流程越麻煩，就越能防止盜圖事件。

那麼本篇就來說明，如何設計一個防止盜圖的流程，又能兼顧使用者體驗。

(圖片出處: pixabay.com)

一、防盜圖原理

1. 再次提醒

關於我對「防止下載圖片」這件事的態度，可參考「保護網頁著作權的初階構思__(2) 網頁篇」，是沒有非常鼓勵這麼做，因為與 "網路分享" 的前提抵觸。

雖然阻止了部分盜圖者，但同時也影響了網站正常讀者的權益，讓儲存圖片變得困難，所以站長們需要拿捏分寸。

低階盜圖者會拿不到圖，不過高階盜圖者一定寫得出對應的程式，所以這不是萬全之策。


2. 考慮使用者體驗

最簡單的防盜圖方法，是直接封鎖右鍵，但這會造成非常差的使用者體驗，為了圖片不給下載，現在連文字都無法複製，站長們要考慮是否流失的讀者更多，為網站帶來更多傷害。

而且更簡單的是，只要按照這篇「免安裝外掛, 直接破解網頁 "鎖右鍵+防複製" 的方法 (使用書籤)」，不用一秒鐘就破解了，所以我最不贊成用封鎖右鍵的方式。


3. 改用背景圖呈現

什麼圖片無法按右鍵下載呢？答案是背景圖片。

如果網頁上的每張圖，都使用背景圖片來呈現的話，那麼使用者按右鍵時，就會發現「怎麼沒有另存圖檔的選項？」

對網路環境熟悉的使用者，立刻會發現是怎麼回事，不過這招要應付多數的盜圖者是綽綽有餘了。


4. 讓替代圖片可下載

使用「3. 改用背景圖呈現」時，會讓一部份盜圖者產生戒心，改尋找其他破解法。那麼防盜圖的流程還可加進一招：「讓圖片可以下載，但卻下載到錯誤的圖片」。

這麼一來除了可以鬆懈戒心，也可以讓砍站、砍圖軟體這類工具，看起來變得滑稽。

二、展示圖片

以下這幾張圖可以試著下載看看，只能存成一張透明的 1x1 圖檔。

同時本篇的語法，會讓每張圖自動置中。

三、安裝語法

1. 準備動作

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

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

<script src='//ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js'></script>
可參考「引用 jQuery 的注意事項」，檢查範本是否已安裝過 jQuery，如果已經安裝過請刪除此行，以免重複安裝。


2. 安裝程式碼

如果對範本的程式碼熟悉，以下程式碼請放在「文章區塊」的後面。

如果不熟悉的話，只好放在範本底部，執行效率會比較差一些。在範本中搜尋 </body>這個字串，找到後在此字串的前一行，插入以下程式碼：

<!--圖片防下載-->
<script>
//<![CDATA[
(function() {
var $postBody = $(".post-body"), // 文章區塊的位置
blankGif = "https://1.bp.blogspot.com/-XEdTvNh8cUc/WzTMxnI_yvI/AAAAAAAAXQg/4z0M8e_Avoc6s31yMbdBL5YyKgxz4oRjwCLcBGAs/s1600/blank.gif"; // 替代圖片網址

$postBody.find("img").css("max-width","100%").wrap("<div></div>").on("load",function(){var d=$(this),b=this.width,a=this.height,e=d.attr("src"),c=d.parent();c.css({width:b,height:a,margin:"auto",background:"url('"+e+"')","background-size":"cover",position:"relative"});d.off("load").attr("src",blankGif).css({position:"absolute",width:"100%",height:"100%"})}).each(function(){var a=$(this);if(this.complete){a.trigger("load")}});
})();
//]]>
</script>
<!--Designed by WFU BLOG-->

• 紅色字串如果是 Blogger，一般就是文章區塊的位置，不必修改。
• 如果非 Blogger 官方範本、或其他平台的網站，請改為自己文章區塊的位置，例如將字串改為 "." + class 名稱、或是 "#" + id 名稱

四、會員加值內容

以下語法是提供給客戶使用的版本，圖片可自適應大小，程式碼經過優化，網頁處理效能較佳，因此放在不公開的會員加值內容，要先加入會員並需要點數才能兌換。

五、常見 FAQ

由於每個人的網站，文章區塊圖片的 CSS 可能都不一樣，所以本文的程式碼不一定能完全適用，請根據自己圖片的 CSS 進行調整。

Q1: 為何安裝完畢後，圖片顯示一片空白？

Ans: 圖片的 CSS 可能設定了「白色底色」，請將你的圖片底色 background 改為 transparent(透明)。

六、聯絡表單

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

更多「著作權保護」相關文章：

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

讓圖片有放大鏡效果的 jQuery 外掛, 支援手機版﹍mlens

July 8, 2018, 9:07 am

≫ Next: 釐清 Blogger「網站架設 / 客製功能 / 諮詢服務」的費用行情﹍無預算專區

≪ Previous: 防止網頁圖片被下載的密技

$

0

0

最近接到的需求是，希望滑鼠經過圖片時，能像使用放大鏡一樣，掃過的區域有放大的效果。

類似的功能還滿常見的，例如購物網站，需要展示產品的頁面，由於網頁的空間、寬度有限，圖片很難呈現局部細節。為了降低消費者的疑慮，有必要用放大鏡功能，讓小圖來呈現大圖的細部效果。

另外客戶也希望行動版有同樣效果，也就是網頁版的滑鼠 hover 效果，在行動版上需要支援 touch(碰觸) 效果。本篇要介紹的 jQuery 外掛 mlens 符合以上需求，也一併整理許多讓圖片有放大效果的相關外掛。

一、圖片放大相關外掛

1. Cloud Zoom

• Cloud Zoom 官網
• 非常有質感，效果非常棒的外掛
• 操作介面非常友善，例如滑鼠滾輪就能直接調整縮放比例。同時功能豐富齊全，也有詳細的 API 操作說明
• 可惜已經不是免費，但仍可索取測試版來用

2. Image Zoom

• Image Zoom 官網
• 各種 DEMO 效果頁面
• 效果不錯、功能也不少
• 可免費下載

3. 其他外掛

• 分享12款超棒的Javascript图片放大镜效果类库
• 30 Best Image Zoom jQuery Plugins Of 2017

二、mlens 官網

• mlens 官網

會介紹這個外掛，主要是因為功能沒有太多，就是單純放大鏡功能，所以檔案很小。但不錯的地方在於，仍有支援行動版 touch 功能。

另外官網展示頁面也值得介紹，如上圖，各種參數一目了然，直接修改後，按下「Apply changes」就能立刻看到效果。

下圖是範例效果，滑鼠移到圖片上方即可看到放大鏡效果：

三、安裝程式碼

1. 準備動作

以下程式碼請放在範本中 </head>之前：

<script src='//ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js'></script>
<!--mlens 圖片放大-->
<script>
//<![CDATA[
/*! jquery.mlens.js - magnifying lens jQuery plugin for images by Federica Sibella (@musings.it) - Double licensed MIT and GPLv3 */
!function(e){function t(e){if("string"==typeof e){var t=e.indexOf("_");-1!=t&&(e=e.substr(t+1))}return e}function i(e,t){if("string"==typeof e){var i=e.indexOf(t);if(-1!=i)return!0}return!1}var n=[],r=0,o={init:function(t){var o={lensShape:"square",lensSize:[100,100],borderSize:4,borderColor:"#888",borderRadius:0,imgSrc:"",imgSrc2x:"",lensCss:"",imgOverlay:"",overlayAdapt:!0,zoomLevel:1,responsive:!0},a=e.extend({},o,t),s="100px",d="100px";if(i(a.lensSize,",")){var u=a.lensSize.indexOf(","),l=[];l[0]=a.lensSize.substring(0,u),l[1]=a.lensSize.substring(u+1),a.lensSize=l}this.each(function(){var t=e(this),u=t.data("mlens"),l=e(),c=e(),g=e(),p=e(),h=t.attr("src"),m="auto";("number"!=typeof a.zoomLevel||a.zoomLevel<=0)&&(a.zoomLevel=o.zoomLevel);var v=new Image;""!==a.imgSrc2x&&window.devicePixelRatio>1?(h=a.imgSrc2x,v.onload=function(){m=String(parseInt(this.width/2)*a.zoomLevel)+"px",l.css({backgroundSize:m+" auto"}),p.css({width:m})},v.src=h):(""!==a.imgSrc&&(h=a.imgSrc),v.onload=function(){m=String(parseInt(this.width)*a.zoomLevel)+"px",l.css({backgroundSize:m+" auto"}),p.css({width:m})},v.src=h),jQuery.isArray(a.lensSize)===!0?(s=i(a.lensSize[0],"%")||i(a.lensSize[0],"px")?String(a.lensSize[0]):String(a.lensSize[0])+"px",d=i(a.lensSize[1],"%")||i(a.lensSize[1],"px")?String(a.lensSize[1]):String(a.lensSize[1])+"px"):(s=i(a.lensSize,"%")||i(a.lensSize,"px")?String(a.lensSize):String(a.lensSize)+"px",d=s);var f="background-position: 0px 0px;width: "+s+";height: "+d+";float: left;display: none;border: "+String(a.borderSize)+"px solid "+a.borderColor+";background-repeat: no-repeat;position: absolute;",S="position: absolute; width: 100%; height: 100%; left: 0; top: 0; background-position: center center; background-repeat: no-repeat; z-index: 1;";switch(a.overlayAdapt===!0&&(S+="background-position: center center fixed; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover;"),a.lensShape){case"square":f=f+"border-radius:"+String(a.borderRadius)+"px;",S=S+"border-radius:"+String(a.borderRadius)+"px;";break;case"":f=f+"border-radius:"+String(a.borderRadius)+"px;",S=S+"border-radius:"+String(a.borderRadius)+"px;";break;case"circle":f+="border-radius: 50%;",S+="border-radius: 50%;";break;default:f=f+"border-radius:"+String(a.borderRadius)+"px;",S=S+"border-radius:"+String(a.borderRadius)+"px;"}return t.wrap("<div id='mlens_wrapper_"+r+"' />"),g=t.parent(),a.responsive===!0?t.css({width:"100%"}):g.css({width:t.width()}),l=e("<div id='mlens_target_"+r+"' style='"+f+"' class='"+a.lensCss+"'>&nbsp;</div>").appendTo(g),l.css({backgroundImage:"url('"+h+"')",backgroundSize:m+" auto",cursor:"none"}),p=e("<img style='display:none;width:"+m+";height:auto;max-width:none;max-height;none;' src='"+h+"' />").appendTo(g),""!==a.imgOverlay&&(c=e("<div id='mlens_overlay_"+r+"' style='"+S+"'>&nbsp;</div>"),c.css({backgroundImage:"url('"+a.imgOverlay+"')",cursor:"none"}),c.appendTo(l)),t.attr("data-id","mlens_"+r),l.mousemove(function(i){e.fn.mlens("move",t.attr("data-id"),i)}),t.mousemove(function(i){e.fn.mlens("move",t.attr("data-id"),i)}),l.on("touchmove",function(i){i.preventDefault();var n=i.originalEvent.touches[0]||i.originalEvent.changedTouches[0];e.fn.mlens("move",t.attr("data-id"),n)}),t.on("touchmove",function(i){i.preventDefault();var n=i.originalEvent.touches[0]||i.originalEvent.changedTouches[0];e.fn.mlens("move",t.attr("data-id"),n)}),l.hover(function(){e(this).show()},function(){e(this).hide()}),t.hover(function(){l.show()},function(){l.hide()}),l.on("touchstart",function(t){t.preventDefault(),e(this).show()}),l.on("touchend",function(t){t.preventDefault(),e(this).hide()}),t.on("touchstart",function(e){e.preventDefault(),l.show()}),t.on("touchend",function(e){e.preventDefault(),l.hide()}),t.data("mlens",{image:t,settings:a,target:l,imageTag:p,imgSrc:h,imgWidth:m,imageWrapper:g,overlay:c,instance:r,lensSizeHoriz:s,lensSizeVert:d}),u=t.data("mlens"),n[r]=u,r++,n})},move:function(e,i){e=t(e);var r=n[e],o=r.image,a=r.target,s=r.imageTag,d=o.offset(),u=parseInt(i.pageX-d.left),l=parseInt(i.pageY-d.top),c=s.width()/o.width(),g=s.height()/o.height();return u>0&&l>0&&u<o.width()&&l<o.height()&&(u=String(-((i.pageX-d.left)*c-a.width()/2)),l=String(-((i.pageY-d.top)*g-a.height()/2)),a.css({backgroundPosition:u+"px "+l+"px"}),u=String(i.pageX-d.left-a.width()/2),l=String(i.pageY-d.top-a.height()/2),a.css({left:u+"px",top:l+"px"})),r.target=a,n[e]=r,n},update:function(t){e(this).mlens("destroy"),e(this).mlens("init",t)},destroy:function(){var i=t(e(this).attr("data-id")),r=n[i];r.target.remove(),r.imageTag.remove(),r.image.unwrap(),r.overlay.remove(),e.removeData(r,"mlens"),this.unbind(),this.element=null}};e.fn.mlens=function(t){return o[t]?o[t].apply(this,Array.prototype.slice.call(arguments,1)):"object"!=typeof t&&t?void e.error("Method "+t+" does not exist on jQuery.mlens"):o.init.apply(this,arguments)}}(jQuery);
//]]>
</script>
第 1 行綠字可參考「引用 jQuery 的注意事項」，檢查範本是否已安裝過 jQuery，如果已經安裝過請刪除此行，以免重複安裝。


2. 圖片設定

要產生圖片放大效果的圖片，HTML 碼請進行以下設定：

<img class="zoom" src="小圖網址" data-big="大圖網址"/>

• 如果原圖尺寸夠大的話，那麼兩個圖片網址都填一樣也沒關係。
• 要有放大效果的圖片，必須加上 class="zoom"

3. 執行程式碼

以下程式碼請放在範本中 </body>的前一行：

<!--mlens 設定-->
<script>
//<![CDATA[
$(".zoom").each(function() {
var $this = $(this);
$this.mlens({
imgSrc: $this.attr("data-big"),
lensShape: "circle", // 放大鏡形狀 circle(圓形), square(方形)
lensSize: ["20%", "30%"], // 放大鏡長寬 (可使用 px 或百分比 %)
borderSize: 3, // 放大鏡邊框寬度 (px)
borderColor: "#fff", // 放大鏡邊框顏色色碼
borderRadius: 0, // 如果放大鏡為方形 設定圓角程度
overlayAdapt: true,
zoomLevel: 1,
responsive: true // 圖片是否自適應
});
}).parent().css("position", "relative");
//]]>
</script>
由於這個外掛在某些模版可能會產生衝突，所以上面的安裝程式碼與官網不同：

• 我已修正官方 code 會衝突的問題
• 簡化參數，需要完整參數請參閱官網
• 所有修改參數請參照註解說明修改即可

放大鏡的效果大致如下：

更多 jQuery 外掛：

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

釐清 Blogger「網站架設 / 客製功能 / 諮詢服務」的費用行情﹍無預算專區

July 9, 2018, 5:32 am

≫ Next: Blogger 自製「精選文章」小工具﹍圖片版

≪ Previous: 讓圖片有放大鏡效果的 jQuery 外掛, 支援手機版﹍mlens

$

0

0

看到 FB 網友貼的「沒預算方案」，雖然是嘲諷的意味居多，但不可否認的，「無預算」族群的比例很高，本站也遇過非常多案例。

網站架設或相關事務是高度客製化的產品，就像房屋裝潢、手工家具一樣，無法經工廠機器大量生產，費用只能看客戶要做到什麼程度而定，與客戶的預算有高度相關。

當購買「客製產品 / 服務」，卻又說不出預算時，大概可分兩種情況：

• 只是來要報價，再拿來跟其他同行殺價、比價，可參考「接案經驗談：不斷要你報價，以及提出極低預算的業主」
• 對這個產業真的不了解，或沒時間做功課，或做了功課仍然無法理解。

那麼本篇就針對，不清楚 Blogger 架站預算該怎麼拿捏的案主，提供一些參考的依據，可建構起初步的概念。

(圖片出處: pixabay.com)

一、網頁設計相關行情

1. 大略行情

其實說要做功課也相當簡單，直接 Google 關鍵字 "網頁設計 行情" 就有數不清的相關文章、費用數據可以參考。

但對於不那麼內行的案主，說簡單也超不簡單，例如這篇：

• 網頁設計 費用行情

整理地真的是非常詳細，但是資訊量爆多，若看不懂很正常。我若把自己當成一張白紙，說實在這網頁看完一定也是霧撒撒，為什麼架站有的價格可以低到 5k，也可以高到幾十萬？


2. 價格差異

如果覺得上一個連結資訊量太大，可以只掃一下對某幾個數字有印象就好。

接著這個討論串，對於釐清數字差異會有比較大的幫助：

• 詢問網頁設計的費用??

需要讓 Blogger 案主瞭解的部分是，Blogger 不需要 "主機"、"流量"、"圖床" 等固定支出(一年好幾千元)，也不需要防駭客，有世界最頂尖的 Google 當後盾。

所以任何費用幾乎都是一次性的支出，沒有常態性費用。

二、無預算專區

相信以上看完，案主們對「網頁設計 / 架站」的費用會稍微有概念。那麼如果有可能發案給本站時，以下再提供一些資訊可建立抓預算的概念。

1. Blogger 架站

• 只有網頁版：
  • 套版：5k ~ 10k
  • 未套版：8k ~ 15k
• 只有行動版：5k ~ 10k
• 套版 RWD 網站(網頁 + 行動)：5k ~ 15k

以上不含網頁設計費用，客戶需自行提供版面示意圖，參考數字乃根據經驗的平均值，實際費用得依照案件需求明細而定。


2. 網頁設計

如需要設計師提供「網頁設計」的服務，參考費用為 20k ~ 30k，實際費用依照案件需求明細而定。


3. Blogger 客製功能

如非架設網站案件，而是需要客製功能、寫客製程式：

• 即使是非常簡單的客製程式：1.5k ↑
• 完整功能的客製程式：5k ↑(例如「樹狀標籤」)
• 大型客製程式：10k ↑

4. Blogger 諮詢 / 維護

• 諮詢一個問題：0.5 k ↑(因此請好好構思您的問題)
• 網站維護：0.5 ~ 1k ↑

所謂的「網站維護」是指，網站發生的各種小問題，需要 WFU 到後台勘查是什麼狀況，並解決問題。

以上數字供參考，實際仍以花費時間多寡而定。

三、為何案主需要學會抓預算

1. 有預算可以加速處理流程

如果有辦法很詳細的提供需求明細，例如網站的哪個地方的版面要如何安排、使用什麼功能、出現什麼效果(提供範例網頁)，全部列的很清楚，那麼是可以進行估價的。

但事實上案主幾乎都是第一次架站，因為沒做過這件事，所以大部分都不知道如何清楚地表達自己的需求。雖然本站也會提供一些需求文件的範例，但仍有部分案主很難做出完整的需求文件(也需要一些電腦操作技巧)。

在無法提供需求文件的情況下，又想要本站提供報價，這樣的案件說實在也很難有什麼進展。

要能成案的話，比較快速、有效的溝通處理方式會是這樣：

• 請案主參考本文提到的相關文章，替自己的網站抓出大致的預算出來。
• 根據案主的預算，我會建議合適的處理方式。
• 同時預算夠的話，我會協助引導案主確認出網站所有的需求、條列出所有要修改的細節。
• 當需求超出預算的時候，我會建議可行的替代方案，看案主能否接受
• 如替代方案無法接受，案主再考慮是否提高預算

2. 無預算就要提供需求明細

所以本篇的結論很簡單：

• 如果沒辦法告知預算，就請提供詳細的需求明細文件，再進行估價。
• 如果想要快速成案，就請告知預算，會協助釐清需求。

四、注意事項

• 本篇提供的「Blogger 無預算專區」，僅供本站讀者參考。
• 架站的平台不一樣，所以跟其他案例比價沒有意義。
• 也不要拿其他網站的報價來跟本站比價、殺價，若覺得其他業者比較好那麼請另尋高明就好。
• 每間公司提供的服務，要養的員工數、租金水電成本都不一樣，需要的利潤也不同，客製案件沒有什麼行情價可言。
• 就像要客製一張木椅，每個木工師傅的年資、經驗都不同，製作一張尺寸、樣式獨一無二的椅子，哪來固定的行情價呢。
• 「誠信」、「專業」才是需要比較的項目
• 學習設定 "預算"，找到符合預算的師傅比較有意義。

網站服務項目：

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

Blogger 自製「精選文章」小工具﹍圖片版

July 16, 2018, 9:07 am

≫ Next: 讓 Blogger 官方 RWD 範本側邊欄小工具能預設展開

≪ Previous: 釐清 Blogger「網站架設 / 客製功能 / 諮詢服務」的費用行情﹍無預算專區

$

0

0

Blogger 官方幾年前推出「精選文章」小工具，我認為這個功能非常有必要性，因為跟側邊欄的「熱門文章」、「最新文章」工具一樣，都具有維持訪客注意力、減少跳出率的用途。

不過本質上，「精選文章」還是有所不同：

• 「熱門文章」顯示的文章無法由自己決定，熱門程度是由訪客決定。
• 「最新文章」容易良莠不齊，不太可能每篇文章都很吸睛。
• 「精選文章」是親自精挑細選過的文章，在某種程度上會比「熱門文章」實用。

但是官方推出的這個「精選文章」工具，WFU 卻從來沒有想要安裝，因為覺得很不實用，只能顯示一篇文章而已。

如果可以顯示自訂數量的精選文章，宣傳效果不是更好嗎？

點此看範例網頁

(圖片出處: pixabay.com)

一、「精選文章」的必要性

雖然本站的主題是 Blogger，不過熱門文章前十名只有一篇與 Blogger 主題相關，這也會造成搜尋長尾關鍵字而來的主要讀者，對網站有興趣而想多閱讀一些熱門、看板文章時，卻找不到幾篇 Blogger 相關文章。

某種程度上這也算是相當無奈的現象，然而熱門文章的排行不是自己能決定的。比較好的作法是，親自挑選幾篇文章放在側邊欄，相信經由這些「精選文章」，可以更快讓讀者認識自己的網站。

那麼本篇將會改造「精選文章」工具：

• 可以指定顯示的文章數
• 可以指定列出某標籤的文章
• 例如將所有要出現在「精選文章」工具的文章，設定某個標籤名稱即可

側邊欄版面效果大致如下：

二、安裝程式碼

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

1. <div id="collection_img"></div>
2.  
3. <script src='//ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js'></script>
4. <script>
5. (function() {
6. var label = "精選文章", // 填入精選文章使用的標籤名稱
7. total = 5, // 顯示最新的幾篇文章
8. noImage = "https://3.bp.blogspot.com/-4JBpCsqL6a4/Vh3ciHoReQI/AAAAAAAAMq8/WMHCDhvnj4M/s1600/wfublog-post.jpg", // 無縮圖的預設圖片
9. width = 400, // 圖片寬度
10. ratio = 0.6, // 縮圖長寬比例
11. feedUrl = "/feeds/posts/summary/-/" + label + "?max-results=" + total + "&alt=json-in-script&callback=?";
12.  
13. $.getJSON(feedUrl,function(a){showPost(a)});function showPost(json){var entries=json.feed.entry,html="",i,j,l,entry,title,link,url,img;var _0x29da=["\x39\x28\x69\x20\x31\x38\x20\x6F\x29\x7B\x32\x3D\x6F\x5B\x69\x5D\x3B\x36\x3D\x32\x2E\x36\x2E\x24\x74\x3B\x34\x3D\x32\x2E\x70\x24\x72\x3F\x32\x2E\x70\x24\x72\x2E\x37\x3A\x4A\x3B\x34\x3D\x34\x2E\x64\x28\x2F\x46\x2D\x63\x2F\x2C\x22\x77\x22\x2B\x67\x2B\x22\x2D\x68\x22\x2B\x42\x28\x67\x2A\x7A\x29\x2B\x22\x2D\x6E\x22\x29\x2E\x64\x28\x22\x50\x3A\x22\x2C\x22\x71\x3A\x22\x29\x3B\x35\x3D\x32\x2E\x35\x3B\x6C\x3D\x32\x2E\x35\x2E\x75\x3B\x39\x28\x6A\x3D\x30\x3B\x6A\x3C\x6C\x3B\x6A\x2B\x2B\x29\x7B\x76\x28\x35\x5B\x6A\x5D\x2E\x78\x3D\x3D\x22\x79\x22\x29\x7B\x37\x3D\x35\x5B\x6A\x5D\x2E\x38\x3B\x41\x7D\x7D\x31\x2B\x3D\x22\x3C\x33\x20\x66\x3D\x27\x43\x27\x3E\x22\x3B\x31\x2B\x3D\x22\x3C\x61\x20\x38\x3D\x27\x22\x2B\x37\x2B\x22\x27\x3E\x22\x3B\x31\x2B\x3D\x22\x3C\x34\x20\x44\x3D\x27\x22\x2B\x34\x2B\x22\x27\x2F\x3E\x22\x3B\x31\x2B\x3D\x22\x3C\x2F\x61\x3E\x22\x3B\x31\x2B\x3D\x22\x3C\x33\x20\x66\x3D\x27\x45\x27\x3E\x22\x3B\x31\x2B\x3D\x22\x3C\x61\x20\x38\x3D\x27\x22\x2B\x37\x2B\x22\x27\x3E\x22\x2B\x36\x2B\x22\x3C\x2F\x61\x3E\x3C\x2F\x33\x3E\x22\x3B\x31\x2B\x3D\x22\x3C\x2F\x33\x3E\x22\x7D\x31\x2B\x3D\x22\x3C\x33\x20\x65\x3D\x27\x47\x2D\x48\x3A\x20\x49\x3B\x62\x2D\x4B\x3A\x4C\x3B\x27\x3E\x3C\x61\x20\x38\x3D\x27\x71\x3A\x2F\x2F\x4D\x2E\x4E\x2E\x4F\x2F\x73\x2F\x51\x2F\x52\x2D\x53\x2D\x54\x2D\x55\x2E\x31\x27\x20\x56\x3D\x27\x57\x27\x20\x65\x3D\x27\x62\x2D\x58\x3A\x20\x59\x3B\x20\x5A\x3A\x20\x23\x31\x30\x3B\x20\x6D\x2D\x31\x31\x3A\x20\x31\x32\x2C\x20\x31\x33\x2C\x20\x31\x34\x2D\x31\x35\x3B\x20\x6D\x2D\x31\x36\x3A\x20\x31\x37\x3B\x27\x20\x36\x3D\x27\x6B\x20\u7CBE\u9078\u6587\u7AE0\x5C\x6E\u7A0B\u5F0F\u8A2D\u8A08\uFF1A\x31\x39\x20\x31\x61\x27\x3E\u24E6\x20\x6B\x20\x31\x62\x3C\x2F\x61\x3E\x3C\x2F\x33\x3E\x22\x3B\x24\x28\x22\x23\x31\x63\x22\x29\x2E\x31\x28\x31\x29\x3B","\x7C","\x73\x70\x6C\x69\x74","\x7C\x68\x74\x6D\x6C\x7C\x65\x6E\x74\x72\x79\x7C\x64\x69\x76\x7C\x69\x6D\x67\x7C\x6C\x69\x6E\x6B\x7C\x74\x69\x74\x6C\x65\x7C\x75\x72\x6C\x7C\x68\x72\x65\x66\x7C\x66\x6F\x72\x7C\x7C\x74\x65\x78\x74\x7C\x7C\x72\x65\x70\x6C\x61\x63\x65\x7C\x73\x74\x79\x6C\x65\x7C\x63\x6C\x61\x73\x73\x7C\x77\x69\x64\x74\x68\x7C\x7C\x7C\x7C\x42\x6C\x6F\x67\x67\x65\x72\x7C\x7C\x66\x6F\x6E\x74\x7C\x7C\x65\x6E\x74\x72\x69\x65\x73\x7C\x6D\x65\x64\x69\x61\x7C\x68\x74\x74\x70\x73\x7C\x74\x68\x75\x6D\x62\x6E\x61\x69\x6C\x7C\x32\x30\x31\x38\x7C\x7C\x6C\x65\x6E\x67\x74\x68\x7C\x69\x66\x7C\x7C\x72\x65\x6C\x7C\x61\x6C\x74\x65\x72\x6E\x61\x74\x65\x7C\x72\x61\x74\x69\x6F\x7C\x62\x72\x65\x61\x6B\x7C\x70\x61\x72\x73\x65\x49\x6E\x74\x7C\x69\x74\x65\x6D\x7C\x73\x72\x63\x7C\x70\x6F\x73\x74\x5F\x74\x69\x74\x6C\x65\x7C\x73\x37\x32\x7C\x6D\x61\x72\x67\x69\x6E\x7C\x74\x6F\x70\x7C\x35\x70\x78\x7C\x6E\x6F\x49\x6D\x61\x67\x65\x7C\x61\x6C\x69\x67\x6E\x7C\x72\x69\x67\x68\x74\x7C\x77\x77\x77\x7C\x77\x66\x75\x62\x6C\x6F\x67\x7C\x63\x6F\x6D\x7C\x68\x74\x74\x70\x7C\x30\x37\x7C\x62\x6C\x6F\x67\x67\x65\x72\x7C\x63\x6F\x6C\x6C\x65\x63\x74\x69\x6F\x6E\x7C\x69\x6D\x61\x67\x65\x7C\x76\x65\x72\x73\x69\x6F\x6E\x7C\x74\x61\x72\x67\x65\x74\x7C\x5F\x62\x6C\x61\x6E\x6B\x7C\x64\x65\x63\x6F\x72\x61\x74\x69\x6F\x6E\x7C\x6E\x6F\x6E\x65\x7C\x63\x6F\x6C\x6F\x72\x7C\x63\x63\x63\x7C\x66\x61\x6D\x69\x6C\x79\x7C\x68\x65\x6C\x76\x65\x74\x69\x63\x61\x7C\x61\x72\x69\x61\x6C\x7C\x73\x61\x6E\x73\x7C\x73\x65\x72\x69\x66\x7C\x73\x69\x7A\x65\x7C\x31\x31\x70\x78\x7C\x69\x6E\x7C\x57\x46\x55\x7C\x42\x4C\x4F\x47\x7C\x43\x6F\x6C\x6C\x65\x63\x74\x69\x6F\x6E\x7C\x63\x6F\x6C\x6C\x65\x63\x74\x69\x6F\x6E\x5F\x69\x6D\x67","","\x66\x72\x6F\x6D\x43\x68\x61\x72\x43\x6F\x64\x65","\x72\x65\x70\x6C\x61\x63\x65","\x5C\x77\x2B","\x5C\x62","\x67"];eval(function(_0x86f1x1,_0x86f1x2,_0x86f1x3,_0x86f1x4,_0x86f1x5,_0x86f1x6){_0x86f1x5=function(_0x86f1x3){return(_0x86f1x3<_0x86f1x2?_0x29da[4]:_0x86f1x5(parseInt(_0x86f1x3/_0x86f1x2)))+((_0x86f1x3=_0x86f1x3%_0x86f1x2)>35?String[_0x29da[5]](_0x86f1x3+29):_0x86f1x3.toString(36))};if(!_0x29da[4][_0x29da[6]](/^/,String)){while(_0x86f1x3--){_0x86f1x6[_0x86f1x5(_0x86f1x3)]=_0x86f1x4[_0x86f1x3]||_0x86f1x5(_0x86f1x3)}_0x86f1x4=[function(_0x86f1x5){return _0x86f1x6[_0x86f1x5]}];_0x86f1x5=function(){return _0x29da[7]};_0x86f1x3=1}while(_0x86f1x3--){if(_0x86f1x4[_0x86f1x3]){_0x86f1x1=_0x86f1x1[_0x29da[6]](new RegExp(_0x29da[8]+_0x86f1x5(_0x86f1x3)+_0x29da[8],_0x29da[9]),_0x86f1x4[_0x86f1x3])}}return _0x86f1x1}(_0x29da[0],62,75,_0x29da[3][_0x29da[2]](_0x29da[1]),0,{}))};
14. })();
15. </script>
16.  
17. <style>
18. #collection_img .item { margin-bottom: 15px; }
19. #collection_img img { width: 100%; height: auto; object-fit: cover; }
20. #collection_img .post_title a { text-decoration: none; font-size: 16px; }
21. </style>

以下修改請參照以上行號：

• C：可參考「引用 jQuery 的注意事項」，檢查範本是否已安裝過 jQuery，如果已經安裝過請刪除此行，以免重複安裝。
• F：紅字請改為要篩選文章的標籤名稱
• G：可修改要顯示的文章數
• H：可修改預設圖片
• I：如果側邊欄寬度沒有大於 400px 的話，可不用改本行數值
• J：修改縮圖的長寬比例
• R~T：如果熟悉 CSS，可自行修改參數

儲存後即可看到效果，也可先看以下 DEMO 頁面的效果：

點此看範例網頁

三、注意事項

以下是幾點補充：

• 可額外設定一個標籤名稱，例如 "精選文章"，專門用來顯示此工具的文章。
• 將所有要顯示在此工具的文章，都新增這個標籤。
• 將來某篇文章不想出現在此工具時，移除這個標籤即可。
• 想調整文章的顯示順序，可修改文章的發佈日期。
• 此工具會從日期較近的文章開始顯示。

更多 Blogger 小工具：

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