2012年7月17日

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

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

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

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


一、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語法之在文字加底線的效果
0 0
如這篇文章對你有幫助,歡迎「分享」到 FB、「追蹤」粉絲團、「訂閱」最新文章

10 則留言:

  1. 這個Xuite也可以用嗎??
    看起來挺不錯的~

    回覆刪除
  2. 問個笨問題...
    目前xuite相簿沒有辦法直接對應到圖片的位置~
    所以我想使用picasa...不過看起來有一樣的問題~
    看你的圖片點出來是picasa的圖示~
    但卻可以直接連到相對應圖片的位置~
    這是怎麼做到的...(一整個找不到可以放圖片的空間)

    另外~有沒有辦法知道自己網誌預設的行高是多少~
    試了一下...若直接使用我文字的行高就跟之前不太一樣了

    回覆刪除
  3. <4489709801758890760>(以上內容請勿刪除,從括號之後開始留言)感謝你耶^^

    回覆刪除
  4. 我又回來這篇了
    因為剛剛幫你把這篇推銷給一個網友XD
    突然想到要問你如何看行高
    因為之前有想過要在大字底下線...
    結果就變成一個框框了XD
    想說我總不能每次換個大小就來麻煩你~還是請你指導一下囉
    謝謝^^

    回覆刪除
  5. 我的line-height設置是用180%....... :/
    這要如何得知px是多少?(苦惱)

    回覆刪除
  6. 幾年前曾經詢問網友文字底線的語法,後來網誌版型更改就懶得再增加該語法了。其實沒有線,文章也滿清爽的啦。

    回覆刪除
  7. 用起來覺得好可愛喔!
    謝謝!

    回覆刪除
  8. 感謝清楚明瞭的教學,試了以後可以使用但是除了底線字的上方也有一條線,
    如圖:http://ppt.cc/PJw0 請問要怎麼處理呢?這是行高問題嗎?謝謝!

    回覆刪除
  9. 您好,回應這問題有點久了。
    和您分享一下4F,5F的問題。

    我使用 mac電腦,語法完全按照您的「呼叫」語法,行高也設22px,暫時照抄測試效果。
    在MAC下,只有firefox for mac才會出現底線變上下兩行成為一個框。
    在safari和chrome for MAC 效果良好沒問題。就是一條底線。

    更詭異的是使用在parallels Desktop模擬下,
    跑ie,firefox,chrome for windows
    效果都是良好

    我在想,四樓五樓是不是瀏覽器方面做了什麼設定(但是我找不到這類設定)
    和您分享一下我測試的成果

    回覆刪除
  10. <2517364974598147704>(以上內容請勿刪除,從括號之後開始留言)
    我試過您的方法了,但是
    background-repeat: repeat no-repeat;寫上沒有效果,
    可能是因為我這個firefox是mac版的,怪怪的。
    但您的概念是正確的而且很棒,不要讓y軸重複。
    我在bottom前面加上repeat no-repeat,一切都解決了。
    真的很感謝您的回復。

    回覆刪除

張貼留言注意事項:

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

TOP