2013年6月21日

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

A+

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


更多實用工具:

9 則留言:

  1. 版主您好,安裝了這個好用的Hack後。

    卻發現文章留言中無法顯示的個人圖像卻顯示出來了。

    但文章中的頭像還是依然無法顯示正常。

    參考您有關於留言的文章,都無法找到相對應的CSS碼。

    也有使用了" 將迷你組件範本回復為預設值" 大絕。

    但都沒有改變,想請問這個問題該如何解決呢?

    回覆刪除
  2. <2378576539750819835>http://catherine98.blogspot.tw/ 這是網址

    回覆刪除
  3. <393964815549473214>(以上內容請勿刪除,從括號之後開始留言)這情形的確滿奇怪的,我看你的最新回應小工具,頭像是正常顯示的,但是文章的留言區塊裡面,頭像全部變成匿名頭像。

    感覺上這問題或許跟本文的 CSS 碼沒關係,因為 CSS 只會改變樣式,應該不會改變圖片網址才是。請問確定是裝了本文的 CSS 碼後,馬上變成匿名頭像嗎?

    你可以試著把本文的 CSS 程式碼全部移除,如果仍是匿名頭像,那就表示是別的原因(可能裝了別的外掛引起的);如果頭像恢復正常,那就是本文 CSS 碼的關係。

    如果找不出原因,由於我也沒遇過這情形,也許要請你上 Blogger 社群看看有沒有其他成員遇過了:https://plus.google.com/communities/103807083735607134704。

    回覆刪除
  4. 我可以請問你,這個語法在痞客邦可以使用嗎?

    回覆刪除
  5. <8146702805653577646>(以上內容請勿刪除,從括號之後開始留言)Blogger 跟 痞客邦 使用的 CSS 語法一定不一樣的。我猜你可能對 CSS 不太熟,那麼就幫不上忙了...如果對 CSS 熟的話,用「開發人員工具」就能找出 痞客邦 頭像修改的地方了。

    回覆刪除
  6. <4428146574373225813>(以上內容請勿刪除,從括號之後開始留言)
    版主您好,在下的情況與Catherine的情況相同,情況更是未有加上額外CSS,於所有預設模版中的情況出現的。個人圖像唯一能成功顯示,就只有套用動態檢視模式,所以在下敢斷言與CSS無關,但卻找不到原因。

    回覆刪除
  7. <2549300641848573485>(以上內容請勿刪除,從括號之後開始留言)可能是裝了某個外掛引起的,造成blogger留言的js執行錯誤。如果將範本恢復為預設值還不行的話,那就必須將範本中的所有安裝過的外掛 javascript 一一試著移除來比對才能找出答案了。

    回覆刪除
  8. <4428146574373225813>(以上內容請勿刪除,從括號之後開始留言)

    你的小工具頭像顯示成功,但我的主留言頁面還是不行。

    移除小工具也是一樣,所以排除互相影響的問題。
    試過網上幾個排除方法也是一樣,所以放棄了XD
    不過還是很謝謝你,小工具很好用!!!

    看你最近有來"頭像TEST"所以來打個招呼:P

    回覆刪除
  9. <120068413463375215>(以上內容請勿刪除,從括號之後開始留言)因為當初認為你的狀況是特例,沒想到留言 #4 AI 表示也有相同狀況,所以不好意思到你的網站做了個測試...XD

    可惜仍看不出原因,只能如留言 #4 的回覆進行,看能否找到答案了。

    回覆刪除

張貼留言注意事項:

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