{ plurk css } 浪上的噗更好閱讀

在瀏覽浪上的噗的時候，依據每個人偏好和習慣的不同，我們會希望噗的文字像部落格一樣能夠自訂字型和字距行距，讓我們閱讀和瀏覽噗的體驗更愉快。

這是原本噗浪預設的浪上噗的樣子：

原本浪上的噗與展開列表.jpg

很簡潔緊湊，而展開後的列表內容字比浪上的噗要小一些。

希望字體能夠大一點，符合自己習慣的常用字型的話，可以加上以下語法來達成：

/*浪上噗字型*/ 
#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;
}
/*浪上噗內容的連結*/ 
.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;
}
/*滑鼠移至的連結*/ 
.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;
}
/*浪上噗暱稱連結*/ 
.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; }

套用上段語法後的噗樣貌：

調整字型與連結設定後的浪上噗與列表.jpg

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

在閱覽上，純白色的背景有時會太過刺眼，四四方方的邊角想要換成目前瀏覽經驗上使用較多的圓角，想調整浪上噗的背景色或背景透明度，以及改成圓角的話，可使用以下語法：

/*浪上噗背景*/ 
.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;
}
/*展開後的回應區*/ 
.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;
}

透明度調整後的樣子：

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

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

浪上噗變圓角後，會發現噗友們的頭貼還是方方正正的不太搭配，可加上下段語法讓頭貼也變圓：

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

會發現圓潤的頭貼比較順眼？現在好像大部分網站的代表圖都是圓的。

頭貼圓角

再來看未讀訊息的時候，會發現紅底白字的刺目設計需要稍作調整：

可以改成這樣：

已讀為灰色字無背景，未讀為黑底白字：

語法：

/*回應數*/ 
.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;
}

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

希望閱讀的空間能更寬裕，或有時噗友的暱稱太長，導致文字內容欄位會被壓縮得過小？可以用換行語法來解決：

/*噗列表換行*/ 
.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; }
/*調整噗浪寬度*/ 
.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; }

加上換行與調整寬度語法後的樣子：

換行設定喜歡與轉噗設定.jpg

再來做一些細節上的調整，像上圖列表中的「喜歡」和「轉噗」文字底色和顏色已有做了修正，語法：

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

每則噗的發噗時間，以及功能按鈕，也可用語法來調整：

/*發噗時間*/ 
.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; }

/*回應列表每則噗的時間*/ 
.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; }

調整後顯示如下：

更改後的每則噗時間.jpg

在瀏覽私密訊息或喜愛的訊息的時候，前面的標示圖原本為黃色和紅色：

原本的標示圖示.jpg

也可改成統一的單色：

更改後的標示圖示.jpg

語法：

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

花花綠綠的語助詞，同樣可用語法來統一調整：

/*浪上的噗語助詞*/ 
.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; }

更改後的樣貌：

語助詞.jpg

在回應訊息上，展開後的列表原本下方的輸入欄位顯得過小，可用語法更改，讓整體更順眼、回應訊息更方便：

回應列表發噗區.jpg

套用這段語法：

/*回應列表發噗區*/ 
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;
}

最後消音功能的設計，噗浪預設的方式是，雖然按下消音了，但該則噗還是掛在浪上……若希望被消音的噗就能好好隱藏起來，需要添加以下語法：

/*隱藏已消音的噗*/ 
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;}

用這語法後，按下消音的噗會隱藏（透明度0.01），滑鼠移過去後會出現（透明度0.5），所以隨時你想取消消音的話，還是可改變主意。

消音.jpg

按下消音按鈕：

消音效果.jpg

取消消音：

取消消音.jpg

下一篇會講主控台的背景和各項設定，讓整體背景更和諧，背景圖能更完整呈現。
關於浪上的噗還有什麼想了解和改造的部分？歡迎再跟我說～

---

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