星期日, 9月 07, 2008

如何更換Blogger的背景圖

剛剛看到留言有人問,正好覺得電腦方面的相關文章太少,所以就來打一篇教學吧~
(這時如果補一句:「絕對不是為了XXX喔」,就會變成標準的傲嬌發言了吧…
既然都提到傲嬌了,本次的心情圖示當然就是目前動漫界的一方傲嬌:柊 鏡小姐
kagami
OK,閒話休提,我們進正題吧…(好像都是我自己在扯…)

  1. 首先當然是進
    控制主頁→版面配置→修改HTML
    強烈建議在做任何修改以前,先利用Blogger本身的備份功能把自己的模板給備份到電腦裡
    這樣以後不管出了什麼問題,最少都還救的回來

  2. 再來到「修改範本」裡找到這段程式碼
    body {
    background:#ffffff;

  3. 接下來只要將
    background:#ffffff;
    代換成
    background:url(http://你的背景圖位置)
    就可以了,當然,你放圖的空間要支援外連

  4. 完了嗎?當然還沒…(拖)
    因為這樣的話只會在背景放一張圖罷了
    所以接下來有這幾種語法的組合運用
    • 無限拼貼語法:
      background:url(http://你的背景圖位置) repeat;
      你就會有一張會複製到滿滿的背景圖
      僅縱向拼貼語法:
      background:url(http://你的背景圖位置) repeat-y top left;
      你就會有一張會縱向複製,頂上靠左的背景圖
      僅橫向拼貼語法:
      background:url(http://你的背景圖位置) repeat-x top left;
      你就會有一張會橫向複製,頂上靠左的背景圖
      一張大底圖居中語法:
      background:url(http://你的背景圖位置) no-repeat top center;
      你就會擁有單張,頂上居中的大圖囉~
      如果你想將圖給固定住,不隨著上下拖拉移動,則在下一行自行加上固定命令語法即可,語法如下:
      background-attachment:fixed;
      這句語法就是命令你的背景圖固定不動的語句

  5. 其實就上面的語法應用,可以很容易的看出來
    要控制方向,其實就是下面這幾個元素的組合
    top與bottom是上下
    而left、right與center分別就是左、右與置中
    很簡單吧?

  6. 最後要注意的就是背景圖與自己網誌的各種搭配了,這方面就自己慢慢去試吧
    我是建議不要太花俏,要不然會影響閱讀的

P.S.1:
本來在寫的春香7,因為這篇,就延期到明天吧~(非常明顯的藉口)

P.S.2:
光看上面那張心情圖示可能不太瞭解什麼叫「傲嬌
沒關係,下面這張是標準範例,保證一目瞭然~(拖)

c200762615518

22 則留言:

  1. 謝謝站主大人!

    *u*

    寫的很清楚!

    回覆刪除
  2. 咦?放圖的空間要支援"外連"???

    Picasa網路相簿好像沒有...=.=

    回覆刪除
  3. 不用客氣
    話說你的BLOG的網址是?
    有空可以互相交流喔~

    不是沒有,而是Picasa要用他自訂的語法來外連
    保證其圖片最後可以連回Picasa

    但在這裡是行不通的
    我建議你可以使用你的ISP所附送的空間

    如果要免費放圖空間的話,並且支援「外連」的話
    http://photobucket.com/
    也是很好的選擇

    回覆刪除
  4. 弄好了!~~~

    我的:
    http://sakurakiss1991.blogspot.com/

    ^0^

    回覆刪除
  5. 我去看過了~感覺不錯喔~
    不過下次要留言的話,我是建議先登入再留言
    不要老是留匿名嘛…XD

    (看到你旁邊的CBOX,我也去用一個來玩玩好了~)

    回覆刪除
  6. 你好~
    你這篇寫的好清楚
    所以我就自己動手試了一下
    可是有個小問題
    就是
    主文內底圖可以只重複個幾張嗎?
    比方只重複兩張
    這樣子可以嗎?
    那這樣要怎麼修改呢?

    回覆刪除
  7. To:Athena
    唔…我是沒試過啦,但應該是可以作到
    要看repeat語法有沒有支援這種…

    但是我覺得這樣做意義不大
    因為這是網路,你的東西是面對不特定的多數人
    也許在你的環境下看起來很好看,但在他人的機器上就不一定了

    這也是在我回台北那幾天,用家裡電腦看的感想…
    我台北家中電腦解析度是1024*768,看本Blog怎麼看怎麼怪…

    所以我是建議無限拼貼看起來也不會奇怪的圖
    那後把圖縮小到一定比例再去處理,最後改解析度試試看效果

    這只是建議啦,每個人的美感是不同的~
    希望這對你有幫助

    如果你很堅持一定要這樣做的話,可以先用笨方法
    把你的圖改成你解析度的一半大小,這樣橫向拼貼就是兩張…(拖)

    回覆刪除
  8. 請問
    如果是一張大底圖居左
    而圖片以外的背景想要白色以外的顏色
    要怎麼做?

    因為照上面的作法只能放白底的圖
    沒圖的地方都是白的=.=

    回覆刪除
  9. To:flyer
    background:顏色代碼;←本來教學裡是被代換掉的,現在保留
    background:url(http://你的背景圖位置)

    顏色代碼內填入你要的顏色代碼
    像紅色是fe0000
    紫色是8102fe
    藍色是100dfe等等
    詳細代碼你要自己想辦法查
    因為我不知道你要搭配的圖是怎樣的

    這樣應該就可以了

    回覆刪除
  10. 想請問你...為什麼我的背景圖上傳到私人空間,也是hinet的..
    可是在firefox上可以順利讀的到背景圖片
    但在 IE 裡..就確沒有背景圖片呢?
    http://swornfollowers.blogspot.com/
    一切還在摸索中~!!

    回覆刪除
  11. 請問,要傳上去的小圖太大了, 有沒有辦法可以縮圖呢?

    回覆刪除
  12. To:死黨們
    抱歉…我完全不知道為啥會這樣…@@
    因為我平常的主力都是FX…
    可能是CSS語法IE有別的規格?

    To:兔格格
    請問是圖檔的解析度太大還是磁碟大小太大?

    前者請參閱
    http://mooncatfairy.blogspot.com/2008/09/image-resizer.html

    後者請在圖檔編輯軟體另存新檔時,把JPEG的品質調低一點。

    回覆刪除
  13. 圖太大的問題已經解決了,原來自己把圖縮小一點就好了, 不過現在到出現一個問題了, 我想在左右兩側都放不同的圖片, 可是圖片不會乖乖的出現在兩側, ...ㄟ斗..該怎麼做呢?

    回覆刪除
  14. 我还是搞不懂呢><
    T_____T我哭~~~

    回覆刪除
  15. 谢谢你噢。
    我改了我的背景了。^^

    回覆刪除
  16. 我还是不懂~版面配置在哪里~可以帮帮我吗?

    回覆刪除
  17. 請問要怎麼在blogger右邊加入応援バナー呢....

    回覆刪除
  18. 感謝貓神官大大的教學>.<
    身為新手我獻上萬分的感謝

    回覆刪除

花點時間留下您的心得吧~這也是對作者的一種鼓勵。