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