
(Pic from: freepik.com)Blogger 預設的留言頭像為正方形,有沒有發現「Google+」使用的頭像為圓形?由於 Blogger 預設的頭像尺寸很小,如果想將原本的正方形直接改為圓形,頭像會顯得太小。
所以得先將 Blogger 頭像的長、寬都加大,再改成圓形,版面才比較美觀。本文將詳細說明如何修改頭像圖案的 CSS 語法參數,來達到需要的效果。
一、新舊範本的差異
過去曾在「Blogger 修改留言者的各種身份頭像顯示+尺寸變更」修改過頭像,不過那一篇文章只適合舊範本使用。現在大部分的讀者都是使用新範本,使用「Google Chrome 開發人員工具」來檢查後,發現新範本的 CSS 改法不太一樣。
因此使用新範本的讀者,請按照本篇的語法來修改。
二、留言頭像的 CSS 程式碼
如果知道 Blogger 範本中的 CSS 區段在哪,那麼可直接將本文的 CSS 程式碼複製過去。
如果不清楚的話,請到 Blogger 後台範本 → 編輯 HTML → 搜尋 </head> 字串 → 在其前一行插入以下程式碼──
先別急著存檔,以上這些參數,頭像的效果大致像這樣──

上圖頭像的寬度設定為 50px、有四個圓角(非圓形)、有外框。
如果這不是你要的效果,請閱讀以下說明再決定參數怎麼下。
三、CSS 參數修改
以下的英文字母行號請參照上面的程式碼。
1. 頭像尺寸
H、M、S:這三行決定頭像的寬度, 50px 可改為自訂的寬度(Blogger 預設的寬度為 36px)。
2. 留言區縮排
D:系統預設的留言區縮排為 48px,但由於頭像寬度被我們從 36px 改為 50px(拉長了 14px),因此距離左邊界縮排也得拉大 14px,所以 D 行的數值我們得改為 (48 + 14 =) 62px。
3. 頭像邊框
N:如果不需要邊框的話,這一行可以刪除;如果想要邊框的話,這一行的綠字部分可以這麼修改─
- 1px:這是邊框的厚度,可自行調整。
- solid:這是邊框的形態,solid 代表實心。除了 solid 以外的參數,可參考「CSS 教學 > 邊框」。
- #ccc:這是邊框的色碼,請自行調整,可參考「色碼表」。
4. 圓角形狀
O:綠字部分為圓角的程度,數值越大代表圓角的程度越大。
如果要維持正方形,請將此行刪除。
如果要改成圓形,以寬度 50px 為例,那麼圓角程度設為一半大小,也就是把本例的 7px 改為 25px,就會變成圓形了。就像下圖這樣──

四、IE 瀏覽器的提醒
必需要提醒的是,由於 IE8 不支援 "圓角語法",要 IE9 以上才支援,因此本文的效果在 IE8 (含)以下的瀏覽器無效。
可參考「建議避免使用 IE8(含)以下瀏覽器」這篇文章,在網頁明顯處(例如本站右上方或頁尾版權宣告處),建議訪客使用 Chrome、FireFox 等瀏覽器參觀部落格,可得到最佳閱覽效果。
更多實用工具:
版主您好,安裝了這個好用的Hack後。
回覆刪除卻發現文章留言中無法顯示的個人圖像卻顯示出來了。
但文章中的頭像還是依然無法顯示正常。
參考您有關於留言的文章,都無法找到相對應的CSS碼。
也有使用了" 將迷你組件範本回復為預設值" 大絕。
但都沒有改變,想請問這個問題該如何解決呢?
<2378576539750819835>http://catherine98.blogspot.tw/ 這是網址
回覆刪除我可以請問你,這個語法在痞客邦可以使用嗎?
回覆刪除<4428146574373225813>(以上內容請勿刪除,從括號之後開始留言)
回覆刪除版主您好,在下的情況與Catherine的情況相同,情況更是未有加上額外CSS,於所有預設模版中的情況出現的。個人圖像唯一能成功顯示,就只有套用動態檢視模式,所以在下敢斷言與CSS無關,但卻找不到原因。
<4428146574373225813>(以上內容請勿刪除,從括號之後開始留言)
回覆刪除你的小工具頭像顯示成功,但我的主留言頁面還是不行。
移除小工具也是一樣,所以排除互相影響的問題。
試過網上幾個排除方法也是一樣,所以放棄了XD
不過還是很謝謝你,小工具很好用!!!
看你最近有來"頭像TEST"所以來打個招呼:P