二月02
為部落格文章加上色彩繽紛的蠟筆重點底線

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

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

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

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

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

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

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

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

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

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

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

  • 其中 【PINK_UNDER】就是關鍵字,可以自訂,這裡的大小寫必須完全正確,也就是說後面引用的時候,必須跟這裡所定義的大小寫一模一樣。
  • 【http://…】後面所跟著的網址要指到底線圖檔所擺放的網路空間位址。

.PINK_UNDER {
text-decoration: none;
background: urlhttp://i607.photobucket.com/albums/t7/BlogScriptStudy/pink_underline.gif) repeat-x 100% 100%;
padding-bottom: 0px;
}

draw_underline01
記得要按【儲存範本】。

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

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

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

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

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

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

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


延伸閱讀:




本部落格提供免費電子書索取:
我如何開始寫部落格 寫部落格賺錢術 如何提昇部落格人氣

為部落格文章加上色彩繽紛的蠟筆重點底線 有 1 則回應

  1. erm 說道:

    超酷的改天來試試看

    又要準備開始改CCS了 (握拳)

    謝謝您的分享

發表迴響

你的電子郵件位址並不會被公開。 必要欄位標記為 *