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