首頁 [教學]Plurk版面製作技巧(二)
« 首頁 »
2009 年 10 月 25 日 留言:2

[教學]Plurk版面製作技巧(二)

Plurk
分享文章

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

若是要改大一點,可以改成這樣:

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

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

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

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

(其實這已經不算教學了,應該叫小撇步才對|||b)

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

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

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

留言

( 2 )
  1. Ann 2010 年 09 月 19 日 12:39

    請問一下~~
    浪道上每個噗前面的個人小圖片能夠調整大小嗎??
    如果可以~請教我css該怎麼寫~謝謝^^

    • Hinishi (管理員) 2010 年 09 月 19 日 14:38

      可以,但因為小圖片有外框,也要順便把外框加大否則會擋到。
      外框是
      .p_img {height:數值px; width:數值px;}
      圖片是
      .p_img img {height:數值px; width:數值px;}

      將數值改成你要的大小就可以了。
      套用前記得先搜尋一下你所使用的噗浪樣式裡是不是已經有重複的語法喔。

發表迴響