在瀏覽浪上的噗的時(shí)候，依據(jù)每個(gè)人偏好和習(xí)慣的不同，我們會(huì)希望噗的文字像部落格一樣能夠自訂字型和字距行距，讓我們閱讀和瀏覽噗的體驗(yàn)更愉快。

這是原本噗浪預(yù)設(shè)的浪上噗的樣子：

原本浪上的噗與展開(kāi)列表.jpg

很簡(jiǎn)潔緊湊，而展開(kāi)後的列表內(nèi)容字比浪上的噗要小一些。

希望字體能夠大一點(diǎn)，符合自己習(xí)慣的常用字型的話，可以加上以下語(yǔ)法來(lái)達(dá)成：

/*浪上噗字型*/ 
#timeline_holder .plurk_cnt, 
.list .plurk_cnt, 
.td_cnt .text_holder, 
div.content
{ 
font-family: 微軟正黑體 !important;
font-weight: normal !important;
font-size: 14px !important;
line-height: 1.8em !important;
letter-spacing: 0.14em !important;
color: #777 !important;
}
/*浪上噗內(nèi)容的連結(jié)*/ 
.plurk a.ex_link, .text_holder a.ex_link, 
.plurk a.ex_link:visited, .plurk a.ex_link:active, 
.plurk_content a.ex_link 
{
color: #365899 !important;
text-decoration: none !important;
background: none !important;
border: 0 !important;
}
/*滑鼠移至的連結(jié)*/ 
.plurk a.ex_link:hover, .text_holder a.ex_link:hover, 
.plurk_content a.ex_link:hover
{
color: #4d4d4d !important;
text-decoration: none !important;
background: none !important;
border-bottom: 0 !important;
}
/*浪上噗暱稱連結(jié)*/ 
.td_qual a
{
font-size: 14px !important;
font-weight: bold !important;
text-decoration: none !important;
color: #000 !important;
} 
.td_qual span a:hover { color: #000 !important; }

套用上段語(yǔ)法後的噗樣貌：

調(diào)整字型與連結(jié)設(shè)定後的浪上噗與列表.jpg

其中字型（font-family）可以換成新細(xì)明體或其他符合你瀏覽習(xí)慣的字型，字的顏色（color）以及字距（letter-spacing）、行距（line-height）及字大小（font-size）等都可自行調(diào)整。

在閱覽上，純白色的背景有時(shí)會(huì)太過(guò)刺眼，四四方方的邊角想要換成目前瀏覽經(jīng)驗(yàn)上使用較多的圓角，想調(diào)整浪上噗的背景色或背景透明度，以及改成圓角的話，可使用以下語(yǔ)法：

/*浪上噗背景*/ 
.plurk_cnt, .link_extend .plurk_cnt, 
.plurk_box .plurk_cnt, 
.response_box, 
.mini_form
{
background: rgba(255,255,255,0.7) !important;
border: 0 !important;
transition: background 0.8s ease;
} 
.plurk_box
{
background: rgba(255,255,255,0.01) !important;
border: 0 !important;
transition: background 0.8s ease;
}
/*浪上噗圓角*/ 
.plurk_cnt, .response_box, 
.plurk_box, .mini_form 
{
border-radius: 15px !important;
}
/*滑鼠移至的浪上噗*/ 
.plurk_cnt:hover
{
background: rgba(255,255,255,0.9) !important;
transition: background 0.7s ease;
border-radius: 15px !important;
}
/*展開(kāi)後的回應(yīng)區(qū)*/ 
.list .plurk_cnt 
{
background: none !important;
transition: background 0.8s ease;
border-radius: 15px !important;
} 
.list .plurk_cnt:hover 
{
background: rgba(255,255,255,0.9) !important;
transition: background 0.8s ease;
border-radius: 15px !important;
}

透明度調(diào)整後的樣子：

加上透明背景與圓角效果.jpg

語(yǔ)法中 rgba(255,255,255,0.7) 前三個(gè)數(shù)值是顏色，255,255,255 是白色，最後一個(gè)數(shù)值是透明度，0.7是70%透明，可以依照你的需求更正，圓角的弧度設(shè)定是 border-radius: 15px，也可以調(diào)成不那麼圓、僅僅稍微圓潤(rùn)稍作修飾的弧度，比如 border-radius: 5px。

浪上噗變圓角後，會(huì)發(fā)現(xiàn)噗友們的頭貼還是方方正正的不太搭配，可加上下段語(yǔ)法讓頭貼也變圓：

/*浪上的噗友圖*/
div.p_img /*去除圖片底框線*/ 
{ border: 0 !important; }
div.p_img img /*圖片*/ 
{
border: 0 !important;
padding: 0px;
background: none !important;
border-radius: 15px !important;
}

會(huì)發(fā)現(xiàn)圓潤(rùn)的頭貼比較順眼？現(xiàn)在好像大部分網(wǎng)站的代表圖都是圓的。

頭貼圓角

再來(lái)看未讀訊息的時(shí)候，會(huì)發(fā)現(xiàn)紅底白字的刺目設(shè)計(jì)需要稍作調(diào)整：

可以改成這樣：

已讀為灰色字無(wú)背景，未讀為黑底白字：

語(yǔ)法：

/*回應(yīng)數(shù)*/ 
.dots .inner { display : none !important; } 
.response_count
{
color: #777 !important;
background: none !important;
} 
.new .response_count 
{
background: rgba(0,0,0,0.9) !important;
border: 0 !important;
color: #fff !important;
border-radius: 15px;
padding: 3px 5px !important;
}

同樣的，可換你需要的背景和字顏色代碼。顏色代碼可參考這個(gè)網(wǎng)站：https://www.colorschemer.com/color-picker/

希望閱讀的空間能更寬裕，或有時(shí)噗友的暱稱太長(zhǎng)，導(dǎo)致文字內(nèi)容欄位會(huì)被壓縮得過(guò)小？可以用換行語(yǔ)法來(lái)解決：

/*噗列表?yè)Q行*/ 
.list .plurk_cnt .td_qual
{
position: absolute;
width: auto;
overflow: visible;
padding: 0.4em;
margin-left: 0.5em;
} 
.list .plurk_cnt .text_holder
{ 
margin-top: 1.5em;
padding: 0.4em;
margin-left: 0.4em;
width: auto !important;
}
/*浪上的噗換行*/ 
.block_cnt .plurk table { min-width: 322px !important; } 
.block_cnt .plurk_cnt .td_qual 
{ position: absolute; overflow: visible; padding: 0.2em 1em;} 
.block_cnt .plurk_cnt .text_holder 
{ margin-top: 1.5em; overflow: visible; padding: 0.7em 1.5em;} 
div.plurk .link_extend { z-index: 2200; } 
.block_cnt 
{ padding: 0px !important; width: 300px !important; height: 56px !important; } 
.block_cnt .div_inner, .div_bottom { max-height: 0px !important; }
/*調(diào)整噗浪寬度*/ 
.display table, .toggled table, .plurk_box table { width: 470px !important; } 
.display .text_holder,.toggled .text_holder, 
.plurk_box .input_holder, .list table { width: 100% !important; } 
.plurk .truncated, .text_holder { min-width: 322px !important; min-height: 20px; }

加上換行與調(diào)整寬度語(yǔ)法後的樣子：

換行設(shè)定喜歡與轉(zhuǎn)噗設(shè)定.jpg

再來(lái)做一些細(xì)節(jié)上的調(diào)整，像上圖列表中的「喜歡」和「轉(zhuǎn)噗」文字底色和顏色已有做了修正，語(yǔ)法：

/*喜歡與轉(zhuǎn)噗數(shù)字連結(jié)*/ 
div.favorite_count, /*喜歡*/ 
div.replurk_count /*轉(zhuǎn)噗*/
{
font-size: 12px;
font-weight: normal !important;
color: #000 !important;
background: none !important;
text-decoration: none !important;
}

每則噗的發(fā)噗時(shí)間，以及功能按鈕，也可用語(yǔ)法來(lái)調(diào)整：

/*發(fā)噗時(shí)間*/ 
.plurk .time a, .plurk .time a:hover
{
font-size: 12px;
font-weight: normal !important;
color: #000 !important;
background: none !important;
text-decoration: none !important;
letter-spacing: 0.12em !important;
padding-left: 1.2em !important;
}

/*功能列*/ 
div.manager a 
{
font-size: 12px !important; 
color: #000 !important;
} 
div.manager a:hover { background: none !important; color: #4d4d4d !important;} 
a.pif-volume.mute-off, 
a.pif-replurk.replurk-off::before, 
a.pif-replurk.replurk.replurk-on::before, 
a.pif-like.like.like-on::before, a.pif-bone.gift 
{ color: #000 !important; }

/*回應(yīng)列表每則噗的時(shí)間*/ 
.response-manager { background: none !important; border: 0 !important; } 
.response-manager:hover { background: none !important; } 
.response-manager .time 
{ 
font-size: 13px !important; 
font-weight: 400 !important; 
color: #000 !important; 
}

/*回覆按鈕*/ 
div.mention.pif-message { background: none !important; color: #000 !important; } 
div.mention.pif-message:hover 
{ background: none !important; color: #555 !important; }

調(diào)整後顯示如下：

更改後的每則噗時(shí)間.jpg

在瀏覽私密訊息或喜愛(ài)的訊息的時(shí)候，前面的標(biāo)示圖原本為黃色和紅色：

原本的標(biāo)示圖示.jpg

也可改成統(tǒng)一的單色：

更改後的標(biāo)示圖示.jpg

語(yǔ)法：

/*每則噗前面的標(biāo)注圖示*/ 
.plurk_icon { color: #000 !important; }

花花綠綠的語(yǔ)助詞，同樣可用語(yǔ)法來(lái)統(tǒng)一調(diào)整：

/*浪上的噗語(yǔ)助詞*/ 
.qualifier, .m_qualifier, .r_qualifier, 
div.bigplurk .r_qualifier, .mini_form .m_qualifier, 
.user .qualifier, .qual_menu td, span.qualifier.q_shares, 
.qual_menu .q_shares, .q_shares, td .q_shares, td .q_likes, 
td .q_loves, td .q_gives, td .q_hates, td .q_wants, td .q_wishes, 
td .q_needs, td .q_will, td .q_hopes, td .q_asks, td .q_has, 
td .q_was, td .q_wonders, td .q_feels, td .q_thinks, 
td .q_says, td .q_is, td .q_replurks 
{
background: none !important; 
border: 0 !important; 
font-size: 13px !important; 
font-weight: 400 !important; 
color: #000 !important; 
}
.q_replurks { background-image: none !important; }

更改後的樣貌：

語(yǔ)助詞.jpg

在回應(yīng)訊息上，展開(kāi)後的列表原本下方的輸入欄位顯得過(guò)小，可用語(yǔ)法更改，讓整體更順眼、回應(yīng)訊息更方便：

回應(yīng)列表發(fā)噗區(qū).jpg

套用這段語(yǔ)法：

/*回應(yīng)列表發(fā)噗區(qū)*/ 
div.input_holder, #input_big
{
background: none !important;
border: 0 !important;
} 
td.td_cnt textarea, textarea#input_small 
{
background: none !important;
font-size: 14px !important;
min-height: 80px !important;
line-height: 1.8em !important;
letter-spacing: 0.13em !important;
color: #000 !important;
padding: 3px 5px !important;
border: 1px solid #888 !important;
border-radius: 15px !important;
}

最後消音功能的設(shè)計(jì)，噗浪預(yù)設(shè)的方式是，雖然按下消音了，但該則噗還是掛在浪上……若希望被消音的噗就能好好隱藏起來(lái)，需要添加以下語(yǔ)法：

/*隱藏已消音的噗*/ 
div.muted { opacity: 0.01 !important; zoom: 1; transition: opacity 1.5s ease;}
div.muted:hover { opacity: 0.5 !important; zoom: 1; transition: opacity 1.5s ease;}

用這語(yǔ)法後，按下消音的噗會(huì)隱藏（透明度0.01），滑鼠移過(guò)去後會(huì)出現(xiàn)（透明度0.5），所以隨時(shí)你想取消消音的話，還是可改變主意。

消音.jpg

按下消音按鈕：

消音效果.jpg

取消消音：

取消消音.jpg

下一篇會(huì)講主控臺(tái)的背景和各項(xiàng)設(shè)定，讓整體背景更和諧，背景圖能更完整呈現(xiàn)。
關(guān)於浪上的噗還有什麼想了解和改造的部分？歡迎再跟我說(shuō)～

_
原文刊載自：金羽銀華-Blog
同步刊登於：金羽銀華-Medium