不知道這要叫什麼，就稱做「文字圖飾」吧！所謂「文字圖飾」指的就是像我的文章中，會有「黃色底線」、紅色小圈圈等等，讓文章感覺起來比較活潑。
其實我必須說這也是我在別人的Blog看到的效果，我只是照抄回來而已。其中一種是從Jas9 Taipei那邊學來的。因為印象中好像有看過某個地方討論這個東西，而且我又是直接竊取別人的idea，所以就沒有特地發文介紹這個用法了。
其實懂Html跟Css的話，稍微去看原始碼，就會知道這真的沒什麼，很簡單就能達到，而效果又還不錯。主要就是在內文把要有效果的文字span起來，設定class，再在css裡面設定這個class的底圖，然後設定位置等等，很容易。以下是我的做法，以這種黃線和這種紅圈圈為例。
- 下載圖檔
underline_yhl.gif
underline_cyc.gif
underline_del.gif
underline_hl.gif - 在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;
} - 用WP-AddQuicktag這個外掛，設定編輯文章時的QuickTag，設定畫面如下。［點圖放大］
- 在編輯文章的時候，把想要有黃色底線的文字選起來，點QuickTag，如下圖［點圖放大］。
- 基本上就大功告成囉！
UPDATE:可用Arno Ruan說的這個版本
「文字圖飾」應該算是很簡單、漂亮但有點麻煩的東西，不過搭配上Wordpress方便的外掛，其實就變得很容易。
UPDATE:新增兩種圖示下載：刪除線和黃底線。黃底線好像是Jas9做的，所以本來不太想放。會再找機會去問他。
UPDATE:寫了更詳細的一篇：[WP] 文字加蠟筆線或圈圈：文字圖飾
Tags: 網頁設計
感謝Hana啦XD~~~~~~~~~~~
唉唷~ 我沒有怪啦XD~ 我也知道你們很忙阿XD~
(其實第一時間我以為是你們換的域名以後就寄錯地方了 :p )
謝謝 :p ~ 我想跟花水木交換MSN><~~~~~~~~XD
這用在 <strong> 和 <em> 上似乎也不錯
這樣即使樣式拿掉，強調的作用依然存在 XD
不過我很討厭一般瀏覽器預設顯示 <em> 的方式就是了…
因為中文斜體沒有英文好看 0rz
這個技巧很棒呢!!
真的能夠讓文章內文看起來更加豐富有趣
又學到一招新的了 XD
感謝您的分享～：D
請問一下
我安裝addquicktag這個插件之後
發表文章在html的地方沒有出現我新增的code耶
反而只有在「網誌分頁」那邊才有出現~
不知道還要更改什麼設定嗎??
我的情況是要先"儲存"過才會出現…
有點麻煩哦:p
很少看到女生寫程式,而且又那麼美的說..
這個功能很受用,謝謝囉..
我想使用這個外掛
但是我已經都照你的話做了
卻還是無法看到效果呢?
可能是哪裡出問題
目前wordpress是2.3.3
感謝壓
我已經弄好了!
喔..姊姊
我已經弄好了
可是我不懂Selector是什麼?
忘記問你哪些重點線的圖示
可以去哪些地方download?
給樓上，大括弧前的 .entry-content .yhl 這類東西
就是一種 selector
話說我剛好有寫過一篇 關於 selector 的教學 XD
開頭那三個應該可以說是最常用的 selector 了 ^^
至於那些線，其實你可以試著用搜尋引擎找找看
例如我搜尋 "線條素材" 就可以找到一堆 XD
也可以找找看 "分隔線素材" "水平線素材" 之類的…
如果會用的話，也可以自己用繪圖軟體畫一個 XD
有些繪圖軟體可以畫出蠟筆或其他筆的筆跡…
感謝風痕影壓!!
花姊姊您好~想請花姊姊幫忙^^
在花姊姊的文章中有提到在css加入這些.entry-content裡面。
因為小弟是電腦白痴，
這部份就只好把所有佈景中有的CSS都加上去了，
但是文字飾圖的效果還是出不來>"<
想說可能是我圖檔位置放錯嚕，所以就把兩個圖檔複製好幾份，
放進各資料夾根目錄 EX:WWW下、THEMES
但還是失敗嚕ˊˋ
小弟用的WP版本是2.6的，花姊姊能提示小弟哪邊該注意嗎@@
先謝謝花姊姊了 PS:那個…妳很漂亮!!!
那個那個…下載下來的圖要傳到哪個資料夾呢？
（這個問題好像有點呆>///<）
每次都忘了要到這篇提供一下~
可以用這版的AddQuicktag 1.5.3跟花姊的版本不同~
http://bueltge.de/wp-addquicktags-de-plugin/120/
解決以下狀況!!!每次新增文章時就是正常出現了。^_^
嗯!這可能是bug吧!
我的情況是要先”儲存”過才會出現…
有點麻煩哦:p
謝謝 Arno Ruan提供!
[...] 8. icons – b-quote / 花水木的蠟筆底線 & 圈圈 [...]
您好，
我使用Amo Ruan說的AddQuicktag 1.5.3，然後在style.css裡面加入您文章所提到的兩個css內容。我把影像檔案，傳到/wp-content/themes/我的預設theme資料夾之下，但是仍然沒有看到這個效果
不知道是出了什麼問題…
數位&類比…
views: 552 times 最近工作事多繁忙. 找點時間來分享一下小小心得.視覺設計是我最不在行的一個專業, k 再多書也沒用的…. 所以我只能用 user 的角度來看這件事. 話說天下大勢, 合久必分, 分久必…
花妹妹, 文章借一下你美美的文字裝飾圖囉, 謝謝! 也歡迎有空來逛逛!
我好像来过你的博客了。不过既然来了。给你留点东西吧 (*^__^*) 嘻嘻……
[...] My News *但我現在也沒在用igoogle了 2008/04/03 解決Firefox字型跑掉問題 2008/03/16 文章中的文字圖飾 2008/03/15 內文截斷不完全造成版面走位 2008/04/17 Hinet 的 1GB 網路保管箱 [...]
很好用的功能,已經裝好了!
我的是用WP 2.7.1,但我是用ADDQUICKTAG 1.5.8,
[...] 經詢問後才知道原著是花水木SOHO到澳洲, 照著原文中的說明, 再加上自己的摸索後終於設定完成, 從今天起, [...]
你好…我try了很多您上面所說的方式…還是沒有成功耶…您可以幫忙看看嗎..?
我已經將兩個圖按下載…
然後將兩個 css 語言 copy 再貼在我的 nggallery.css 的最後面…!!
不過,還是沒有成功耶..??
請您告訴我哪裡錯了…thanks
请问下载的图片放到哪个文件夹里才能被调用到？