嘉嘉的祕密花園

《留言與回覆區字體變漂亮訣竅的四個要件！》

今天是102年的最後一天了，除了祝大家新年快樂外，我想要送大家一份新年禮物，就是告訴大家讓留言與回覆區字體變漂亮訣竅的四個要件。

你一定會說為什麼在保持距離，以策安全(續)的文章裡沒有提到那四個要件？那時我確實不知道，都是請朋友幫忙改的，而我自己則看過一遍，好奇為什麼要如此改法，而請問朋友，他才告訴我這四個要件，於是我就學會了，也能幫人改了。

這兩天改了幾位格友的程式碼，因而見到了不同的程式碼，但總歸一句：萬事不離規矩，只要把握相關原則，任你再不同，也是可以改的。

再重複一次如何進到CSS原始碼編輯畫面：1.點部落格抬頭的管理後台→2.左邊部落格管理往下拉到最後選擇樣式管理→3.選擇自訂樣式→4.選擇第三項CSS原始碼編輯按前往→5.改好後先按右下方的預覽鍵看看，滿意的話先關閉預覽畫面，回到CSS原始碼編輯畫面，再按預覽鍵右邊的儲存鍵儲存才會生效，就算改錯了，再修正回來按確定就可以了。

進入了原始碼以後找到.post-text{}和.reply-text{}，這兩項是緊跟著的，中文意思就是留言文字區和回覆文字區。而括弧{}裡面的程式碼就有字體設定的條件，只要在括弧{}內的任何位置加上或修改四個要件：letter-spacing(字間)、line-height(行高)、font-size(字體大小)、font-family(字型)就ok了。

因為我的版型與別人不同，之前已改了原來的字型與字體大小，條件充足，之後再於括弧{}內的任何位置加上letter-spacing:3px;就ok。但是有的版型的程式碼缺了某些要件，是不是就不能改了，不是的，只要把所缺乏的要件插入其中，就ok了。

要改留言區(.post-text{})或回覆區(reply-text{})，括弧{}內如果沒有letter-spacing，要自行在括弧{}內任何位置插入。如果沒有line-height，要自行在括弧{}內任何位置插入。如果沒有font-size，就要自行在括弧{}內任何位置插入。如果沒有font-family，就要自行在括弧{}內任何位置插入，原始碼設定的字型是細明體。上述四個要件程式碼，我是儘量在括弧{}內的第一行就插入，以備修改時較容易記住位置，四個要件我是設定如下：letter-spacing:3pt;、line-height:160%;、font-size:16px;、font-family:標楷體。(※上述前三個要件碼裡的數字可以隨個人滿意與否進行修改)

在從未改過任何原始碼的人來說，先看.post-text{}與.reply-text{}括弧{}內有沒有line-height:160%;，沒有就要加上。痞克邦留言字元一向太小，所以一定要加入font-size:16px;，如果已有就不用了。想用標楷體的只要在font-family:後面的英文字改成標楷體就可以了，選擇細明體的人則不動。原始碼原設定沒有letter-spacing，所以必須要加入。

反正無論括弧{}內是何東東，都不用去管他，只要有先決的四個要件─letter-spacing:、line-height:、font-size:、font-family:，每個要件先要有冒號:，設定數字後，再於尾端加上分號;，就ok了。

對自己沒有把握的人，可以先將原有程式碼複製另存新檔出來修改，改好再貼回原始碼覆蓋按儲存，進部落格看看如果滿意就ok了。如果不滿意或不想改，就將之前儲存的原始碼貼回去就可以了。

這篇文章雖然算是老太婆的裹腳布又臭又長，但面對的是某一些有一點年紀的人，我還是很小心很完整的述說，以期大家能自己動手改正，送給自己一份新年禮物，知道自己也是很棒的喔！

另外，有的人是.post-text{}，也有的人是li post-text{}，兩者都沒有差，重要的是post-text{}這一段。還有不要輕易去改變原有不想動的程式碼，例如多按一個倒退鍵縮小距離或多按一個空白鍵放大距離，或者連在一起沒有按enter到下一行，總之，不要亂動這麻煩的小東西，他就會乖乖順從的任你擺佈了。

以下是設定案例(藍字是修改或增加的程式碼，紅字是原來的程式碼)：

 .post-text {

line-height:160%;

font-size:16px;

font-family:標楷體;

letter-spacing :3pt;

padding:1px 3px 2px 3px;

width:430px;

color:#1b1b1b;

 }

.reply-text {

line-height:160%;

font-size:16px;

font-family:標楷體;

letter-spacing :3pt;

clear:both;

width:430px;

color:#db0560;

padding:6px 3px 3px 3px;

}

雖然CSS程式碼多半是要隔行設定，但也有例外的。我曾幫一位格友設定，他的程式碼.post-text {}和.reply-text {}括弧內的程式碼都是一行橫式，我便隨著他的格式把這些設定插入，所以結果不會和一般人一行行的設定一樣，就成功了，因為他是帳號密碼交給我，所以我就能立即實驗操作成功。他的實例是這樣的：

.post-text{line-height:160%;font-size:15px; width:80%; color:#888;letter-spacing :3pt;}

.reply-text {line-height:160%;font-size:15px; background:#929292; border:1px solid #ccc; color:#fff; margin:10px 0 0 100px; padding:10px 15px; width:80%;letter-spacing :3pt; }