金羽銀華

從換背景圖、調整版面佈置，到文字的偏好設定，距離打造專屬的噗浪佈景，又更進一步了。

今天，第三步，我們要來改變「浪上的噗」的外觀與易讀性，

請先套用「範例一」的完成語法，內容在 這篇文章

在改變浪上噗的外觀前，範例一的佈景長這樣：

加上浪上噗的語法設定後，它將會長這樣：

整個版面有沒有更協調呢？看起來更舒服、合搭了。

請在範例一的自訂CSS欄位最後面，加上 [ 浪上的噗 ] 語法內容：

/*
    浪上的噗 範例一
*/

.plurk_cnt  
{
    font-size:12px;      /*字大小*/
    line-height:160%;      /*行距*/
    letter-spacing:0.06em;     /*字距*/
    padding:4px;     /*表格間距*/
    filter:alpha(opacity=80) !important;opacity:0.8 !important; zoom:1; /*透明度*/
    -moz-border-radius: 10px;    /*圓角*/
    -khtml-border-radius: 10;
    -webkit-border-top-left-radius: 10px;
    -webkit-border-top-right-radius: 10px;
    -webkit-border-bottom-right-radius: 10px;
    -webkit-border-bottom-left-radius: 10px;
    border-top: 1px solid #fff;      /*框線*/
    border-left: 1px solid #fff;
    border-right: 1px solid #eee;
    border-bottom: 1px solid #eee;
}

可以分幾個部份來貼上、一一檢視變化，或是更改其中的值，就可以瞭解各CSS項目的作用。

範例一單噗的樣子：

 

再來，我們來調整「範例二」試試。範例二的語法內容在 這篇文。

調整前，範例二的模樣：

 

調整後：

這邊我們多加了一些語法內容：

/*
    浪上的噗 範例二
*/

.plurk_cnt  
{
    font-size:12px;      /*字大小*/
    line-height:160%;      /*行距*/
    letter-spacing:0.06em;     /*字距*/
    padding:4px;     /*表格間距*/

    border-top: 1px solid #333;      /*框線*/
    border-left: 1px solid #444;
    border-right: 1px solid #111;
    border-bottom: 1px solid #222;
}

#timeline_holder .plurk_cnt,   /*噗整體底色*/
.plurk_cnt,
.plurk_box .list,
.list .plurk_cnt,
.list .plurk_cnt tr,
.plurk_box .mini_form,
td.td_cnt texture,
textarea#input_small
{
    background:#f0f0f0 !important;   /*換底色*/
}

.td_cnt .text_holder,   /*噗文字設定*/
#timeline_holder table td,
#timeline_holder .plurk_cnt
{
    color:#888 !important;  /*換字顏色*/
}

.plurk a.ex_link, .text_holder a.ex_link,    /*噗上的連結*/
.plurk a.ex_link:visited,
.plurk a.ex_link:active
{
    color:#991111 !important;
    text-decoration:none;
}
.plurk a.ex_link:hover, .text_holder a.ex_link:hover  /*滑鼠移至效果*/
{
    color:#111111 !important;
    text-decoration:underline !important;
}

.youtube:hover img,      /*影音圖片框線*/
.pictureservices:hover img
.video:hover img,
.pictureservices:hover img
{
    border:0px solid #ccc;    /*去除框線*/
}

白底黑字，在較暗環境中閱讀起來蠻吃力的，用近似書籍紙張的白(#f0f0f0)，來緩和一下。

文字則換成灰色。

將浪上的噗的連結文字設為暗紅色，跟其它的連結區分開來。並去掉影音圖片的連結框。

 

這些都是浪上的噗可以嘗試調整的基本項目。

 

經過調整後，範例二的單噗長這樣：

 

在「回應列表」中，有一些進階的方式，可以增進它的閱讀性，請按照需求來使用看看：

[ 1 ]  回應區加底線 

語法：.list .plurk_cnt  {border-bottom:1px solid #ccc !important;}

 

[ 2 ]  回應區加底色

語法：.list .plurk_cnt tr {background:#ccc !important;}

 

[ 3 ]  區別原噗者的回應

語法：

.list .highlight_owner .plurk_cnt tr  /*底色*/
{
    background:#CCFFFF !important;
}
.list .highlight_owner .td_cnt .text_holder    /*文字顏色*/
{
    color:#000 !important;
}

[ 4 ]  回應區換行 （因應暱稱太長而導致回應內容太短的狀況）

.list .plurk_cnt .td_qual  /*暱稱區*/
{  
    overflow:visible;
    position:absolute;
    width:auto;
}
.list .plurk_cnt .td_cnt .text_holder   /*內容區*/
{
    margin-left:1em;
    margin-top:2em;
    margin-bottom:1em;
    padding:0.5em;
    width:auto !important;
}

 

[ 5 ]  回應區加高（一次能夠閱讀多點回應噗、看清楚打字的內容）

/*
    回應區加高
*/

.plurk_box .list
{
    min-height:318px !important;   /*最小高度*/
}

 

/*
    輸入區加高
*/

td.td_cnt textarea,
textarea#input_small
{
    height:80px;
}

 

[ 6 ]  加大字體（字太小很吃力？在噗文字設定中加上一行語法即可）

.td_cnt .text_holder,   /*噗文字設定*/
#timeline_holder table td,
#timeline_holder .plurk_cnt
{
    color:#888 !important;
    font-size:15px !important;     /*加大字體*/
}

效果：

 

經過設計一二三、練習一二三的步驟，在版面佈置、文字設定和閱讀性上，我們已經有個最適合自己的噗樣式，

這是自己親手打造的樣子。

接下來，進一步研究CSS、產生符合自己使用習慣的噗版基本結構，做細節的調整吧～

可以參考我的常用CSS清單，持續研究並玩出噗版的樂子喔～