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

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

因為這個方法需要修改部落格的css(樣式表)，可能並不是每個部落格平台都可以做到這樣的效果，目前工作熊試過Blogspot、Yam(天空部落)、Pixnet(痞客邦)…等部落格平台都可以達成，另外自設網站的WordPress也可以。

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

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

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

工作熊現在將圖檔放在Google相簿中，部落格文章可以直接連結。

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

因為需要修改 Html 的模板，所以要稍微有點基礎。目前方法好像只適用在 Blogger、Yam(天空部落)、Pixnet(痞客邦) 及 WordPress 這類可以自行修改模板的部落格平台上。

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

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

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

.PINK_UNDER {
text-decoration: none;
background: url(https://1.bp.blogspot.com/–z6qqJDWEo4/XkO0AxN8VaI/AAAAAAAAkGo/4KvMjrxuHm8d-FlpmvZH0qsP3mUsvLJaACLcBGAsYHQ/s1600/pink1_underline.gif) repeat-x 100% 100%;
padding-bottom: 0px;
}

記得要按【儲存範本】。

如果是Pixnet(痞客邦)，進入後台後點選【樣式管理】》【自訂樣式】，在末尾加入程式碼就可以了。

如果是Yam(天空部落)，進入後台後點選【樣板設定】》【編輯 CSS 檔】，在末尾加入程式碼就可以了。

如果是WordPress，則只要開啟style.css，在末尾加入程式碼就可以了。

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

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

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

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

延伸閱讀：
添加日曆圖示到WordPress部落格
WordPress部落格的佈景主題可以更換嗎？有免費的佈景嗎？