close
剛寫完第六章,本來覺得已經沒有什麼好寫的了,不過今天是補班日,好像精神意志都把今天當做週六假日,實在...所以研究了一下自訂樣式的設定。

 

自訂樣式在那裡?在管理後台/部落格/樣式管理/自訂樣式點進去,便會發現三個選項自訂樣式簡易版自訂樣式進階版CSS原始碼編輯
 
M1
 
 
首先進入自訂樣式簡易版,選一個自己覺得順眼的樣式,然後便會進去粗略調整區,你可以試著調整各項欄位,也可以放入自己喜歡的圖片,設定好之後,可以預覽看看,滿意的話便按儲存,不過這不是我今天的重點...
 
M2
M3   

 

儲存好後,請進入自訂樣式進階版,可以看到好幾個欄位,分別是"整個部落格<BODY>"、"部落格最上面(#header)"、"側欄 (#links)"、"文章區塊設定
(#content)",各項位置都可以對應到你的部落格樣式,從各位可以自已調整各種欄位包括顏色、字體大小,粗體、斜體,再按預覽,看看效果,主要是顏色及字型大小,可以改變原本部落格的名稱/引言及文章標題大小,顏色,可以做點小小變化,個人是覺得還挺好玩的,反正便多按預覽,感覺不好便回復原本設定,等滿意了<各位也可以參考我自己這裡的一些選擇及設定>再按儲存便OK了。
 
M4  
 
M5M6    
 

最後重點來了,PIXNET讓人不太習慣,便是留言回應字體好小,但我感覺那是樣式問題,那理論上應該可以調整,所以我今天放大膽子進入最後一關

 

M7  

 

 CSS原始碼編輯,果然令人眼花撩亂,不過請往下找到以下文字...

 body {

 color:#666;

 font-size:12px;

 font-family:Helvetica, Arial, "LiHei Pro", PMingLiU, sans-serif;

 line-height:154%;

 background:url(http://pic.pimg.tw/pixnetvisual/8cd8de234be5e001a19dad1ee5aae534.jpg);

 background-image:url(http://pic.pimg.tw/pixnetvisual/8cd8de234be5e001a19dad1ee5aae534.jpg);

 background-color:#bff;

 background-position:undefined;

 margin:0;

 }

 

把其中

font-size:12px;  改成  font-size:16px;

font-family:Helvetica, Arial,"LiHei Pro", PMingLiU, sans-serif; 改成

font-family:Helvetica, 標楷體, "LiHei Pro", PMingLiU, sans-serif;

 

按儲存,接著回到你的pixnet文章留言回應欄,呵呵~~發生什麼事了,留言回應欄的字體放大了,而且變成標楷體,連側邊欄位,部落格標題文字都變化了,真是神奇啊...不過這是我的樣式的效果,我想各位應該也可以試試看,這PIXNET字體實在真小,傷眼啊  

這便是今天無聊補班日的大發現,剩下的我也不敢動了,等那天再無聊時,再來研究吧~~PIXNET真是太多值得研究啊,想想這便是許多高手在弄的CSS碼,那不曉得又有多少奧妙了,不過我想先把字體放大,也真是不錯呢~~

以下乃真正的研究文章,精華都在此了,請有興趣的人點進去

yyw0718 - 親愛的, 我把房子變大了

 

102.12.31 補註.post-text{}.reply-text{},留言文字區和回覆文字區。

{}裡面的程式碼就有字體設定的條件,letter-spacing(字間)line-height(行高)font-size(字體大小)font-family(字型)就ok了。要改留言區(.post-text{})或回覆區(reply-text{}),letter-spacing:3pt;line-height:160%;font-size:16px;font-family:標楷體。

arrow
arrow
    全站熱搜

    Ponylite的心世界 發表在 痞客邦 留言(28) 人氣()