文章中的文字圖飾

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

其實我必須說這也是我在別人的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。 <code lang="html"><br></br> .entry-content .yhl{<br></br> text-decoration: none;<br></br> background: url(underline_yhl.gif) repeat-x 120% 100%;<br></br> padding:0 3px;<br></br> padding-bottom: 3px;<br></br> }<br></br>

<code lang="html"><br></br>
.entry-content .cyc{<br></br>
text-decoration: none;<br></br>
white-space: nowrap;<br></br>
line-height:22px;<br></br>
padding:4px 2px 2px 2px;<br></br>
letter-spacing:0px;<br></br>
background:white url(underline_cyc.gif) repeat-x bottom;<br></br>
 }<br></br>```
3. **用[WP-AddQuicktag](http://roel.meurders.nl/wordpress-plugins/wp-addquicktag-plugin-for-adding-quicktags/)這個外掛，設定編輯文章時的QuickTag，設定畫面如下。**［點圖放大］  
[![080316_text-img-decoration.jpg](http://hanamizuki.tw/wp-content/gallery/hana/blogosphere/080316_text-img-decoration.jpg "080316_text-img-decoration.jpg")](http://hanamizuki.tw/wp-content/gallery/hana/blogosphere/080316_text-img-decoration.jpg "080316_text-img-decoration.jpg")
UPDATE:可用Arno Ruan說的[這個版本](http://bueltge.de/wp-addquicktags-de-plugin/120/)

5. **在編輯文章的時候，把想要有黃色底線的文字選起來，點QuickTag，如下圖［點圖放大］。**  
[![080316_quicktag.jpg](http://hanamizuki.tw/wp-content/gallery/hana/blogosphere/080316_quicktag.jpg "080316_quicktag.jpg")](http://hanamizuki.tw/wp-content/gallery/hana/blogosphere/080316_quicktag.jpg "080316_quicktag.jpg")
6. 基本上就大功告成囉！

　　「文字圖飾」應該算是<del datetime="2008-09-19T05:53:51+00:00">很簡單、</del>漂亮但有點麻煩的東西，不過搭配上Wordpress方便的外掛，其實就變得很容易。  
 　　  
 UPDATE:新增兩種圖示下載：刪除線和黃底線。黃底線好像是Jas9做的，所以本來不太想放。會再找機會去問他。  
 UPDATE:寫了更詳細的一篇：[[WP] 文字加蠟筆線或圈圈：文字圖飾](http://hanamitsuki.com/wordpress/text-img-decoration)