使用 CSS 語法就能讓 Blogger 自動產生留言編號
趁著網站改版，決定好好檢視所有程式碼，能優化的地方就處理，例如去除不必要的 javascript、或找替代方案，因為「 優化網站效能該注意哪些事? 」有提過，影響網頁載入速度最重要的第二大因素，就是 JS。 之前曾寫過「 Blogger 串聯式留言__留言編號 」，是利用 J...
繼續閱讀全文[網頁設計] 有助於色盲使用者的友善體驗 (2)實作範例
![[網頁設計] 有助於色盲使用者的友善體驗 (2)實作範例](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgMObqBozDq1rAdU1p6HM5w6z0EF3YZpOsuCFb3nJ8RQyaUVPcGKb-TQ94vZVznLXwsf_2veaAGtaaUhF_8yrimL6_5ba910xO6wblQhjD7JWDbQRP5QErgUmZiCZrWIgL-FvxHUrehlLcY/s1600/color-blink-web-design-2.jpg)
上一篇「 有助於色盲使用者的友善體驗 (1)設計構思 」，提出本站的設計方針為： 原本文章區塊為黃底黑字，另一套 CSS 將會使用白底黑字，用來增加對比。 原本文章區塊的連結無底線，另一套 CSS 將會使用底線。 本站文章常用紅字標示重點，同時教學程式碼中包含了大量的紅、...
繼續閱讀全文讓標題過長的多行文字自動省略﹍跨瀏覽器 CSS 技巧
之前寫過「 讓標題過長的文字自動省略﹍單行 CSS 技巧 」，用來處理單行標題過長的問題。不過最近處理多個網站時，剛好都是旅遊美食類型，文章標題比起一般部落格會長上許多。 在特殊版型下(例如區塊寬度不夠)，文章標題使用單行省略文字的方式，不容易辨識主題意涵，會導致點擊率下降。...
繼續閱讀全文為 UL LI 項目清單輕鬆加入圖示的各種 CSS 技巧﹍使用 Unicode + Font Awesome 字型
前陣子接到一個需求，希望在所有 UL LI 項目(列表)清單之前，插入一個小圖示。而且這個圖示，需要將來可以很方便地自行替換。 假如網頁的 UL LI 項目早已做好，那麼一個個手動加入 IMG 標籤的圖片，不但很麻煩，日後也不方便維護(更換圖示)。 其實這件事使用 CSS...
繼續閱讀全文替換 Blogger 所有預設留言頭像圖示 (CSS 技巧)
最近忽然發現，Blogger 預設的留言頭像有了變化，原本匿名留言的頭像，是無臉孔的圖案，但現在則變成完全空白。 除了這點可能會造成版面不佳，另外其他的預設圖示 (例如 Blogger 帳號的圖案) 尺寸只有 16x16 (px)，各種大小不一及完全空白的圖示，對於訪客的視覺...
繼續閱讀全文Google 表單自訂 CSS 版面樣式教學
最近接到一個需求，想要將原本內嵌到網頁的 Google 表單(問卷)，改成可以符合現有網站風格的 CSS 版面樣式。仔細想了想，這個需求的確有其道理存在： 1. 雖然官方提供了不少樣式可以替換，但總是無法自訂所有細節，不一定與我們網站的風格有搭。 2. IFRAME 內嵌...
繼續閱讀全文CSS 製作各種 Ajax 載入動畫集錦
什麼是 Ajax 載入動畫呢？網頁跟後端請求資料，在等待的空檔，通常會先顯示 GIF 動畫，避免訪客等得不耐煩。這個過場動畫的英文名稱，就叫做 Ajax Loader。 由於 CSS 已經能處理細緻的動畫效果，那麼如果是簡單的過場動畫，就能用 CSS 來實現，不一定要讀取 G...
繼續閱讀全文線上檢查 HTML/Javascript/CSS 語法工具, 自動偵測錯誤
前陣子也許 Blogger 在測試新功能，出現了這個「 Blogger 論壇 」貼文提到的異狀，在後台編輯文章的畫面，出現 "您的 HTML 不被接受，結尾標記沒有對應的開頭標記" 這樣的提示訊息。 其實 Blogger 編輯文章時，如果切換到 HTML ...
繼續閱讀全文修改 Blogger 各處 CSS(文章標題+內文+其他)，以字型大小顏色舉例
這個「 Blogger論壇貼文 」表示，使用 Blogger 後台「範本設計工具」來將文章標題的字體改大，結果首頁文章標題的尺寸如預期大小，但文章頁面的尺寸變小。 這個情況有點奇特，本篇試著瞭解為何會如此，順便說明 Blogger 其他區塊的字型要如何調整 CSS，做個系統性...
繼續閱讀全文Blogger 標頭版面配置實作﹍圖片+標題+廣告
這個「 Blogger中文論壇貼文 」詢問 Blogger 標頭區塊的版面如何製作，主要是因為原 PO 比較欣賞「Logo + 標題」這樣的版面設計。 這是很合理的，部落格若要長久經營、帶給訪客深刻印象，設計一個簡明的 Logo 圖案會很有效果，能讓訪客看到 Logo 就連想...
繼續閱讀全文CSS 色碼英文名稱對照表一覽﹍快速挑選好看的顏色
之前看到這篇「 CSS1-CSS3 顏色知識知多少？ 」，整理了所有 "可用英文命名" 的顏色及色碼，這樣的表格對於查找顏色還滿不錯的。 由於原作者的表格，是依照 CSS1 ~ CSS3 的順序來編排，算是學術用途。我把這個表格整理了一下，變成可以依照英文...
繼續閱讀全文網頁使用自製紋理背景﹍雜點+拔絲+再生紙效果實作 [CSS 技巧]
![網頁使用自製紋理背景﹍雜點+拔絲+再生紙效果實作 [CSS 技巧]](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh_S3w95Xliz5ZOQavZBRFTFEazOJhQmqxytfKKQ3lRUQicqBZ6rMGtLXX4Zf96e6QYYC5JUKQVGv9EKxJ2B64G6csWPIEZIoM95TVurvjhMN6e_dRMDcwAPDd4SkDhDKev7wp8HKRfrnyV/s640/noise-background.jpg)
過去本站各個區塊一直都是使用單色背景，稍微比較沒質感，而好處是網頁載入速度會快一些。前陣子剛好有讀者詢問哪裡可以找到不錯的紋理背景圖案，因此稍微研究了一下這方面的資訊，順便幫網站背景換上自製的紋路，不過就是得稍微犧牲幾個 http 請求。 其實網路上的免費背景圖資源非常多，可...
繼續閱讀全文RWD 標頭(header)圖片實作 [CSS 技巧]
![RWD 標頭(header)圖片實作 [CSS 技巧]](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEizGA0ef-Bvs1kubJV_NCHFiX7P4vsJNRYgRfR2f98cyzmvlzjO-QnCG_-Np6GeQixG6aO40Q64TU52hK30yS27xKDQpaZzyh3J8J4KjEHIxKiXNomnuSpkh3e7S2Y7J3aU9nh5wFEoTc04/s640/rwd-full-width-header-image.jpg)
使用自適應網頁(RWD)時，標頭圖片的設計與擺放，需要一些巧思與技巧。既然希望網頁能自適應調整寬度，那麼標頭圖片自然在不同寬度之下，都不能讓訪客覺得突兀。 最近接到一個標頭圖片的需求，希望在 "不同寬度下都能填滿整個螢幕"。也許字面上不容易理解，因此用文章...
繼續閱讀全文讓標題過長的文字自動省略﹍單行 CSS 技巧
在設計版面的時候，控制區塊的寬度與高度是重要的技巧，因為文字數量或圖片尺寸非我們所能控制。當內容太多、超出了區塊的範圍，如果不熟悉 CSS 語法，沒有做適當的參數設定，輕則視覺效果變差，重則版面整個爆掉！ 圖片超出區塊的調整，將會另闢一個主題。本篇先說明如何使用 CSS 語法...
繼續閱讀全文Blogger 多層下拉選單實作
前陣子處理一個案子，需要在 Blogger 安裝多層下拉選單，說真的這不是一個輕鬆的任務，因此值得記錄一下過程，減少日後重新摸索的時間。 一般而言，如果像本站屬於主題集中、文章數幾百篇的規模，應該使用單層的下拉選單就足夠，太多層的下拉選單對於讀者而言，其實在尋找資訊時不是那麼...
繼續閱讀全文[教學] 快速回到網頁上方 Go Top 按鈕 + 各種動畫效果(CSS / jQuery)
![[教學] 快速回到網頁上方 Go Top 按鈕 + 各種動畫效果(CSS / jQuery)](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgP61JneX54-Gh_wqY6PI5iiJK7dNDVtUBFDBOS3Ix6jIwqy1yA9HK_CrM_Bw9dCvO4KAKtFgL_WZtgAXSCeZbCJBXFtCxcesQKP0MDqfAOY_fYRwm2-3IuysGYusKiPEiJFRT0R7HixEPZ/s1600/go-top-button-animation.jpg)
(Pic from: keytothecity.co.uk ) 之前做過兩個「回到頂端」按鈕的版本，分別是「 Go Top 按鈕符合使用者體驗的友善設計 」、「 Go Top 按鈕放在浮動導覽列 」。最近處理的 case 需要炫一點的特效，因此將之前的版本增加一些動畫效果。 ...
繼續閱讀全文[CSS] 美化 Blogger 官方標籤雲
![[CSS] 美化 Blogger 官方標籤雲](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjXaQk8xbqqJChrQ6zzJ8Ya50uMn7Dot45-Vxj5PV_7-sF-hnwnCYMk5pnTvE0OO6kx9NkBp_O1DEVU8nbZTYx0bIUnVKIaDlt3cojwnqrb_9RftQDZ2_HG4XwsL5_lMrbz8rHPRJajeDLg/s1600/blogger-label-cloud-css.jpg)
最近朋友買了一個漂亮的 Blogger 範本，除了配色一定比官方範本好看之外，也會有一些 jQuery 特效。不過非官方範本想要自己修改版面，就不是那麼容易了，同時也會有一些相容性問題，例如本文的主題 "標籤雲"，不巧執行就遇上版面破裂的情形。 Blogg...
繼續閱讀全文CSS tooltip 進階探討﹍(3) 讓提示框顯示圖片及應用方式
CSS tooltip 系列文前兩篇「 安裝懶人包 」及「 疑難雜症排除 」詳細說明了安裝及解決所有問題的方式。而 +Ken CHEN 提出了「 CSS tooltip 能否顯示圖片 」的問題，答案雖然是可以，但很麻煩，且需要考量的因素不少。 +Mark X 在前一篇留言...
繼續閱讀全文簡單漂亮的 CSS tooltip 提示框﹍(2) data-title 設定 + 疑難雜症排除
上一篇「 CSS 提示框懶人包實作 」說明了 CSS tooltip 原理，不過懶人包畢竟無法處理各種變數，留言提出了各種異常狀況，因此本篇仔細說明不同狀態下的解決方式。 << 請注意！本篇文章含會員限定內容 >>
繼續閱讀全文簡單漂亮的 CSS 提示框(tooltip)懶人包實作﹍(1) 動畫效果 + 置中演算法
HTML 標籤屬性 title 裡的提示訊息，在瀏覽器差不多延遲一秒才會出現。在資訊爆炸的時代， 訪客閱覽文章多半施展 "超速讀"，相信更不會有耐心去臆測某個地方是否藏著 title 屬性、或等待一秒後的訊息浮現 。使用 javascript(簡稱 js) ...
繼續閱讀全文
