網頁資料存成 CSV 需要解決的問題整理﹍亂碼 + JS 技巧 + Bootstrap 表格
最近客戶需要在網頁上顯示大量的會員資料後，製作一個「匯出」按鈕，將表格所有資料匯出存成 CSV 檔，再用 EXCEL 之類的試算表軟體開啟。 整個流程要用的的技術其實沒有太高深，但是陷阱卻是很多，因此整理成一篇備存。 (圖片出處: pexels.com )
繼續閱讀全文輕鬆讓 Blogger 搜尋結果出現麵包屑(breadcrumbs)導航﹍使用結構化資料 JSON-LD
相信有關注 SEO 的站長都知道什麼是麵包屑(breadcrumbs)，如不清楚的話可參考「 麵包屑導航之於SEO的重要性 」、「 面向搜索引擎优化 之 面包屑导航 」。 簡單說這功能就像童話故事，小男孩為了認路而留下的麵包屑，具有協助導覽網站的效果，可讓訪客快速知道該篇文章...
繼續閱讀全文Blogger 在網站管理員(Google Console)看到 Index Coverage 問題不用擔心
只要是 Blogger 站長，進入「 網站管理員 」(Google Console) 應該都會看過這個警告訊息： 由於文字描述太過恐怖，大部分站長看到 "排名降低" 這樣的字眼肯定會嚇到，但實際上根本不是那樣子，我也不清楚 Google 為何不針對自家...
繼續閱讀全文Blogger 升級 HTTPS 後，如何面對按讚數歸零？
前陣子「 Blogger 官方免費幫自訂網址升級 HTTPS！ 」之後，陸續有不少使用者表示 Facebook 讚按鈕消失了、或是讚數歸零了，需要本站協助處理。 一開始認為這件事並不複雜，只要修改一下讚按鈕對應的文章網址就好，初步的處理結果也是如此。沒想到過了幾天之後，有客戶...
繼續閱讀全文製作會上下彈跳的按鈕，吸引訪客注意也增加點擊的機率﹍CSS 動畫技巧
最近接到一個需求，案主希望做一個固定在網頁右下角的按鈕。且為了引起訪客注意，指定這個按鈕必須上下不斷彈跳。 這樣的設計的確不錯，因為製作網頁的最終目的，就是讓訪客下定決心並且行動，無論目標是讓訪客購買產品、按讚、或留言聯繫等等，這個行為總稱「行動呼籲」，也就是 Call To...
繼續閱讀全文Font Awesome 5 正式支援 Line 圖示﹍CDN 安裝 + 版本向下相容心得
長久以來使用「 Font Awesome 」真的非常方便，網頁製作各種小圖示時不用再煩惱，只要到「 Font Awesome 圖示速查表 」翻一翻多能找到需要的圖案。 不過幫客戶處理需求時，最常遇到找不到「Line」的圖案，只好建議先用相近的「Whatsapp」擋著用。沒辦法...
繼續閱讀全文有些事還是要花了錢才有效果﹍SEO 流量也是
在這篇「 是否痞客邦、WordPress 的 SEO 比 Blogger 好，有這樣的事嗎？ 」留言 #4 有讀者提出 SEO 相關問題，並且希望瞭解 SEO 搜尋排名的依據，因為該讀者認為某個競爭對手的網站資歷、內容都不如他，卻被 Google 排名在前。 為了找出影響排名...
繼續閱讀全文三國志11__五奇戰記(4)__(下) 固守宛城大作戰
「 上集 」五奇經過縝密的策劃與算計，加上大量的兵推反覆驗證，終於成功拿下宛城。但從殘留的兵力來看，只能算是慘勝。 而形勢更加嚴峻的是，在沒獲得更多將領的情況下，必須以更少的人手與兵力防守宛城。
繼續閱讀全文三國志11__五奇戰記(4)__(上) 起源
將近十年前留下「 經典戰記三部曲 」後，五奇兄弟就歸隱山林。由於「孫伍兵法」已廣為流傳，不求名利的五奇自覺心願已了。 近期在 PTT KOEI 版發現有佈告「 311 三分歸晉 用新武將該怎玩? 」，五奇看了這個架空的年代，新武將唯一的空白郡為「新野」，不正是當初的成名發跡之...
繼續閱讀全文用 Line 傳未讀訊息給自己，成為待辦事項﹍不用擔心已讀訊息忘了處理
2019.9.25 公告： 本篇流程隨著 Line 更新到最新版本後會失效，請參考我的新作法「 Line 無法傳未讀訊息給自己後，待辦事項改用 FB Messenger 發給自己 」。 在某種程度上，Line 的未讀訊息就等於是收件匣的未讀郵件，都會是潛在的待辦事項。對我...
繼續閱讀全文部落格使用「結構化資料」的最佳作法 JSON-LD﹍提供「文章」型態的範例程式碼
過去曾寫過一篇「 部落格如何處理結構化資料標記 + 修復錯誤訊息 」，主要是因為鑽研 SEO 的站長，使用了 HTML 微資料(Microdata)語意標記後，拿「 結構化資料測試工具 」檢測總是會看到一堆錯誤。 該篇文章我也說了，部落格網站不理會結構化資料也沒什麼差，因為 ...
繼續閱讀全文Blogger 維護/架站 是否需要加工程師為管理員？只跟信任的對象合作是很重要的
如果找本站進行 Blogger 架站，因為是比較大的工程，到後台進行作業是必須的，那麼必定要加 WFU 為管理員。 如果是維護的案件、或處理比較小的問題，有的客戶或許就有疑慮，會思考是否要加不認識的人為管理員，這樣網站比較安全。但是不加工程師為管理員，又希望能完美解決網站的問...
繼續閱讀全文自製美觀的 RWD 時間軸效果(timeline)﹍jQuery + Bootstrap 外掛
雖然時間軸的效果看過不少網頁使用，不過倒是很少看到部落格站長放在文章內。這次接到的需求是，案主希望將單車行旅的圖文經歷，版面用時間軸效果串起來。 於是研究了相關的外掛，同時也要顧及手機的 RWD 效果，請見本篇的心得整理。 點此看範例網頁 (圖片出處: eeyello...
繼續閱讀全文Blogger 官方免費幫自訂網址升級 HTTPS！ 設定處理流程注意事項整理
這真的是最好的新年禮物了，過年前夕在「 FB 社團 」 +Vista Cheng 分享了「 Blogger站長看過來：自訂網域的網誌，也可以支援HTTPS囉 」 ，原來官方悄悄開始測試，可以讓自訂網域直接升級 HTTPS，這代表： 不用付錢，Blogger 免費提供我們網...
繼續閱讀全文究竟 Blogger 會不會關閉？從 Google 商業經營的角度分析
Blogger 會不會倒閉，是使用者長期以來的擔憂。過去曾在「 Blogger 的未來 」發表過看法，不過曾有讀者看完，一段時間後仍提出相同的問題。我想，這件事除非有官方說詞，否則疑問不會有停止的一天。 然而，Google 官方有可能發佈這樣的聲明嗎？我想不會的，連 Yaho...
繼續閱讀全文輕鬆做出美觀的自適應 RWD 表格(Table)﹍jQuery 輕量外掛
最近的案子處理行動版的表格效果時，發現以前的「 Blogger 插入表格最佳流程 + 自適應寬度 」，這個方式若用在商業網站，將沒有任何質感可言，甚至可以用簡陋來形容。 於是找了一下自適應 RWD 表格有沒有比較美觀，而且又簡便的處理方式。有發現幾個功能強大的外掛，但操作稍嫌...
繼續閱讀全文部落格載入速度太慢，要如何判斷哪些外掛可以移除？
重視 SEO 的站長自然都會關注網頁的載入速度，因為這也是 Google 的排名評分項目之一。過去寫過一系列「 網站效能 」的相關文章，有興趣的站長可以瞭解不同的主題要如何處理。 由於提升「網頁載入速度」的詢問度一直很高，以往就算請讀者看這些相關文章，一段時間後還是可能回頭問...
繼續閱讀全文免 iPhone、iPad 開發人員就能進行除錯﹍MacOS 模擬器 + Xcode 妙用
之前這篇「 利用 Chrome 對 iOS 裝置進行除錯 」可以讓開發人員很方便地對 iPhone、iPad 等裝置進行偵錯，不過並非所有前端開發者都有辦法買齊各種昂貴的蘋果裝置來測試，因此本篇將會介紹一個比較省錢的解決方案。 雖然不用花錢，不過必須花時間跑模擬器，電腦的 C...
繼續閱讀全文Blogger 網址買了很後悔，可以再搬到新網址嗎？
前幾天有讀者表示，網址已經買了很多年，最近快要到期，想要換個新的網址，但又怕原來的網站連結就失效了，詢問我可不可以搬到新網址。 她的文章有 1500 篇，算是相當不小的規模，本站連她的一半都不到！ 規模中上的網站的確需要一個比較有記憶性、或與網站特色連結的網址 ，但一開始經營...
繼續閱讀全文從小編到總編之路﹍如何成為部落客中的佼佼者
前陣子這篇「 部落格從搜尋引擎而來的流量，是不會有感情的﹍找回經營網站的動力 」寫完後，有位美食部落格客戶，同時也算本站長期讀者，問了一些 SEO 問題。其實滿訝異的，既然是忠實讀者，想必知道我希望讀者將注意力放在 SEO 以外的地方。 瞭解她詢問的原因後，覺得這段對話可以看...
繼續閱讀全文滑動開關切換按鈕﹍CSS 語法產生器
最簡單的切換選項效果，是使用 Input 元素的 radio 型態，也就是單選(非複選)的效果，長得像這樣： 之前接到一個需求，希望切換效果做得有質感，像是蘋果系統的切換按鈕，例如下面的範例： 原以為這樣的效果，需要用 JS 才能做出來，沒想到純 CSS 就能有很...
繼續閱讀全文電子墨水 (E-ink) 護眼顯示器 Paperlike Pro﹍(1) 入手及開箱心得
為了解決眼睛長時間看螢幕會不舒服的問題，十多年來一直關注「非背光」螢幕顯示器的發展，以及各種解決方案。除了買過各種廠牌、尺寸的「 電子墨水 Eink 產品 」，去年也買過淘寶賣家自行改裝的「 10吋 富士通反射屏 」黑白顯示器。 前兩年也關注過「大上科技」的電子墨水顯示器 p...
繼續閱讀全文
