plurk噗浪樣式css版型 修改CSS把圖片做成滿版的plurk背景教學 (少女時代SNSD背景圖分享) 文/Sophie
plurk噗浪樣式css版型 修改CSS把圖片做成滿版的plurk背景教學 (少女時代SNSD背景圖分享)
範例以韓國少女時代SNSD為背景，應該蠻多網友喜歡少女時代SNSD的。
為了使大家可以更快速的做到把喜歡的圖做成滿版背景的效果，
SOPHIE找了這個樣式推薦大家套用再修改，就能把任何你喜歡的圖放到噗浪背景上了。
點此連結到網頁套用樣式，如上方截圖點選中間橘色p字樣click here就可以套用到你的噗浪。
套用好了嗎，開始動手換喜歡的背景囉!
1.先準備好圖片，1200*1200px的圖檔。
(因應要拿一張圖做成滿版背景所以要考慮到螢幕解析度，至少拿1000*1000以上的圖檔)
↑範例拿少女時代的圖，喜歡的話可以到相簿下載此圖。
2.套用好樣式好在噗浪的"編輯"→個人設定→自訂外觀中修改css
找到此區塊，在最上方前幾行而已。
body, html { background: #000 url(http://img7.imageshack.us/img7/571/hexagon.png);background-repeat:no-repeat;
}
將url(網址) 改成自己的圖片網址。
改好後按下儲存並更新就修改完成囉^^
喜歡sophie的教學請給點鼓勵點右下角的推上專欄也歡迎推到噗浪或是註名出處和網址的引用
覺得『非設計部落』文章不錯，請動動滑鼠點一下『讚』喔！
文章標籤
全站熱搜
【非氏不可】各班講義/開班資訊/行銷托管服務 (6)
請問flickr上傳圖片為什麼都會壓像素？不能用自己設定好的上傳嘛？謝謝~ 版主回覆：(03/26/2010 09:39:45 AM) 金盞花跟sophie都沒有玩flickr，不過推測原因應該跟很多網站一樣。 當上傳圖檔超過一定尺寸，則會自動裁切。 ps.我剛剛看了一下，他可以顯示原始大小，只是預覽時才會自動縮圖。 這是為了避免浪費網路資源頻寬，同時也避免網友瀏覽時花費太多時間讀取。
為什麼我底下那一塊不會是透明的 ? 版主回覆：(06/24/2010 11:37:11 AM) 哪一塊？
請問~ 為什麼圖片大小超過1200*1200但弄到樣式還是無法滿版呢? 版主回覆：(06/25/2010 01:31:53 PM) 1200x1200正常來說應該會滿版，而且超出畫面。 如果沒滿版，最可能的原因應該是你上傳圖時，已經被縮圖，所以實際尺寸已經不是1200x1200 可以檢視一下你上傳圖後的尺寸。 參考這篇 http://sophiestudio.pixnet.net/blog/category/197287
圖片是用好了 可是被原本下載的版給擋住=0= 請問要怎嚜用掉呢? 卸卸` 版主回覆：(06/28/2010 09:17:34 AM) 對不起，我不太明白你說的意思，是什麼東西擋到什麼東西？ 如果能讓我看下畫面，會比較方便告訴你問題出在哪裡。 ︿︿
謝謝你~我用成功了~ 版主回覆：(07/01/2010 01:27:07 PM) 恭喜︿︿ 有問題在一起討論。
我想請問一下 我弄好了 可是為啥別人看的時候是黑漆漆的一片 版主回覆：(07/01/2010 01:27:32 PM) 你自己看時。正常嗎？ 黑漆漆的人，使用什麼瀏覽器？
IE的 我用我的NB看也是黑漆漆的 只有我的電腦看是可以的 其他人看都黑漆漆的>"< 版主回覆：(07/15/2010 03:20:54 PM) 能給我看一下網址嗎？
http://www.plurk.com/THEONE7/invite 版主回覆：(07/15/2010 03:24:35 PM) 看過後，發現 第一你使用的圖只在河道範圍。 第二你的底色本身為黑色，所以黑色是正常。（應該沒猜錯） 解決方式 1.選一張大一點的圖，放到body, html 這個區塊位置。 而非#timeline_holder 這個位置（這邊是河道） 或 2.自行修改底色 ps.只改河道參考這篇 http://sophiestudio.pixnet.net/blog/post/4948559 滿版的話則是這篇 http://sophiestudio.pixnet.net/blog/post/5682674 兩者要修改的地方不同
請問如果我要用上面那張1200x1200少女時代的圖 他的網址是甚麼0.0 因為我去相簿找了圖 可是沒有1200x1200的大小阿>< 版主回覆：(07/15/2010 06:28:03 PM) 直接點上面的圖，然後就會連到相簿了。 接著選擇 『看原始圖』，就是了
感謝!! 我成功了!! 只是......Sunny被切掉了欸T_T 版主回覆：(07/16/2010 04:37:04 AM) 恭喜。再做一次，多一次練習會更熟練。
請問可能是我電腦解析度的關係 右邊跟下面還是會出現黑色的部分 能夠讓底色變白色或背景圖片重複出現嗎? 版主回覆：(07/16/2010 04:37:39 AM) 是的，你的畫面跟別人的畫面大小不一定會一樣，原因就是解析度。 當你解析度高，就只好選擇大一點的圖。 重複排列 repeat 重複排列 repeat-x; 沿著x軸排列 repeat-y; 沿著y軸排列 background-color 背景色 以上添加進去即可
你說套用撲浪樣式的圖片要找很大的 可是我的圖片都沒有到那麼大張 有甚麼方法可以讓圖片變大張 讓他套用進去呢 版主回覆：(07/16/2010 04:15:18 PM) 可以下載photocap(免費軟體) 然後調整大小,調大一點之後存檔即可.
我想請問一下..我有按照你的方法去做 但是為什麼我的圖是跑在下面而不是在上面呢? 可以把圖放在中間嗎? 謝謝... http://www.plurk.com/YELL6298 版主回覆：(07/17/2010 09:58:49 AM) 剛剛看過你的版面，發現圖會在下面，是因為那張圖本來就那麼大。 人物上面還有BIGBANG的英文字。 所以那張圖是包含英文字＋人物 如果你只想出現人物，需要把英文字部份裁切掉，然後再拉大圖片就行。 若還有問題，歡迎一起再討論
我已經改過來了~ 但是想在請問一下 那個圖片可以改放旁邊嗎? 版主回覆：(07/21/2010 08:54:33 AM) 你的意思是？ 改成靠右邊？還是？
對對對~就是可以靠右邊一點嗎? 還是也可以改放中間一點? 謝謝你>< 版主回覆：(07/21/2010 03:52:11 PM) 加入 center 居中 left 靠左 right 靠右 若是要更精細的定位，需使用 absolute絕對定位 relative相對定位 但是建議不要使用，因為剛接觸的人，往往這兩個用法會產生很多問題。 貌似正常，別人來看時都有問題，卻又不容易找問題。 所以建議先使用 靠左、靠右、居中。
那在請問一下居中.靠左.靠右的英文是要放在哪裡?因為我不太會!!謝謝>< 版主回覆：(07/21/2010 05:07:24 PM) 舉例 body{ background:url(http://p9.p.pixnet.net/72.gif) center ; } 加在要置中的那個東西後面。
你好喔...我試過了結果變成全藍說!!>< 版主回覆：(07/22/2010 06:59:23 PM) 複製那部份我看，不用全部，單獨那區塊的語法就行。
http://img695.imageshack.us/img695/7526/4693271992e3beba9977o.jpg 嗯~這張圖片太大了...請問有沒有語法可以令這張圖片跟屏幕解析度配合呢?~(就是因應解析度而變換大小).. 我不想經常開PS弄啊...感謝了!! 版主回覆：(07/23/2010 03:14:28 PM) HTML貼圖語法可以修改，但CSS背景不行。 不過無論行不行，都沒用處。 因為訪客每個人解析度不一樣，調整成任何解析度都無法滿足所有人。 所以使用一些技巧就能解決這問題。 例如讓圖片居中，再設上背景色（或其他背景圖） 這樣子圖片居中，無論任何解析度都是在中央，搭配底色（底圖），就會佈滿全螢幕。
很用心!推~ 版主回覆：(07/25/2010 04:50:36 AM) 謝謝你
不好意思~你是說將body, html { background: #000 url(http://img7.imageshack.us/img7/571/hexagon.png);background-repeat:no-repeat; } 全都取代為圖片網址ㄇ?那個圖片網址是要怎麼得到? 版主回覆：(08/26/2010 02:26:11 PM) 你是噗浪那位吧? 如果是 你就把那段,替換成我給你的那段.. 至於圖片網址,你就複製原來的網址取代就可. 至於圖片來源網址可以參考這篇 http://sophiestudio.pixnet.net/blog/post/4253324 將圖放到相簿後取得網址..
不好意思~你說有給我哪段? 如果是用你上面的p~~那個樣式css~ 你說把url改成圖片網址~是只將url這三個字成網址~ 還是一整段?從body到repeat; } 真的很抱歉一直麻煩你..... 版主回覆：(07/31/2010 09:20:21 AM) 整段替換掉 但是圖片網址改成你自己的圖就可以了
可以請你幫我做這個的樣式嗎 我真的很想要 如果可以做 做完可以傳來我的信箱嗎 sally40723@hotmail.com 謝謝你 很抱歉這樣子一直問 不過我真的不會用 我用過你的方法 不過很多次都不成功 版主回覆：(08/26/2010 02:25:34 PM) 加油，看你好像成功了，不懂再問︿︿
太感謝你了 我終於成功了 如果有問題還可以跟你請教嗎 版主回覆：(08/26/2010 02:22:10 PM) 當然沒問題呀，歡迎。 能幫的上忙最重要。
感謝教學 版主回覆：(08/26/2010 02:20:48 PM) 謝謝你
支持~也祝你人氣旺旺旺~~ 版主回覆：(08/26/2010 02:06:50 PM) 謝謝你
加油 版主回覆：(08/26/2010 02:03:01 PM) 謝謝
問一下... 圖片網址是要用哪裡的? 存在哪= =? 版主回覆：(08/26/2010 02:02:22 PM) 你需要先將圖片放到空間，然後取得網址。 之後在依照語法，將網址改成自己的，就行了。
支持你!繼續加油 版主回覆：(08/26/2010 02:02:02 PM) 不客氣
請問一下.... 我依照你說的把圖片網址改掉了 可是改掉之後只有河道變成我的圖片而已耶!! 是不是還要在加什麼把下面的圖片改掉呢?? 版主回覆：(08/26/2010 02:01:18 PM) 這邊不太懂意思
謝謝你的教學 我後來搞懂了 換上喜歡的圖好開心XD 版主回覆：(08/26/2010 01:59:49 PM) 現在懂了嗎？ 有問題再問喔︿︿
1280X1024 的圖可以滿版嗎? 不行的話 可以請大大教我怎麼把圖改成想要的大小又不可以失真? 還有我剛剛換圖怎麼都在左上角= = ? 拜託版主傳授功力給我阿>< 版主回覆：(08/26/2010 02:00:11 PM) 能不能滿版，主要取決於每個人的解析度，這跟『自己』所見到的不同。 但如果是已經設定範圍的區塊，那檢查各區塊設定範圍就知道了。 或者將背景設定成延橫軸，縱軸排列也可以。 你的問題在『觀念』，而非方法。 或者方便的話，留下你的話面，讓我看看會比較清楚。
請問一下要怎麼讓圖跟著右邊轉軸一起動@W@? 像這樣的http://www.plurk.com/natsuki90 版主回覆：(09/03/2010 09:26:25 PM) 那好像是去掉河道的圖，然後放上滿版的背景圖。 所以河道沒圖，就直接看見背景圖，但背景圖夠大，因此不會移動。 應該是。。（或者是我誤解妳的意思？）
我想用http://linbebe9105555.pixnet.net/album/photo/122353511 這張圖當背景 可是照你的方法下去修改CSS背景卻沒有變 >""< 請問我該怎麼辦 Q~Q
我會改背景了 不過請問要怎麼把背景用成整個畫面都有?? 版主回覆：(09/03/2010 09:51:52 PM) 整個畫面需要一張比較大的圖。 或者讓我看看你的話面，比較知道問題在哪。 你前一則留言的圖，不夠大。
如果圖用1344×1008做河道的圖夠大嗎？ 真的好難喔 版主回覆：(09/03/2010 09:54:32 PM) 圖多大，看妳的螢幕解析度而定。 假如你慣用 1024x768 那麼最大就是這樣。 但反過來說，網友螢幕解析度不同，也會有不同情況。
請問為什麼圖片網址貼上去後還是一片黑呢? 圖片已經是1200*1200了. 還有，請問圖片網址是說上傳到 上傳空間 後的網址的意思嗎? 版主回覆：(09/08/2010 01:30:43 PM) 1.會一片黑，可能得讓我看一下畫面才能判斷問題。 2.網址是上傳到空間之後的網址沒錯。
下載的圖片如何套上去 版主回覆：(10/12/2010 12:24:51 AM) 先取得網址 參考這篇 http://sophiestudio.pixnet.net/blog/post/4253324 之後將網址套上就行了。
我學得很快 不過我想換背景顏色 可以告訴我粉紅色的 代號是什麼嗎?? 謝謝!! 版主回覆：(10/12/2010 12:19:53 AM) 試試看這個 http://mychat.to/pub_java/selcolor.htm
給你灌水 打撓了! 版主回覆：(10/12/2010 12:17:52 AM) 謝謝支持
不好意思喔！ 我改成上面那張的網址 但變成這樣 http://www.plurk.com/Michael_Brian 請問是哪出問題呢？ 我是傳到http://img524.imageshack.us/i/4ba8ede065b97.jpg/ 請幫幫我！>.<...感謝~ 版主回覆：(10/13/2010 11:32:16 PM) 你那空間好像不行。 只能秀圖，不能被外部連結的樣子。（不確定、但應該是） 所以你最好換個空間。
有什麼推薦的空間呢？！ 版主回覆：(10/23/2010 05:58:21 AM) 空間的話，我沒特別研究，若有好的空間再通知你︿︿ 或者你找到好空間，也可以跟我介紹一下。謝謝︿︿
請問 http://www.wretch.cc/album/show.php?i=u4fmp6qo4m6&b=12&f=1864262347&p=19 我想用這個圖當背景 可是套用了之後 變成一片黑 這是我的plurk http://www.plurk.com/112yu 可以請你幫我看看嗎? 麻煩了 謝謝你 版主回覆：(10/27/2010 12:30:57 PM) 因為你的網址是相簿網址，不是圖片網址。 你要先取得圖片網址就可以了。 圖片網址太長，我留噗浪給你。 你試試看行不行，若不行的畫你可能要先把圖放到其他空間。
請問圖片網誌要怎麼用?? 是載到桌面還是??? 拜託你了!! 版主回覆：(10/28/2010 01:46:33 PM) 我不懂你的意思？ 圖片網誌？ 如果你說的是，如何將圖片改成背景，那你必須先將圖片上傳到你的空間，然後取得網址就可以。 參考這一篇 http://sophiestudio.pixnet.net/blog/post/20621032
你好～ 我想請教您 因為你的教學讓知道我要的圖只要複製網址貼到 url(網址) 就能改背景 但是!!! 我現在的疑問是 有些圖太大或太小我該怎改呢?還是我要把我的噗浪整個改寬改長?那要怎改? 還有我的字和一些非背景的東西,我要怎改顏色呢? 我的噗浪http://www.plurk.com/Yoona1990幫我看一下 感謝=D 版主回覆：(11/21/2010 12:04:12 AM) 不好意思今天才回復你。 你該先將圖片調整成適合的大小再放上去做背景。 至於字或者非背景的東西，若要修改必須先知道要修改哪個位置，因為手頭上沒有架構圖，無法提供給你參考。 但可以使用一些網頁工具得知區塊名稱，就能進行修改。（不知道這樣說能不能明白）
呵呵感謝你我下次在試試看 版主回覆：(03/08/2011 12:38:18 PM) 希望能幫上忙︿︿
感謝大大ˊˇˋ！ 版主回覆：(03/09/2011 10:13:39 AM) 不客氣
不好意思... 不知為什麼我只有背景有圖... 河道上一整個灰色的... 版主回覆：(06/03/2011 02:07:11 AM) 能讓我看看你的噗浪嗎？ 還有你使用的圖，放在哪個空間裡面？
噗: http://www.plurk.com/fogyee 上傳空間是這個 http://photobucket.com/ 版主回覆：(06/03/2011 02:07:56 AM) 剛試了一下，雖然沒有很確定，但背景圖讀不出來。 有可能空間不能外連。 試試看找一家能外連的空間測試。 請參考這篇。 http://sophiestudio.pixnet.net/blog/post/20468112
Q1請問我的圖片是1600x1200 可是圖只出現在一小角落，是因為圖片太大嗎?? Q2低於1000以下都不行嗎? 試了幾個都不行，希望版主能給我解答OWO
http://www.plurk.com/w112817160?status=http%3A%2F%2Fbuzzpark.cc%2Ffortune%2Fshow%2FKv+%28%E4%BD%A0%E7%9A%84%E5%85%A7%E5%BF%83%E4%BD%8F%E8%91%97%E4%B8%80%E4%BD%8D%3F%29%EF%BC%9A%E6%B5%AA%E6%9C%88%E7%A7%80%E4%BA%BA%E7%9A%84%E5%85%A7%E5%BF%83%E4%BD%8F%E8%91%97%E4%B8%80%E4%BD%8D%E5%B8%A5%E6%B0%A3%E7%9A%84%E6%AD%A3%E5%A4%AA&qualifier=shares 不管圖多大張右手邊都還是黑黑一塊 怎樣才能填滿他呢 或者使他置中?