[教學]讓網頁文字使用各種底線圖案__(1) 安裝與使用 (CSS 技巧)

以文字內容為主的部落格，先天上吸引目光的能力已經輸旅遊、美食、攝影等以圖片為主的部落格一大截，如果整篇文章都是密密麻麻的文字，那麼再有深度的內容，也會如同嚴肅的講課內容一般，讓人昏昏欲睡。

幫純文字上色、讓文章的可看性加點分大致有兩個途徑，一個是改變標題、關鍵字的顏色，另一個就是本篇的主題──幫重點文字加上各種不同的底色圖案。以下為尋找最佳方案的過程，想直接看安裝方法請直接跳「四、安裝方式」。


一、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語法之在文字加底線的效果