為部落格文章加上色彩繽紛的重點底線

https://blogger-script-study.blogspot.com/2010/06/put-underline-on-your-blog.html

瀏覽別人的部落格時，有時會看到有些部落格主會在某些文字底下劃上色彩繽紛的畫筆底線，讓人知道格主想要強調的重點在這裡，可是我的部落格怎麼沒有這些特效，到底這是怎麼做到的呢？

其實這一點都不難，只要你擁有下面幾項技能，那你也可以擁有這些特效，但也不是那麼容易啦，下面我們就來介紹一下如何擁有這些「色彩繽紛的重點底線」。

1) 取得底線的圖檔，也可以自己畫。

要 gif 格式喔，而且要設定底色為透明。這裡先提供一個粉紅色底線的圖檔，有需要的可以在這個圖示上面按滑鼠右鍵另存圖檔，也希望你可以自己畫出你自己的底線。

2) 將圖檔放到網路可以讀取的地方。

我是放在 Photobucket，這裡有 1 GBytes 的免費的圖檔放置空間，部落格文章可以直接連結，一個月的流量限制在 25 GBytes，不像 Google 的 Pisasa 限制只能用在自己的部落格，外連很難，而且還要讓自己部落格的文章連到Pisasa還要好幾個步驟。只可惜全是英文，但應該還難不倒你。

3) 稍具修改 Blogger 的 html 能力。

因為需要修改 Html 的模板，所以要稍微有點基礎。目前方法好像只適用在 Blogger 及 WordPess 這類可以自行修改模板的部落格平台上。

照例我們還是以 Blogger 為例，進到 Blogger 的後台，不會進去就參考這裡【如何修改 Blogger 板型】，選取【版面配置】或【設計】，然後點選【修改HTML】，記得先下載備份完整範本。

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

• 其中 【PINK_UNDER】就是關鍵字，可以自訂，這裡的大小寫必須完全正確，也就是說後面引用的時候，必須跟這裡所定義的大小寫一模一樣。
• 【https://…】後面所跟著的網址要指到底線圖檔所擺放的網路空間位址。建議你一定要將網址改成自己儲存圖檔的位置，否則這個網址不一定可以一直存在。

.PINK_UNDER { text-decoration: none; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgSfIKVS0zmTkgOAwox0J32CVONGkuTtze-0P3tfZuE7TCWLUspteMM3r77fxkkwP0W1HTcssYqtPHEx_HSbTGlPSBxGD5eN7z1kopvSgmQ1_FmudXfd19XnAuwaIQdhkVMnu_XN3iUka0/s1600/pink1_underline.gif) repeat-x 100% 100%; padding-bottom: 0px; }

記得要按【儲存範本】。

4) 以後在文章中遇到要加底線的文字，必須切換到 HTML 格式，然後在其文字前面加上<span class=”PINK_UNDER”>，並在其文字後面加上</span>。

挺麻煩的，但這是我目前所知道的方法。比如說這段文字的【粉紅色底線】要加底線，就要寫成：

比如說這段文字的【<span class="PINK_UNDER">粉紅色底線</span>】要加底線

接下來就看你自己如何發揮了，  如果你在操作上有任何問題，歡迎留言討論。

---

延伸閱讀： 回到 Blogger 部落格技巧總整理