[教學]Blogger 修改留言頭像尺寸及形狀的 CSS 語法

(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 等瀏覽器參觀部落格，可得到最佳閱覽效果。


更多實用工具：

• 本站使用的 Blogger hack 及工具整理