2012年7月17日

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

A+

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

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


一、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 下只要底線超過一行就會被截斷,想要使用超過一行的底線只得分段使用;所幸最終「Fun New Run High」 留言區 Mrs.9 找到了跨瀏覽器的解決方法。

綜合以上以及自己的使用心得,將製作底線圖案的所有要點整理如下:

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. 就是要不一樣! 幫文字段落加上獨樹一格的底線──留言區 Mrs.9 留言
3. CSS語法之在文字加底線的效果

22 則留言:

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

    回覆刪除
  2. <7741913068800823983>(以上內容請勿刪除,從括號之後開始留言)
    支援 javascript 的平台應該都可以~~因為我找到的參考資料,很多都不是 Blogger 平台。

    另外,可以從我的標題看出端倪,如果是 Blogger 相關的文章,標題會有 Blogger ^ ^

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

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

    回覆刪除
  4. <4696450071326065750>(以上內容請勿刪除,從括號之後開始留言)
    Picasa 是可以找到連結啦,但是說到 Picasa 的操作...被我嫌的部分都可以寫出一篇文章來了。要快速得到相簿所有連結可研究一下「這個網頁」,順便讀一下我跟作者的留言才能正確抓到圖片網址。

    不過現在我都用比較快的偷吃步方法,妳得先開一個全新的 Blogger,完全不用任何設定,直接開一篇新文章,直接上傳圖片,會自動存在你的 Picasa 相簿,妳就可以從文章內看到圖片的連結網址(記得使用網址名稱內有 s1600 那一個才是原始圖片)。

    另外,我看了妳的網誌,行高是 20px,果然不一樣,所以妳得另外製作高度 20px 的圖片。不過應該還好,因為我處理過的 png 檔很容易就能複製過去。以上說明如果不清楚請再告知了~~

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

    回覆刪除
  6. <4079335612103419900>(以上內容請勿刪除,從括號之後開始留言)
    不客氣 ^ ^

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

    回覆刪除
  8. <3150028453964065691>(以上內容請勿刪除,從括號之後開始留言)
    這個操作有點複雜說,因為要利用瀏覽器的工具來看,不如妳給個網址,告訴我要查哪些字的行高,我再看看怎麼跟你說明查行高的步驟。

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

    回覆刪除
  10. <3008608615786977853>(以上內容請勿刪除,從括號之後開始留言)
    看來這個問題不少人都有..而且我發現我自己的值是 1.4em, 的確不一定能查到 px 值, 我這一兩天來寫個專文解決這個問題好了~~

    回覆刪除
  11. <3150028453964065691>(以上內容請勿刪除,從括號之後開始留言)
    hi, Hermione, 不用給我網址了, 從【留言 #05】廣告小妹的問題,我發現從網頁原始碼去看你要查的大字區塊,也不一定能查到 px值,所以我會另尋他法了~~

    回覆刪除
  12. <3008608615786977853>(以上內容請勿刪除,從括號之後開始留言)
    hello, 4F & 5F, 已經發了系列文「第二篇」, 內容就是找出行高的簡易方法了。

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

    回覆刪除
  14. <6110490484957991317>(以上內容請勿刪除,從括號之後開始留言)
    沒用底線,把字體加粗、上色也有好效果;某些部落格的形態,使用底線會顯得更活潑,看部落格的定位囉~

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

    回覆刪除
  16. <2700895971493133334>(以上內容請勿刪除,從括號之後開始留言)不客氣~^^

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

    回覆刪除
  18. <3839250412623604886>(以上內容請勿刪除,從括號之後開始留言)是的,請參考系列文第二篇。

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

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

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

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

    回覆刪除
  20. <390256310334911853>(以上內容請勿刪除,從括號之後開始留言)你好,這篇文章好久遠了啊~~不過也讓我看到之前的 CSS 功力有多麼淺~~XD

    現在回頭看,「底線會出現上下兩行」這個狀況很好解決,我已經更新了「四、安裝方式」→「2. 安裝方式」這裡的程式碼,主要就是讓 Y 軸的背景不會 repeat,就不會有這個情形了,可以試試看 ^^

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

    回覆刪除
  22. <5217194654533529487>(以上內容請勿刪除,從括號之後開始留言)由於 CSS 語法不斷在更新,不同平台、不同瀏覽器版本,對 CSS 的支援度不一,這是正常的,也許有些舊瀏覽器版本不吃 background-repeat 這個語法,那麼得用比較舊的語法。

    感謝您的測試,既然 background 可以使用參數 repeat no-repeat,那麼我將本文程式碼改成您的版本了 :D

    回覆刪除

張貼留言注意事項:

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