色彩繽紛的重點底線

以前剛開始在做Drupal網站，
鐵定會逛到Drupal Taiwan站長花水木的網站
在他的網站上第一次看到這種重點底線
原以為這是一種編輯工具
害我翻騙了Drupal module 的各種Editor
還是找不到這是怎麼用的!!

就在昨天為本blog更新theme時
忽然看到有大大貼文~~
實在是太感動了....
廢話不多說!!立刻開始時做吧


重點只有兩個
(1) 取得底線圖檔
跟我原本想的不一樣~原來這個底線並不是用html 語法做出來的，而是先有圖檔!!
所以這邊要先製作圖檔
製作的方式用任意插圖軟體劃線!並記得設定背景為透明
製作範例:



(2) 將圖檔放到網路上可以讀取的地方
把圖片上傳至任一免空或是您有自己的FTP都可以(FTP的話請放置在公開的資料夾)
因為我有申請google apps 所以有google協作平台可以用
其實大家都有免費的10G 協作平台可以申請~
申請方式: http://steachs.com/archives/587

(3) 稍具修改 html 的能力
進到 Blogger 的後台，不會進去就參考這裡【如何修改 Blogger 板型】，選取【版面配置】或【設計】，然後點選【修改HTML】，記得先下載備份完整範本。

然後在「修改範本」中找到【body{…}】，在其前面加上一段程式碼。

其中 【PINK_UNDER】就是關鍵字，可以自訂，這裡的大小寫必須完全正確，也就是說後面引用的時候，必須跟這裡所定義的大小寫一模一樣。

【http://…】所跟著的網址要指到底線圖檔所擺放的網路空間。

.PINK_UNDER {
text-decoration: none;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh4Pn2kcdSLh6zjT4lEDniVmH4Gja_n4vmK7wOD0tefee4U-7f3Eaczxg5FWHc81cCcymDrQi8oNiuDWCOnj2jWKTfwWWmqI_9CYool8lssdouF7PFjMmjX7UMadbzQ3y-4GCquiRan371P/) repeat-x 100% 100%;
padding-bottom: 0px;
}

記得要按【儲存範本】

(4) 使用方式
以後在文章中遇到想要要加底線的文字，必須切換到 HTML 格式，然後在其文字前面加上，並在其文字後面加上。挺麻煩的，但這是我目前所知道的方法。

比如說這段文字的【粉紅色底線】要加底線，就要寫成

比如說這段文字的【粉紅色底線】要加底線


看看以下範例:
各種顏色底線:
藍色底線
黃色底線
紅色底線
粉紅色底線
綠色底線
咖啡色底線
紫色底線

兩種顏色圈圈:
紅色圈圈
黃色圈圈

Ref: Blog語法研究室