以文字內容為主的部落格，先天上吸引目光的能力已經輸旅遊、美食、攝影等以圖片為主的部落格一大截，如果整篇文章都是密密麻麻的文字，那麼再有深度的內容，也會如同嚴肅的講課內容一般，讓人昏昏欲睡。幫純文字上色、讓文章的可看性加點分大致有兩個途徑，一個是改變標題、關鍵字的顏色，另一個就是本篇的主題──幫重點文字加上各種不同的底色圖案。以下為尋找最佳方案的過程，想直接看安裝方法請直接跳「四、安裝方式」。
一、CSS 設定
1. 原理：在 span 標籤內利用不同的 class，可以設定不同的底線圖案。
2. 進程：每次呼叫底線圖案都要輸入一長串的 「<span class="自訂的Class名稱">文字</span>」並不方便，有的網站採取挪用 HTML 標籤的方法，把 <em> 這個不常用的標籤拿來修改 css ，如此呼叫底線時只需要打「<em>文字</em>」，大大節省很多時間。
3. 問題：請參照「HTML 標籤列表」，可惜 HTML 的不常用短標籤並不多，如果要挪用兩個字元以下的標籤，大概就是<em>、<tt>、<u>、<s>這幾個而已(得先確定部落格將來絕對不用這幾個標籤)。如果想要使用的底線種類很多時，最終還是得回到呼叫 class 的方式。因此如果能找到更簡單的呼叫方式，會是長久使用之道。
二、改進呼叫方式
1. 構想：初步構想為自設 HTML 標籤，例如紅色的底線就自設 <r> 標籤來呼叫；如果有兩種紅色底線就自設 <r1>、<r2> 標籤來呼叫，如此打的字少又不與 HTML 標籤衝突。可惜各大瀏覽器都沒問題，就是 IE 不吃它看不懂的標籤...
2. IE 解決方法：一般來說在 IE 下自定義標籤要宣告的步驟是很麻煩的，還好找到了「這個網頁」，利用 javascript 製作出一個 DOM 物件，來騙過 IE 我們已經宣告過新的標籤，這麼一來問題就解決了。
三、製作底線圖案要領
使用底線圖案同樣會遇上瀏覽器兼容的問題，在 IE 下只要底線超過一行就會被截斷，想要使用超過一行的底線只得分段使用，需要有跨瀏覽器的解決方法。
綜合以上以及自己的使用心得，將製作底線圖案的所有要點整理如下：
1. 底線圖檔的高度必須與 CSS 區設定的行高相同，例如 line-height 設為 22px 的話，那麼底線圖檔的高度也必須 22px，至於寬度則不影響效果。
下圖是使用 PhotoImpact 製作透明圖的效果。
2. 如果底線不想遮住文字、或與文字重疊太多的話，建議線條的高度保持在 4px 以下的位置即可，如上圖所示。
3. 底線圖案的底色最好設為透明，這樣製作出來的圖案，才能適合各種背景色的網頁，因此製作成 png 檔是不錯的得選擇。
依據以上要點做出來的底線圖，再配合正確的 CSS 設定，就能在 IE 下正常跨行。
四、安裝方式
1. 命名新的 HTML 標籤：
A. 根據「二、改進呼叫方式」的方案，假設我們要安裝三個底線圖案，分別為藍色、綠色、紅色，想用三個最簡單的標籤名稱來呼叫底線，或許可以將標籤名稱分別取名為 <b1>、<g1>、<r>。
B. 為何要叫 <b1> 而不叫 <b> 呢？我們得先查過「HTML 標籤列表」，由於 <b> 是已存在的標籤(讓字體加粗)，所以取名 <b1>(數字"1") 或是 <bl>(英文字母"l") 比較恰當。
C. 為何要叫 <g1> 而不叫 <g> 呢？我們得先搜尋後台範本有無 <g> 標籤，而剛好這個標籤被 "google +1" 拿去用了(如果範本沒裝 google 的產品也沒找到 <g> 標籤，就可以放心的使用)。
D. 最後一個代表紅色的 <r> 標籤，查過 HTML 標籤表、範本後都沒有重複，可以放心的使用 <r> 標籤。
因此命名 HTML 的自訂標籤前，先按以上要點檢查一下，就能使用不衝突又好記的新標籤了。
2. 安裝方式：到 Blogger 後台打開範本文件 → 修改 HTML。接著把下面的程式碼插入 </head> 的前面：
存檔後即可，下面為程式碼說明，若不瞭解程式碼也可直接跳「五、呼叫底線圖案方式」。
以下依據執行順序說明程式碼：
S～U：依序製造出 <b1>、<g1>、<r> 三個標籤。想要使用多少底線標籤，在 R～V 的區塊就依照同樣的邏輯、以及上述的命名要領，來製造多少個新的標籤。
B～E：宣告 <b1> 標籤的 CSS 格式。
C：設定 <b1> 標籤的背景圖案，紅字部分的底色圖片網址可改為自己的圖片網址。
D：這裡的行高設為 22px，那麼底色圖片的高度也必須是 22px。
G～J：宣告 <g1> 標籤的 CSS 格式。其餘內容請參照以上說明。
L～O：宣告 <r> 標籤的 CSS 格式。其餘內容請參照以上說明。
如果製造了其他新的標籤，那麼在 A～P 的區塊就依照同樣的邏輯來宣告新標籤的 CSS 格式。
五、呼叫底線圖案方式
非常簡單，在需要畫底線的文字前後加上新標籤即可，就像下面這樣：
第一段：<b1>這一段文字使用藍色底線</b1>
第二段：<g1>這一段文字使用綠色底線，為了測試當文字超過一行時，在 IE 下底線仍然不會斷掉，這一段使用的字數比較多。</g1>
第三段：<r>這一段文字使用紅色底線</r>
存檔之後，文章顯示的畫面就如同以下：
第一段：這一段文字使用藍色底線
第二段：這一段文字使用綠色底線，為了測試當文字超過一行時，在 IE 下底線仍然不會斷掉，這一段使用的字數比較多。
第三段：這一段文字使用紅色底線
雖然前置作業需要稍費功夫，不過以後呼叫底線圖案的方式是否輕鬆又好記多了呢？
2014.5.11 補充：由於本站後來字型加大，以致行高(line-height)增加，超過底線圖案的高度，因此以上籃、綠、紅色底線顯示可能異常，可前往 DEMO 網頁看正常的效果：
六、底線素材
最後，如果很難找到底線素材的話，以下這幾個比較特殊的底線圖，來源是「CSS語法之在文字加底線的效果」。由於原圖並非透明圖，我用 PhotoImpact 改成了透明圖，並且高度調為 22px，有需要可自行取用。當然，建議放在自己的空間比較保險，免得某天變成叉燒包了喔：
另外再列出幾個之前搜尋底線圖案時找到的網頁：
以上這幾個網頁的底線並非全是透明圖檔，因此不一定能符合每個網頁的背景顏色，可能得自己加工製作成透明圖，才能放心使用喔！
CSS 技巧相關文章：
1. Getting HTML 5 styles in IE 7+
2. CSS語法之在文字加底線的效果
這個Xuite也可以用嗎??
回覆刪除看起來挺不錯的~
問個笨問題...
回覆刪除目前xuite相簿沒有辦法直接對應到圖片的位置~
所以我想使用picasa...不過看起來有一樣的問題~
看你的圖片點出來是picasa的圖示~
但卻可以直接連到相對應圖片的位置~
這是怎麼做到的...(一整個找不到可以放圖片的空間)
另外~有沒有辦法知道自己網誌預設的行高是多少~
試了一下...若直接使用我文字的行高就跟之前不太一樣了
<4489709801758890760>(以上內容請勿刪除,從括號之後開始留言)感謝你耶^^
回覆刪除我又回來這篇了
回覆刪除因為剛剛幫你把這篇推銷給一個網友XD
突然想到要問你如何看行高
因為之前有想過要在大字底下線...
結果就變成一個框框了XD
想說我總不能每次換個大小就來麻煩你~還是請你指導一下囉
謝謝^^
我的line-height設置是用180%....... :/
回覆刪除這要如何得知px是多少？（苦惱）
幾年前曾經詢問網友文字底線的語法，後來網誌版型更改就懶得再增加該語法了。其實沒有線，文章也滿清爽的啦。
回覆刪除用起來覺得好可愛喔!
回覆刪除謝謝!
感謝清楚明瞭的教學，試了以後可以使用但是除了底線字的上方也有一條線，
回覆刪除如圖：http://ppt.cc/PJw0 請問要怎麼處理呢？這是行高問題嗎？謝謝！
您好，回應這問題有點久了。
回覆刪除和您分享一下4F,5F的問題。
我使用 mac電腦，語法完全按照您的「呼叫」語法，行高也設22px，暫時照抄測試效果。
在MAC下，只有firefox for mac才會出現底線變上下兩行成為一個框。
在safari和chrome for MAC 效果良好沒問題。就是一條底線。
更詭異的是使用在parallels Desktop模擬下，
跑ie,firefox,chrome for windows
效果都是良好
我在想，四樓五樓是不是瀏覽器方面做了什麼設定（但是我找不到這類設定）
和您分享一下我測試的成果
<2517364974598147704>(以上內容請勿刪除,從括號之後開始留言)
回覆刪除我試過您的方法了，但是
background-repeat: repeat no-repeat;寫上沒有效果，
可能是因為我這個firefox是mac版的，怪怪的。
但您的概念是正確的而且很棒，不要讓y軸重複。
我在bottom前面加上repeat no-repeat，一切都解決了。
真的很感謝您的回復。