過去曾寫了幾篇關於修改 Blogger 頭像尺寸的文章，例如「舊範本修改各種身份頭像」、「新範本修改留言頭像尺寸及形狀的 CSS 語法」。不過最近 +toa to 於這個「Blogger 中文社群討論串」表示， "最近發現，雖然把頭像變大了，但網址還是s35-c，導致圖片看起來很模糊"。後來仔細想了一下，當初寫 CSS 修改語法時，並不會有這樣的問題，那麼大概是 Blogger 有什麼地方做了變動，因此無法再用 CSS 語法就能處理這件事。
以下先大致說明前因後果、需要解決的問題，想直接安裝請跳「二、準備動作」。
(圖片出處: pixabay.com)
一、需要克服的問題
1. Blogger 的修正
以前 WFU 發現留言者頭像有個大問題，若上傳的頭像尺寸很大，那麼當留言數量很多時，光是讀這些頭像圖檔，就要花很多流量與載入時間。
正因為這些原始的頭像圖檔尺寸可能都很大，那麼之前寫的「新範本修改留言頭像尺寸及形狀的 CSS 語法」，只要透過設定 CSS 寬度，就足以變頭像尺寸、且不會失真。
2. 產生的問題
現在 Blogger 強制將所有留言頭像改為 35 x 35 的尺寸，也就是有帳號的頭像圖檔網址參數一律成為 "s35-c"：
- 好處如上述所提，可以大大提升網頁載入速度。
- 壞處就是，無法再經由修改 CSS 來改變真實的頭像圖片尺寸。
- 解決方法為，另外寫 JS 來動態修改圖片尺寸。
3. 各種頭像身份
然而，依據留言者身份的不同，會出現各種的頭像圖案，因此本篇的 Hack，也必須一併處理下列這些身份的頭像尺寸：
- Blogger 帳號未設定頭像
- OPEN ID
- 匿名、無帳號的頭像
二、準備動作
本篇的 Hack 只能做到用 JS 修改圖檔網址及參數，還需要另外設定 CSS 才能真正變更頭像尺寸，因此請務必先參考「Blogger 修改留言頭像尺寸及形狀的 CSS 語法」的流程，設定完所有 CSS 參數。
三、安裝程式碼
在修改範本之前，如果第一次安裝本站工具的讀者，建議先閱讀「備份範本的訣竅」系列文章。
請到後台「範本」→「編輯 HTML」，游標點進範本區塊，按 Ctrl-F 搜尋
以下參數修改請參照以上程式碼行號：
E：紅色參數輸入頭像的長寬像素值。
因為桌機的螢幕多半很大，瀏覽器必須將網頁放大顯示，為了讓頭像不模糊，如果頭像在「二、準備動作」想要顯示的尺寸，CSS 設定為 50px 的話，建議 E 行參數設定為 100，將圖片尺寸先行放大為兩倍，這樣瀏覽器顯示頭像的效果會比較清晰。
F：藍字圖片網址可置換為自訂的 "無帳號頭像圖案"
G~H：如想使用自訂的 Blogger 帳號、OPEN ID 圖案，可置換藍字圖片網址。
以上修改完，存檔即可看到效果。
更多 Blogger 留言相關工具：
喔喔喔~~WFU的動作好快!
回覆刪除非常感謝~~現在就來試試看~