暗戀。桃花源

之前寫過「文章中的文字圖飾」教學之後，發現許多人有問題。我想是我講的不夠清楚，所以我打算重新整理一下，更詳細地說明。

因為最近想學寫程式，發現很多程式設計師的部落格內容，我都看不懂，因為我沒有基礎。所以有個體認就是，沒有網頁設計基礎的朋友看了我那種鳥教學，應該也很難懂吧！

所以為了讓大家都看得懂，我再整理一次哦！

在製作之前，你需要得到或知道的東西有：

1.這些圖：
到這邊可以下載到：文章中的文字圖飾(有更新過了)

2.這些圖要放哪：
這個牽涉到你的佈景和習慣。以K2為例，我是放在跟css檔案同一層目錄。因此css原始碼可以直接打檔名。

3.你的wordpress佈景內文class：
牽涉到你用的佈景。你可以看一下原始碼，找出被內文包住的那個div的class是什麼，比方說K2的是包在entry-content裡面。有了這個，才知道CSS的Selector要寫什麼。

4.你的佈景讀取的CSS檔案：
一般都是佈景資料夾裡的style.css，不過KS有一個styles資料夾，裡面專放自訂的CSS。我的K2就是有在這裡新增一個hanamizuki資料夾，裡面有hanamizuki.css和所有相關圖片。

5.想好這些圖的名字和用法，比如說underline_del.gif是我要用在被del包住的，underline_hl.gif是我要用在hl這個class裡面的。當然想用在em也可以。

以上手續都準備好之後，就：

1.打開CSS檔，打這些東西。
這個範例是假設我是用K2佈景，然後圖檔是放在跟css檔同一個路徑，並且我要把underline_del.gif這個圖用在del標籤(就是一般的刪除線)，其他用在span的class分別是hl, yhl和yel三個地方。

.entry-content .hl{
line-height:22px;
padding:4px 2px 2px 0px;
letter-spacing:1px;
background:url(underline_hl.gif) repeat-x bottom;
}
.entry-content .yel{
line-height:22px;
padding:4px 2px 2px 0px;
letter-spacing:1px;
background:url(underline_yel.gif) repeat-x bottom;
}
.entry-content .yhl{
text-decoration: none;
background: url(underline_yhl.gif) repeat-x 120% 100%;
padding:0 3px;
padding-bottom: 3px;
}
.entry-content del{
text-decoration: none;
background: url(underline_del.gif) center repeat-x;
padding:4px 2px 2px 0px;
}

2.然後在打內文的時候，把你要加效果的字用span包起來，在span加上class=”hl或yel或yhl(三種效果)”，就會出現這三種效果，然後在你要刪除的字前後用del標籤包。像是這樣：
<span class="hl">這裡要有hl底線</span>
<span class="yel">這裡要有yel底線</span>
<span class="yhl">這裡要有yhl底線</span>
<del>要加刪除線的字</del>

用WP - AddQuicktag (Plugin)基本上會更方便哦！看「文章中的文字圖飾」的教學。

嗯！大致上是這樣。希望這樣有更清楚一點了！