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

最近忽然發現，Blogger 預設的留言頭像有了變化，原本匿名留言的頭像，是無臉孔的圖案，但現在則變成完全空白。

除了這點可能會造成版面不佳，另外其他的預設圖示 (例如 Blogger 帳號的圖案) 尺寸只有 16x16 (px)，各種大小不一及完全空白的圖示，對於訪客的視覺感受也很差，會讓 Blogger 網站看起來不夠專業。

於是花了點時間解決這些現象，而且只用到 CSS 技巧，不必寫 JS 就能處理，不會影響網頁效能，值得讀者按本篇教學來修改。

點此看範例網頁

(圖片出處: magicmockups.com)

一、解決方法

1. 造成的影響



先來看看以前的「匿名」頭像，長得像上圖一般。




接著來看看現在留言區塊的效果：

• 最上面是 WFU 的頭像，Blogger 對有設定頭像的圖示，預設以 35x35 (px) 的大小顯示；請注意頭像的 CSS 設定了外框 (border) 效果，為了顯眼特別改成黑色外框。
• 紅框標示 A 處為「匿名」圖像，現在變成了空白圖片；無帳號留言的頭像，也是一樣的效果。請注意當頭像設定了外框的 CSS 後，那麼無論 IMG 標籤是否有圖案，都還是會有外框，導致會看到圖中難看的一小撮正方形外框。
• 紅框標示 B 處為 Blogger 帳號、沒設定頭像的圖示，以 16x16 (px) 大小的預設圖案顯示。如果是以 Open ID 身份留言，也是會出現這個尺寸的圖案。

所以在同一個畫面，三種留言身份，會出現三種尺寸的圖案，這樣的視覺效果，是不是很糟糕啊？


2. CSS3 語法

要動態修改網頁上的 IMG 標籤內容，也就是替換頭像圖示這件事，過去只能寫 JS 才能辦到。有看到「優化網站效能該注意哪些事? (1)最關鍵的考量因素」的讀者就會知道，網站的 JS 能少用就盡量少用。

CSS3 語法其實有替換圖片內容的技巧，但缺點是低版本的 IE 不支援。好不容易過了這麼些年，IE11 以下的瀏覽器已經被淘汰地差不多了，現在基本上 WFU 都是無視 IE11 以下的訪客，反正比例已經不高，寫程式時可以安心地採用新時代的語法。

那麼以下就來看看，如何以 CSS 技巧，取代 JS 來置換 Blogger 的預設頭像，改成各種美觀的圖案吧！

二、CSS 語法修改

在修改範本之前，如果第一次安裝本站工具的讀者，建議先閱讀「備份範本的訣竅」系列文章。

開始之前，我們要準備 3 種圖示，來替換官方頭像。或者，你也可以直接使用 WFU 提供的圖片網址。

請到後台「範本」→「編輯 HTML」，游標點進範本區塊，按 Ctrl-F 搜尋 </head> 這個字串，找到後在此字串的前一行，插入以下程式碼：

<style>
/*修改留言頭像*/
.comments .avatar-image-container {
overflow: visible
}
.avatar-image-container img {
width: 35px;
height: 35px;
border-radius: 3px;
box-shadow: 0 1px 7px #666;
border: 1px solid #fff;
background: #fff;
}
.avatar-image-container img[src*='img/blank.gif'] {
content: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhj5LcLrwMGe37Vlg3_4bMrLVkzfMjYw_QkeW3idVlcuAcTE4amiKnX4_n8m4A6gzdNVI31weBNdkBgR4aZfKsOskPEks1_Q3afwsN-MSC-gVfLnuIOx9daZ9A6qgqJBKgsu6uMkLebyYgI/s35/wfublog-comment.jpg'); /*自訂匿名頭像*/
}
.avatar-image-container img[src*='img/b16-rounded.gif'] {
content: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgT51gxfdeZgjXrIoSvolqyDR2PVKwrViutQ52TgNG4T2AIcbtqyTEk32Htnn63Fw_SlSN9cJhjtekvtAgDWliwn0ciB8f_iELxjYIL51OBdmAvgmdQOSH79p0A-JfSO5HAnht595tmneq7/s35/blogger.png'); /*自訂 Blogger 帳號頭像*/
}
.avatar-image-container img[src*='img/openid16-rounded.gif'] {
content: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjFl5cRXUyjQuUB4PKAQgGoo0YKDQ59TDV2gcXqTjwiuHCrY0n29MGxopwB74fQQmUDgFDNPshpNDV1M1puQujXgZSF4YPYUTjEZrqmj8s1F3wsFHCyK9v9a5tWgt7XuIp5LT8AppQFbTb7/s35/openid.png'); /*自訂 Open ID 頭像*/
}
</style>
藍色的圖片網址，可改為自訂的圖案，請參照綠色註釋的文字來修改。

以上的修改，會強制將每個頭像圖案，顯示為 35x35 (px) 的大小，讓版面整齊一致。

另外，這些 CSS 邊框、圓角、陰影效果，就是目前 WFU BLOG 使用的參數，如果熟悉 CSS 可自行修改。

儲存範本後即可。想先看頭像效果的話，可前往範例網頁：

點此看範例網頁

更多 Blogger 留言相關文章：