文章中的文字圖飾

  不知道這要叫什麼,就稱做「文字圖飾」吧!所謂「文字圖飾」指的就是像我的文章中,會有「黃色底線」、紅色小圈圈等等,讓文章感覺起來比較活潑。

  其實我必須說這也是我在別人的Blog看到的效果,我只是照抄回來而已。其中一種是從Jas9 Taipei那邊學來的。因為印象中好像有看過某個地方討論這個東西,而且我又是直接竊取別人的idea,所以就沒有特地發文介紹這個用法了。

  其實懂Html跟Css的話,稍微去看原始碼,就會知道這真的沒什麼很簡單就能達到,而效果又還不錯。主要就是在內文把要有效果的文字span起來,設定class,再在css裡面設定這個class的底圖,然後設定位置等等,很容易。以下是我的做法,以這種黃線這種紅圈圈為例。

  1. 下載圖檔

    underline_yhl.gif
    underline_cyc.gif
    underline_del.gif
    underline_hl.gif

  2. 在css加入這些。
    wordpress的內容都包在.entry-content裡面,若你的佈景比較特別、或是想用在wordpress以外的地方,可以自行調整Selector。

    .entry-content .yhl{
    text-decoration: none;
    background: url(underline_yhl.gif) repeat-x 120% 100%;
    padding:0 3px;
    padding-bottom: 3px;
    }

    .entry-content .cyc{
    text-decoration: none;
    white-space: nowrap;
    line-height:22px;
    padding:4px 2px 2px 2px;
    letter-spacing:0px;
    background:white url(underline_cyc.gif) repeat-x bottom;
    }

  3. WP-AddQuicktag這個外掛,設定編輯文章時的QuickTag,設定畫面如下。[點圖放大]
    080316_text-img-decoration.jpg
  4. UPDATE:可用Arno Ruan說的這個版本

  5. 在編輯文章的時候,把想要有黃色底線的文字選起來,點QuickTag,如下圖[點圖放大]。
    080316_quicktag.jpg
  6. 基本上就大功告成囉!

  「文字圖飾」應該算是很簡單、漂亮但有點麻煩的東西,不過搭配上Wordpress方便的外掛,其實就變得很容易。
  
UPDATE:新增兩種圖示下載:刪除線和黃底線。黃底線好像是Jas9做的,所以本來不太想放。會再找機會去問他。
UPDATE:寫了更詳細的一篇:[WP] 文字加蠟筆線或圈圈:文字圖飾

Related Posts Plugin for WordPress, Blogger...

站內相同標籤的文章