首頁 [PlurkCSS]如何更改時間軸背景
« 首頁 »
2010 年 05 月 21 日 留言:5

[PlurkCSS]如何更改時間軸背景

Plurk
分享文章

轉載須知:
本部落格的文章不允許未經告知的全篇轉載或部份引用,若有需要轉載或引用請先留言通知我。
(想轉貼到噗浪、facebook、twitter上的人也請留言通知,謝謝。)

這次來教大家怎麼自己更換噗浪時間軸的背景。

需要準備的東西有兩項:
1.一張夠大的圖。
2.一個不會雞婆幫你縮圖的免費空間。

那……圖該多大才好呢?找不到免費空間怎麼辦呢?沒關係,繼續看下去就知道了。 [淫臉]

背景圖的尺寸:

首先,請找一張你想替換的背景圖,因為河道是長形的,所以這張圖基本上也是長方形的。
河道的高度大約是390px左右,所以這張圖的高度最好介於「385~410px」之間。
(如果你是想讓小圖案不斷重複來裝飾河道的話,那高度就沒有限制了。)

至於長度,因為現在使用寬螢幕的人越來越多了,
所以這張圖當然是「越長越好」,或者是「邊緣可以接起來,就算連續排列也不會很醜」
我自己在做版面時畫的圖,最後都會後製成長度超過1400px的背景圖。

總結以上的說明,這張圖的大小就大約是「1400x400(長x高)px」。

免費空間哪裡找?

如果有人跟我一樣有租空間,當然是不用擔心會被縮圖的問題,但是如果沒有租空間,想使用免費空間上傳圖檔的人,大概都會面臨圖片被縮小、或是尺寸太大無法上傳的困擾。
像我常常使用的Flickr和Photobucket都是這樣,所以這兩個空間就不能用了。

雖然我自己是使用自己租的空間上傳圖檔,但因為我會將自製的噗浪版面分享出去,如果太多人套用的話也很吃流量,所以我在這裡提供幾個我目前拿來放這些大圖的空間:

1.miroko
這是我主要使用的免費空間,只要將圖上傳到「我的文件」裡的「個人首頁」 資料夾裡,就可以外連了。
根目錄是「http://帳號名.miroko.tw/」(如果有另外新增資料夾放圖的話,記得網址要自己修改。)

2.ImageShack
傳說中的青蛙空間,記得上傳時要選擇「Do not resize(不要縮圖)」,如下圖紅色框框所示。

(點圖可放大)
上傳之後按「View full size」或者是複製下面「Direct Link」旁邊的連結就可以拿到原始圖檔的連結囉!詳情請看下圖。

(點圖可放大)

(結果竟然做起空間教學……Orz)

時間軸背景的語法:

還是一樣,要更改語法前,請先確定你的噗浪樣式裡面沒有相同的語法喔~

時間軸背景的語法:
/* 對齊左上角,不重複 */
#timeline_holder {background:  url(圖片網址) left top no-repeat;}
或者是
/* 對齊左上角,在X軸重複排列 */
#timeline_holder {background:  url(圖片網址) left top repeat-x;}
如果是想用小圖案重複排列來填滿河道的話,就用這一種
/* 重複排列 */
#timeline_holder {background:  url(圖片網址) ;}
(以上三種請依個人需要選擇使用,一次只能用一種。)

要確認是不是有重複的語法,請自行搜尋CSS欄位內有沒有「#timeline_holder」字樣,
如果有的話,就把該語法刪掉,直接套用我上面提供的語法,或者是更改語法中「圖片網址」的部份。

修改之後按儲存然後更新一下噗浪頁面,應該就可以發現你的時間軸背景已經換成你自己的圖囉~

留言

( 5 )
  1. 米軒 2011 年 08 月 06 日 13:34

    請問....
    我用了第一個語法
    可是他並沒有顯示出來耶....????

    /* 對齊左上角,不重複 */
    #timeline_holder {background: url(http://i.imgur.com/tFmsi.jpg) left top no-repeat;}

    有錯嗎???

    是只有時間軸的地方要換圖而已.....

    http://www.plurk.com/e5990457
    這是我的噗浪

    目前我用是背景圖,不是時間軸的
    但是我想只要有時間軸的而已....
    可以告訴我該怎麼做媽???

    我怕你若回覆我我可能會忘記看...Orz
    可以麻煩寄信給我嗎?
    我有留下電子郵件
    或是到我的噗浪私噗給我?

    麻煩了m(_ _)m

  2. 米軒 2011 年 08 月 06 日 13:35


    他似乎沒有顯示出我的電子郵件...
    以下是我的電子郵件↓
    e5990457@yahoo.com.tw

    • Hinishi (管理員) 2011 年 08 月 06 日 22:57

      你好,
      我看過了,語法本身是沒有問題的,
      但是我點到你的噗浪發現你的背景圖我也看不到,
      所以有可能是你放圖片的空間不支援的關係,
      可以試著換個空間放圖再試試看。

  3. $ 2011 年 12 月 04 日 18:37

    Am i going to website link approximately that, via the webpage? I'm just intending to gather as much advantages of guidelines as i am have the ability.

  4. 璃璃 2013 年 05 月 30 日 19:22

    我是用整張的圖片,可是要發文的那一塊擋住了很重要的地方....該怎辦!?
    能把它弄得為透明嗎!?

    求解QAQ......

發表迴響