2013年6月1日 星期六

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

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

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


更多實用工具:
0 0
如這篇文章對你有幫助,歡迎「分享」到 FB、「追蹤」粉絲團、「訂閱」最新文章

沒有留言:

張貼留言注意事項:

◎ 勾選「通知我」可收到後續回覆的mail!
◎ 請在相關文章留言,與文章無關的主題可至「Blogger 社團」提問。
◎ 請避免使用 Safari 瀏覽器,否則無法登入 Google 帳號留言(只能匿名留言)!
◎ 提問若無法提供足夠的資訊供判斷,可能會被無視。建議先參考這篇「Blogger 提問技巧及注意事項」。
◎ CSS 相關問題非免費諮詢,建議使用「Chrome 開發人員工具」尋找答案。
◎ 手機版相關問題請參考「Blogger 行動版範本的特質」→「三、行動版範本不一定能執行網頁版工具」;或參考「Blogger 行動版範本修改技巧 」,或本站 Blogger 行動版標籤相關文章。
◎ 非官方範本問題、或貴站為商業網站,請參考「Blogger 免費諮詢 + 付費諮詢
◎ 若是使用官方 RWD 範本,請參考「Blogger 推出全新自適應 RWD 官方範本及佈景主題」→ 不建議對範本進行修改!
◎ 若留言要輸入語法,"<"、">"這兩個符號請用其他符號代替,否則語法會消失!
◎ 為了過濾垃圾留言,所有留言不會即時發佈,請稍待片刻。
◎ 本站「已關閉自刪留言功能」。

TOP