2016年8月22日

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

A+
replace-blogger-default-comment-avatar-替換 Blogger 所有預設留言頭像圖示 (CSS 技巧)最近忽然發現,Blogger 預設的留言頭像有了變化,原本匿名留言的頭像,是無臉孔的圖案,但現在則變成完全空白。

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

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



(圖片出處: magicmockups.com)


一、解決方法


1. 造成的影響

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

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


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

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

  • 最上面是 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('//2.bp.blogspot.com/-nEPh_CvgECk/VhiRpiuYUHI/AAAAAAAAMqM/HdjiVlRXC6U/s35/wfublog-comment.jpg'); /*自訂匿名頭像*/
}
.avatar-image-container img[src*='img/b16-rounded.gif'] {
content: url('//4.bp.blogspot.com/-81dIbOmU9O4/UB_ufwAvb0I/AAAAAAAADj8/1Y4HFMVzx4Q/s35/blogger.png'); /*自訂 Blogger 帳號頭像*/
}
.avatar-image-container img[src*='img/openid16-rounded.gif'] {
content: url('//1.bp.blogspot.com/-sI74_lyKtUE/UB__t_YIVMI/AAAAAAAADms/X_25WXcYZhk/s35/openid.png'); /*自訂 Open ID 頭像*/
}
</style>

藍色的圖片網址,可改為自訂的圖案,請參照綠色註釋的文字來修改。

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

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

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



更多 Blogger 留言相關文章:

3 則留言:

  1. 我的網誌,已經按上述操作了。 可是剛測試,好像沒效果? 頭像還是空白?

    回覆刪除
    回覆
    1. WFU經過查看你的範例網誌,demo.wfublog.com 我找到原因了,按照你上述直接添加在CSS區塊,不知道為什麼,結果是這段CSS從頭到尾並未在WEB前端顯示。 如果我把這段程式碼也加上(style)(/style)這個標識符,放置在其它區塊。 才可以成功顯示!

      刪除
    2. 謝謝你的測試,我想原因是每個網站的範本內容不同,在 head 之前可能還有其他的相關 CSS 設定,蓋過了本文的 CSS 設定。

      那麼比較泛用、減少各個範本衝突的安裝方式,是將本文 CSS 內容放在 head 之前,用來蓋過其他相關 CSS 參數。已修改本文安裝方式,請參考。

      刪除

張貼留言注意事項:

◎ 勾選「通知我」可收到後續回覆的mail!
提問請附網址、詳細描述狀況,如提供的資訊不足,則無法回覆。
◎ 請在相關文章留言,與文章無關的主題請至「Blogger 中文論壇」。
◎ 若詢問 CSS 、非官方範本問題、或貴站為商業網站 ,請參考「本站諮詢頁面」→「1. 諮詢服務」
◎ 若留言要輸入語法,"<"、">"這兩個符號請用其他符號代替,否則語法會消失!
◎ 若發現留言不見了,通常是因為 "複製貼上" 的內容常被系統判定為垃圾留言,請不用擔心,我會定期將留言恢復。
◎ 本站「已關閉自刪留言功能」。