讓訪客能自行放大網頁文字,提升友善閱讀體驗

閱讀網路文章時,不免會遇到某些網頁的預設文字過小,不但看起來不舒服,也加重了眼睛的負擔。過去曾介紹過 Chrome 的外掛「 讓 Chrome 只放大縮小文字(Zoom Text Only 套件) 」,可以單獨調整文字的大小,讓我們閱讀文章時更舒服。 但並非每個訪客都會安裝...

繼續閱讀全文

如何使用 Google reCAPTCHA 防止網頁被留垃圾廣告訊息

前陣子「 Blogger 中文論壇 」遭到垃圾訊息洗版,被機器人大量貼文,一次發了幾十篇,甚至有一次達到上百篇。雖說也不會造成太大困擾,因為 Blogger 後台一次能勾選 50 篇文章刪除,不用幾秒就全部消滅了,不過能夠事先預防總是比較省事。 於是想到 Google 的這...

繼續閱讀全文

將 Google 行事曆排程顯示在網頁﹍FullCalendar CDN 安裝懶人包

過去一段時間,網站業務的排程經常處於吃緊的狀態,於是決定好好利用「 Google Calendar 」,把行事曆的排程顯示在網頁上,業主可查詢案件何時能進入排程、以及案件的時程區間。 基本上,Google 日曆預設就有提供嵌入網頁的語法,如果是功能取向的站長,不一定需要另外...

繼續閱讀全文

[網頁設計] 有助於色盲使用者的友善體驗 (2)實作範例

上一篇「 有助於色盲使用者的友善體驗 (1)設計構思 」,提出本站的設計方針為: 原本文章區塊為黃底黑字,另一套 CSS 將會使用白底黑字,用來增加對比。 原本文章區塊的連結無底線,另一套 CSS 將會使用底線。 本站文章常用紅字標示重點,同時教學程式碼中包含了大量的紅...

繼續閱讀全文

[網頁設計] 有助於色盲使用者的友善體驗 (1)設計構思

前陣子有讀者在「 Blogger 文章標題最佳化 」留言表示:"建議WFU大,文章的字顏色對比可以強一點,或標個線?這樣對色弱色盲人土比較友善,我完全找不到紅字在哪"。這才發現過去接觸網頁設計的主題時,很少碰到這一塊,因此沒想過要研究這部分的設計。 經查...

繼續閱讀全文

Blogger 使用圖片的各種技巧:上傳+刪除+管理+取得網址 (Picasa 圖床)

協助許多使用者架站時,由於不少都是剛接觸 Blogger,不太熟悉這個部落格平台怎麼處理、操作圖片。他們可能用過台灣其他的免費部落格平台,習慣了有個可以專門上傳、管理圖片的後台介面,但在 Blogger 找不到這樣的東西,因此「Blogger 要如何上傳、管理圖片」,變成了常見...

繼續閱讀全文

使用 Blogger 免費範本(模版),可能需要面對的問題有哪些?

使用 Blogger 的優點之一,就是有取之不盡的免費資源,網路上可找到各種美觀、符合自適應(RWD)、且又免費的範本可套用。 免費範本的確很方便,一陣子後覺得不合用、或想改個新鮮的版面,都可再另外找一個,如同免洗筷一般,再換一雙就好。 但在某種程度上,免費範本跟免洗筷...

繼續閱讀全文

部落格如何處理「結構化資料」標記 + 修復錯誤訊息

關心 SEO 的站長,可能會研究「結構化資料標記」這個主題,而且使用「 結構化資料測試工具 」時,會發現不少錯誤訊息。由於不少讀者都曾問過這件事,因此本篇來做個整理。 不過為了節省讀者時間,先說結論:「 部落格網站基本上忽略這件事也沒有大礙 」。 「結構化資料標記」最主...

繼續閱讀全文

讓標題過長的多行文字自動省略﹍跨瀏覽器 CSS 技巧

之前寫過「 讓標題過長的文字自動省略﹍單行 CSS 技巧 」,用來處理單行標題過長的問題。不過最近處理多個網站時,剛好都是旅遊美食類型,文章標題比起一般部落格會長上許多。 在特殊版型下(例如區塊寬度不夠),文章標題使用單行省略文字的方式,不容易辨識主題意涵,會導致點擊率下降...

繼續閱讀全文

Line 處理待辦事項的技巧:讓已讀訊息保持未讀狀態

Line 已經越來越像傳統 Email 扮演的角色,以往收件匣未讀的信件就是我們的待辦事項,但現在越來越多待辦事項,會來自於 Line 的訊息,無論是上司、客戶、家人朋友,或是一大堆的群組。 但很可惜 Line 的訊息系統,無法像郵件軟體 (或 APP) 般好整理,除了不...

繼續閱讀全文

利用 Google 試算表當小型資料庫 (4)使用 SQL 語法讓搜尋功能更強大

「利用 Google 試算表當小型資料庫」系列文已經寫過三篇,條列如下: (1)製作資料庫 (2)讀取、儲存資料庫 (3)簡易查詢與排序 (及新版試算表讀取流程) 上一篇提供了篩選資料的簡易查詢語法,以及對資料排序的方法,相信這對小型的資料庫處理已經足夠。 不過...

繼續閱讀全文

讓 Facebook 留言框與粉絲團的留言能夠即時同步

前陣子有案主詢問,「看到有些 FB 粉絲專頁的留言,會自動同步到部落格文章的 FB 留言板,這個可以做嗎?」 如果不瞭解以上描述是什麼狀況的話,用畫面說明比較容易懂,例如下圖是「 粉絲團頁面的留言 」: 下圖是「 部落格如何處理結構化資料標記 」這篇文章的 FB...

繼續閱讀全文

Blogger 自製真正的站內搜尋小工具﹍以日期排列

前陣子接到一個需求,希望 Blogger 搜尋結果能以日期排列。這個要求乍聽之下不太瞭解用意,一般來說,搜尋結果會依照 "關聯性" 來排列,對訪客而言,應該會希望越相關的文章,排越前面才對啊? 不過由於案主是人氣很高的美食旅遊部落格,文章數量很多,她表示...

繼續閱讀全文

Blogger 相關文章 V4﹍行動版專用

不少讀者都詢問過「 相關文章 V2 (含縮圖功能) 」能否裝在手機版,實際上如果真的這麼做的話,一定馬上就破版,因為行動裝置有著各種不一樣的螢幕寬度,加上直立、橫躺的操作,各種專為行動版而設計的工具一定要符合 RWD 才行。 除此之外,V2 的版面也不適合做成 RWD,如果...

繼續閱讀全文

申請 Facebook 應用程式 APP ID 流程

FB 有些網頁 (部落格) 小工具在安裝或使用時,需要申請 APP ID 才能生效,這個流程不但有些麻煩,而且 FB 的網頁介面常常更改,不熟悉電腦操作的使用者可能會感到很頭痛。 有時我需要協助處理 FB 應用程式的相關事務,但會卡在 APP ID 的申請,因為這部分需要...

繼續閱讀全文

專業又有質感的網頁文章註解外掛 BigFoot﹍CDN 安裝懶人包

前陣子有案主需要將文章中的註腳功能,結合資料庫進行管理,也就是讓多處重複的註解,可以直接從試算表讀取,而不必一筆筆註釋。 因為這個案子而接觸到這個文章註腳外掛「 BigFoot 」,測試之後覺得效果跟質感都很好,比之前在「 jQuery 展開收合效果安裝懶人包 」介紹的另一...

繼續閱讀全文

痞客邦搬家到 Blogger 後,SEO 問題要如何解決?

前陣子有位從痞客邦搬到 Blogger 的讀者,尋求 SEO 方面的協助。她表示「我計畫將主站從痞客邦搬到 Blogger,但遇到一個難解的問題,在 Blogger 發表的文章經常無法搜尋到,即使該文瀏覽數達數萬,可否提供專業協助?」 其實剛搬家的站長都可能遇到這個現象,在...

繼續閱讀全文

Google AMP 技術,號稱讓行動版網頁秒開,不過我的觀察心得有不同看法

前陣子讀者詢問如何在 Blogger 網站使用「 Google AMP 」技術,剛好免費資源網路社群發佈了這篇「 在 WordPress 網站使用 Google AMP 技術,提升頁面開啟速度教學 」,因此對這項技術也滿好奇的,便來瞭解一下詳情。 在手機測試使用 Googl...

繼續閱讀全文

Chrome 更新後, 無法正常開啟網頁的有效治本方法

似乎近年來 Chrome 更新版本後,出包的機率還滿大的。過去曾發生更新後,造成中文輸入法有問題;今年初的更新則是造成「 Chrome 會自動重新讀取分頁內容 」。 最近更新到 v54 版後,除了網頁、書籤列整個變大外,主要問題是三不五時就無法正常打開網頁,需要連續開第二...

繼續閱讀全文

對抗 Blogger 垃圾留言全紀錄

雖然本站沒有限制 Blogger 帳號才能留言、沒使用字詞驗證,不過也不太擔心垃圾留言,因為我會 "手動標示" 垃圾留言,讓 Blogger 過濾系統好好學習判斷模式。因此現在若遇到一般的色情廣告留言,基本上都會被系統直接判定為垃圾留言,不太需要操心。 ...

繼續閱讀全文

是否痞客邦、WordPress 的 SEO 比 Blogger 好,有這樣的事嗎?

許多站長在架站、或搬家前,很關心的一件事就是 SEO,想瞭解這個部落格平台的文章容不容易被搜尋到。四處打聽的結果,可能會接收到「痞客邦的 SEO 比較好」、或「WordPress 的文章比較容易搜尋到」這樣的訊息。那麼,由於 Blogger 在台灣的使用者本來就少,原本屬意在 ...

繼續閱讀全文

為 UL LI 項目清單輕鬆加入圖示的各種 CSS 技巧﹍使用 Unicode + Font Awesome 字型

前陣子接到一個需求,希望在所有 UL LI 項目(列表)清單之前,插入一個小圖示。而且這個圖示,需要將來可以很方便地自行替換。 假如網頁的 UL LI 項目早已做好,那麼一個個手動加入 IMG 標籤的圖片,不但很麻煩,日後也不方便維護(更換圖示)。 其實這件事使用 CS...

繼續閱讀全文

稍後閱讀,各種推送到 Kindle 的技巧整理﹍Chrome 網頁圖文 + Evernote 記事 + RSS 閱讀器

最近使用多年的 Kindle DX 9.7" 功成身退,買了兩個月前剛出的 Kindle 8,雖然螢幕小很多(只有 6"),不過最重要的是有了 Wifi 功能,不必再依靠會降低使用意願的 USB 傳輸線。 為了保護眼睛、減少看背光螢幕(包含行動裝置)的時...

繼續閱讀全文

過場效果華麗的 jQuery 圖片輪播外掛 Camera﹍CDN 安裝懶人包

之前曾介紹「 Camera 圖片輪播外掛安裝及使用詳解 」,他值得推薦的特色不少,除了多樣的炫麗過場特效,幾乎各種想得到的效果都能自訂,更重要的是支援 "自適應" 寬度,這在行動裝置是非常重要的。 可惜的是這個外掛不容易安裝, 需要支援目錄式的網路空間 ...

繼續閱讀全文

接案經驗談:不斷要你報價,以及提出極低預算的業主

前陣子有個案主想製作 Blogger 網站,討論了滿長的時間,但最終提出來的預算十足讓我錯愕。 其實預算不足的案主所在多有,拋一兩句來詢價的也不少,但這次的案例,特殊在一開始規格拉得很高,但一直提不出預算、沒有明確需求、不斷要求報價,導致花了不少溝通時間,結果最後拋出的是 ...

繼續閱讀全文

讓 Facebook 首頁動態只出現「搶先看」貼文

這個工具是依據我個人使用 FB 習慣所製作的,不一定適合每個人,如果剛好你的使用模式跟 WFU 類似的話,那麼可以嘗試看看。 FB 目前首頁動態的貼文內容,如果花點時間與耐心來設定的話,是完全可以只出現指定追蹤對象的動態。 不過有的時候,或許你會希望有更多的彈性,例如時...

繼續閱讀全文

電子書閱讀器 Kindle 8 購買及使用心得

使用多年的 Kindle DX 終於到了壽終正寢的時刻,為了眼睛著想,生活不能沒有 E-Ink 的電子書閱讀器。可惜 Amazon 已經不出 9.7" 的大尺寸,現在一律只有 6",但規格版本之多,令人目不暇給,要如何選擇還真有點頭疼。 那麼本篇就紀錄一...

繼續閱讀全文

解決 Blogger 行動版導覽列選單上「首頁」的異常現象

前陣子接到一個委託,表示 Blogger 行動版的導覽列選單,「首頁」這個項目沒有反應。 其實這個問題很久以前就有發現,只是自己的行動版沒有使用官方的「網頁」小工具,所以沒有深究這個問題。 這次有這個機會來審視一下這個異常現象,才發現要解決的話,還真是出乎意料的棘手,因...

繼續閱讀全文

本站 Blogger 即日起關閉訪客自刪留言功能

這是一篇公告文章,有可能在本站留言的讀者,請注意本篇內容,即日起在本站的任何留言,都將無法刪除。 (圖片出處: pixabay.com )

繼續閱讀全文

[WP外掛] 讓網頁根據訪客語言設定, 自動轉換簡繁文字

之前寫過「 讓網頁根據訪客語言設定, 自動轉換簡繁文字 (切換按鈕升級版) 」這個版本,因為有朋友的 WordPress 網站需要這個功能,所以改寫了本篇的版本。 雖然 WordPress 也可以直接安裝原版本,但有種種原因值得改為優化後的 WP 版本,以下會簡單介紹,而想...

繼續閱讀全文

替換 Blogger 所有預設留言頭像圖示 (CSS 技巧)

最近忽然發現,Blogger 預設的留言頭像有了變化,原本匿名留言的頭像,是無臉孔的圖案,但現在則變成完全空白。 除了這點可能會造成版面不佳,另外其他的預設圖示 (例如 Blogger 帳號的圖案) 尺寸只有 16x16 (px),各種大小不一及完全空白的圖示,對於訪客的視...

繼續閱讀全文

Blogger 使用 Pagespeed Insights 網站速度效能檢測心得

經營部落格的站長們,一開始在意的是門面(版面)是否美觀;過一陣子之後,注意力可能會轉移到網站的效能、載入速度能否更快,其中最常使用的檢測工具就是 Google 的「 PageSpeed Insights 」。 這個 Blogger 中文論壇貼文詢問「 Pagespeed I...

繼續閱讀全文

Facebook 粉絲團的訊息無法收到 Email 通知?可安裝各種平台的 Messenger 即時通

其實 Facebook 聊天室的訊息,在以前是可以設定為「以電子郵件通知」。但 WFU 不知從何時開始,就沒收到過 Email 通知了。 原以為是我曾經取消訂閱郵件通知,不過試了很久都找不到答案,最後在這個國外討論串「 How do I turn on email noti...

繼續閱讀全文

Blogger 熱門文章 V2﹍卡片式縮圖 + 自適應尺寸 (RWD)

幾年前寫的「 Blogger 熱門文章+任意尺寸縮圖 」,由於修改方式比較複雜,不熟悉程式碼的讀者,有可能不小心會把範本改壞。 本篇 V2 版,除了可算是懶人包,安裝十分簡單,版面也比較有設計感。以下先介紹改版特點,想直接安裝可跳至「二、準備動作」。 點此看範例網頁 ...

繼續閱讀全文

Blogger 長期免費諮詢﹍優惠方案申請

Blogger 使用者無論在是架站或使用上,由於「 Blogger 沒有客服 」,很多問題都不得不自行摸索。 現在 WFU BLOG 將提供 Blogger 使用者,獲得長期免費諮詢的機會,沒有時間限制,意思就是說,WFU 將成為你 Blogger 網站的長期顧問,解決各種...

繼續閱讀全文

讓 Blogger 首頁能點擊圖片就進入文章頁面

最近接到一個需求:「能不能點擊首頁文章的大圖,就直接跳到文章網址?否則要點 "繼續閱讀" 才能進入」。仔細想想的確很有道理,這才是友善的操作介面設計,以前怎麼都沒想過! 於是現在 WFU BLOG 首頁文章封面圖,改為以最大尺寸呈現,並且加上文章頁面的連...

繼續閱讀全文

免安裝外掛, 直接破解網頁「鎖右鍵+防複製」的方法 (使用書籤)

之前介紹的「 破解 "鎖右鍵+防複製" 的 Chrome 外掛 」, +Pulipuli Chen  布丁大留言表示,Quick Javascript Switcher 無法破解 CSS 的 "防複製" 語法。 雖然 CSS 這件事不...

繼續閱讀全文

WordPress 如何快速搜尋(修改) 佈景主題範本或外掛中的字串﹍String Locator

由於朋友經營了幾個 WordPress (簡稱 WP) 網站,之前幫忙處理版面配置、修改外掛、寫客製程式等等問題,在 Blogger 範本已經十分熟悉的前提下,面對 WP 範本的修改,一開始說實在很頭大。 例如要在佈景主題或外掛中搜尋一個特定字串來修改,或是要找到網頁上的某...

繼續閱讀全文

如何提交 Google 表單後, 跳轉到指定網址?

前陣子發佈了「 使用 Google 表單取代 Blogger 聯絡表單 」之後,最近接到一個需求:「 希望當訪客填寫完 GoogleForm 後,點 "提交" 的按鈕,可以連結到另一個 Thank You Page 的感謝網誌,我會在感謝網誌裡放入轉換追蹤的...

繼續閱讀全文

更換第四台業者心得﹍雖然「北都」給的優惠很多,但最後我下決定的因素是這個...

最近第四台的繳費通知寄來了,剛好也收到 台北市跨區業者 「 北都 」的傳單,打著 " 一年 3500 " 的優惠價(不是上面那張圖的 4200, 上面是官網截圖),跟原本第四台業者一年將近 6000 的價格,差距真的很大。 於是開始收集資訊,看看已經使用...

繼續閱讀全文

Blogger 處理行動版時的各種疑難雜症﹍FAQ 整理

在「 Lazy Load 圖片延遲載入 」留言 #6, +Ala Go  提出了一個觀點:「我的行動版即使使用"網頁版",載入也頗快的,就用"網頁版"頂著先」。 根據與他的一系列對話,以及其他讀者的相關提問,覺得可以將處理 Blogg...

繼續閱讀全文

Adsense 相關文章廣告 (相符內容功能) 使用心得

去年 Adsense 推出一個「相符內容功能」外掛,效果就跟一般部落格常安裝的相關文章工具類似,目的是用來增加訪客停留在網站的時間,就像常見的「 Blogger 相關文章 V2 」、「LinkWithin」等。 當時看到並沒什麼興趣,主要是這工具裝了也不能增加收入;若是談美...

繼續閱讀全文

讓手機版網頁 Youtube 影片能自動調整寬高尺寸

最近接到一個需求,在手機上的 Youtube 內嵌 Iframe 影片會超出版面,希望能解決這個異常現象。 會發生這個狀況,主要是 Youtube 提供的內嵌程式碼,預設尺寸大致為 560px 寬、315px 高,這樣的數值在網頁版是 ok 的,但手機的話寬度就不夠了。 ...

繼續閱讀全文

讓 Google 表單(試算表) 定時寄出 PDF 報表

在這篇「 讓 Google 表單(試算表)能自動寄信 」,我們利用一段簡單的語法,就能讓填表者立即收到 Email 通知(例如訂購商品的項目),用來保存填表記錄。 如果是商業用途的話,Email 的純文字填表記錄,可能不足以展現專業度。 那麼本篇就來介紹,如何將表單的填...

繼續閱讀全文

使用 Google 表單(自訂樣式) 取代 Blogger 聯絡表單

Blogger 官方提供的「 聯絡表單 」工具很方便,可以輕易地放在網站上任何位置來充當留言板,訪客不需要登入帳號即可留言。 從使用以來,在收到的訊息之中,發現某些狀況不斷重演,例如訪客的留言不知道是針對那個主題、發問沒留下網址等等,這些現象也沒什麼好的解決方法,原因在於制...

繼續閱讀全文

Google 表單自訂 CSS 版面樣式教學

最近接到一個需求,想要將原本內嵌到網頁的 Google 表單(問卷),改成可以符合現有網站風格的 CSS 版面樣式。仔細想了想,這個需求的確有其道理存在: 1. 雖然官方提供了不少樣式可以替換,但總是無法自訂所有細節,不一定與我們網站的風格有搭。 2. IFRAME 內...

繼續閱讀全文

迅速搜尋 Evernote 記事標題的技巧﹍自製各種快速鍵

隨著使用 Evernote 的時間越久,累積的記事數量相當可觀時,搜尋結果容易出現許多雜訊,得花不少時間過濾,才能找到真正需要的那則記事。 如果平常為記事命名標題時,有放入適當的關鍵字,那麼日後只需要針對 "記事標題" 搜尋,就能得到比較精確的結果。 ...

繼續閱讀全文

網頁使用程式碼高亮的最佳作法及推薦外掛

提供程式碼分享的網站,為了讓版面視覺效果美觀,通常會安裝「程式碼高亮」這樣的外掛。而帶來的影響是,網站的外掛裝越多也會影響網頁載入時間,尤其是沒有展示程式碼的文章頁面,也必須執行這個沒有必要載入的「程式碼高亮」外掛。 如果能夠需要展示程式碼時,才執行「程式碼高亮」外掛,相信...

繼續閱讀全文
TOP