《留言與回覆區字體變漂亮訣竅的四個要件!》
今天是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; }
留言列表