[教學]Plurk版面製作技巧（二）

前天又默默做了個新版面，讓我想起也該寫點教學了……

今天要教大家如何改變噗浪頁面上的個人顯示圖像大小。只需要在css裡面貼上一個語法就可以輕鬆解決～

首先在沒有增加任何css語法之前，預設的個人顯示圖像大小是這麼大：

因為實在大得太不像話了，還會把自我介紹擠到下方去，所以乾脆把它縮成我們喜歡的大小。

修改的步驟分為三部份，請依照順序修改。

可直接點選下方連結跳至該步驟。

一、確認自訂css欄位裡是否已有相同語法。

二、在自訂css欄位內新增語法。

三、修改此語法內的數值。

※若已經套用在其他網站下載的噗浪版型時，請務必先確認css欄內是否已有此語法，避免語法重複影響效果。

步驟一、確認自訂css欄位裡是否已有相同語法：

首先點選「我的檔案」旁邊的「編輯」，再選擇「自訂外觀」頁面。

接著在自訂css欄位內點一下滑鼠，搜尋是否已有相同的語法。

請按ctrl+f搜尋「.profile-pic」，若是發現已有此語法，請直接跳到步驟三修改語法內的數值即可。

若是找不到，請繼續看步驟二新增語法。

步驟二、在自訂css欄位內新增語法並修改數值：

若是在css欄位內搜尋不到「.profile-pic」時，請直接複製下方的語法在空白處貼上。

/* 個人頭像大小 */
.profile-pic {height:100px; width:100px; }

然後按下「儲存並更新」即可。

這是修改過後的效果，可以發現圖像已經明顯的縮小了。

如果對修改完的圖像大小不滿意，想修改數值要怎麼改呢？請繼續看第三步驟～

步驟三、修改此語法內的數值：

觀察一下語法我們會發現{ }內出現了height和width這兩個屬性，其實這就分別代表了圖片的高跟寬，只要修改這裡的數值就可以改變圖像的大小。

但修改時請記得height和width這兩個屬性的數值必須相同，否則圖片會變形。（當然你要讓它變形我也沒意見……）

舉例來說，如果要讓它變得比步驟二的語法效果更小，可以改成這樣：

/* 個人頭像大小 */
.profile-pic {height:50px; width:50px; }

若是要改大一點，可以改成這樣：

/* 個人頭像大小 */
.profile-pic {height:150px; width:150px; }

數值可以隨自己喜好修改。

※噗浪預設的圖像大小為「195px」，請盡量不要超過這個大小，避免圖片模糊掉。

以上就是本次的噗浪語法教學。

（其實這已經不算教學了，應該叫小撇步才對|||b）

下次來教怎麼隱藏朋友和粉絲列表好了～這個對一些比較注重隱私的朋友應該還蠻需要的。

最後，若是對示範圖片裡某蚊所使用的噗浪版面有興趣，歡迎到這裡來下載安裝。(・∀・)ﾉ

我所使用的版面都有修改過個人圖像大小，要修改時不需要再新增一次語法，直接修改數值即可。