css 對於資深的部落客而言,如何修改痞客邦部落格文字大小和顏色一點都不難,但是對於不很懂HTML,CSS語法的普羅大眾而言,有時候為了一個小小的文章文字大小的修改,而不得其門而入的時候,真的....心情非常的不好。

剛有部落格的時候,看到後台那麼多美美的版型時,每個人都會有想要試一試的衝動,然後,好不容易選了一個自己比較滿意的版型套用後,突然發現有那麼一點點的不完美,比如文章標題的大小好像小了一點,文章的間距好像不夠大或是太大,看起來不太舒服,怎麼我的文章字的顏色或是連結的字顏色是這樣,有一點不搭….。

最後找到客服中心,但大多數總是無法得到滿意的解答,不得已祭出[Google]大神,打上[痞客邦部落格文字大小修改],嘿,資料還真是不少,一一查看後,非常的失望,怎麼全都是[無名,Yahoo]部落格的文章修改法,要不就是基礎HTML,CSS的教學,真的真的,對我沒有一點點幫助,我要是會CSS,早就去設計版型賺錢了。

當然不能不說也有一部分網路的資料還是有用的,但有一些我只記下了如何使用,已經忘了出處,一些是我自己摸索出來的。大家可以一起討論討論。

Q1. 修改部落格文字大小及顏色

最簡單的方法就是-進入部落格後台-樣式管理-自訂樣式-選擇[自訂樣式進階版]

這裡可以修改包括[部落格上方]標題,描述的文字大小,背景及顏色,[側欄]文字顏色及背景 。[文章區塊] 文字顏色(不含大小) ,日期文字顏色,標題文字顏色大小及超連結的顏色。

在這裡基本上可以滿足一般的要求,但卻也有一些是我想要而沒有的設定。

比如。

Q2: [文章區塊]文字大小的調整,行與行的間距...

A2: 進入部落格後台-自訂樣式-CSS自訂原始碼,找到  .article-content

.article-content {
font-size:12pt;

line-height:160%;
_height:1%;
overflow:hidden;
_overflow:none;
margin-top:10px;
}

font-size:12pt;    <- 這個就是調整文章大小的設定,一般訂在12-16 pt
line-height:160%; <-這個是調整文章行與行的間距,160%表示為文字大小的1.6倍

Q3. [文章區塊] 標籤文字的大小及顏色。(標籤是最近痞客邦新加入的功能)

問過客服中心的問題

我的文章的文字標籤過大,比本文文字還大,請問如何修改 CSS 到我需要的大小?

得到的答案:

親愛的會員您好: 感謝您的來信,為您說明:
如您想要以CSS來修改您的文章標籤顯示大小,請您的諒解,在站內每位會員需求及使用習慣不同的狀態下,痞客邦現階段未有對於CSS語法進行教學、修改的支持,建議會員不吝選擇其他文章標籤大小符合您需求的樣式進行預覽套用,或親自至網路上搜尋相關的協助服務、教學,以取得可符合您的需求的相關資訊。

A3:不過我還是找到了答案: 自己加到CSS原始碼編輯裡。

.article-keyword {
font-size:14px; }

文章最後帶出的文字標簽的大小,14px 卻比文章本文12pt小,自己試試就知道。

Q4:超連結的顏色(比如我的超連結文字是黑色,滑鼠點擊後變為藍色)

影像 2

為了這個,花了很多時間了解。

Q4.1: 原本都是使用WLW編輯文章後,再到痞客邦部落格文章編輯修改連結文字的顏色,但有一個問題,經過文章編輯改變了文字顏色後,當滑鼠再點擊該文字串時,文字就不會再變色哦。所以要保持連結文字滑鼠經過時會變色,就不要在文章編輯時再去改連結文字的顏色。

Q4.2. 經過上面在[自訂樣式進階版]修改連結文字的顏色後,預覽沒有問題,但實際使用時連結文字卻不會變色。後來找了好久,才知道。

A4:修改超連結顏色後會產生以下CSS碼

#header h1 a:link,#header h1 a:visited,#header h1 a:hover,#header h1 a:active,#content a,#content a:link,#content a:visited ,#links a,#links a:link {
color:#000;  <- 為我選擇的黑色
}

修改超連結顏色(滑鼠經過時)後會產生以下CSS碼

#content a:hover,#content a:active {
color:#30f;  <- 為我選擇的藍色
}

當你一直在更改上面兩個連結顏色時,選擇儲存就會一直新增你的設定,CSS碼好像是不會覆蓋,而是一直新增,到某一個期限後,就無法再修改了。碰到這種事情,就是到CSS原始碼區,把上兩列那一大串字串全部刪除,除存後再到[自訂樣式進階版]修改連結文字的顏色一次後,儲存就OK了。

 

 

 

 

arrow
arrow

    幾米力 發表在 痞客邦 留言(6) 人氣()