2007年5月5日 星期六

換Banner圖片及文章標題加上圖示

不想用blogger制式的格式,雖然他的排版還算簡單乾淨,但總想擁有一個屬於自已的呈現方式,蓋個blog的窩就像佈置自己的房間,縱使沒有什麼美術方面的天份,顏色配置的概念也不懂,只是想讓自己看得順眼,如果連自己都不想看的部落格,還有誰會進來?

更改方式,進入範本,更改修改HTML的內容,
用I.E者按Ctrl+F出現 尋找 的對話框,然後找到 /*Header這個區塊,應該是第一個,在#header-wrapper {這個敘述裡加上或是後將預設的圖片網址設成自己的就可以了,
background:url(“圖片網址”) no-repeat;
我的版面預設值是800*600,而我的圖是長條型的大概長度是760,所以不想重複顯示會加上no-repeat,如果有的人是1024*768,沒有加上no-repeat,看到的就會重複圖片,變得很醜,但如果本來templet預設就沒有圖片,就自己加上這個敘述即可。
然後配合你的Banner,再調整標題位置就完成了。

Blogger預設的有的是沒有Banner圖,而是用框框將標題框住的語法類似這樣 "回"
border: 1px solid $bordercolor;要記得將這行敘述刪除再加上background的敘述即可。

如果想在每篇文章標題前加個圖示,則是找到 /* Posts這個區塊
.post h3 { 裡,加上 background:url("圖片網址") no-repeat; 語法,不過圖片格式要小,大概20*20就可以了。
有的人可能是 .post-title {,每種樣版的語法都不盡相同。
如果只是想讓標題底色不同來區別,則是加上 background:#色碼; (背景色)
color:#色碼;(文字色) 自己再調整即可。
想要什麼顏色,可以到這裡去找
原色大辭典
P.S. 其實每個templet預設的語法都不相同,記得更改前要先將自己原先的css語法備份,版面不是自己所要時才可以再回復原先的格式。

36 則留言:

  1. 請問您訂閱前的圖示也是用這種方式加上的嗎?

    回覆刪除
  2. 在.feed-links {
    加上background: url敘述
    大概是我在技巧(三)提到類似的觀念。
    謝謝你,也希望這些tips你也能用到。

    回覆刪除
  3. 你的banner的圖片是放在哪裡?我之前放在Picasa都可以現在怎麼都不行了?而且還不能用格主的方法,只能用LVCHEN的方法

    回覆刪除
  4. 我是用草稿來存我blog上的照片,這樣照片就會歸檔到這個blog的內部存檔區,imrg src再指向這個位置即可,我自己用是沒有問題的,這個網站我沒有用banner,我另一個網站有用,可參考原始碼,東京封印

    回覆刪除
  5. 抱歉,有錯字,img src="圖片網址",草稿就是存blog版面的圖案。

    回覆刪除
  6. 我在标题前加图片为什么变成标题的背景,不能再标题前显示

    回覆刪除
  7. 我看你的網站,應該是已經調整好了,圖要小,再調整padding或是margin即可。

    回覆刪除
  8. 您好,這個blog很不錯!
    讓我這初學著有個開始的地方。

    我有個問題...
    我是套用他處的模板的,想要改標頭的圖片。我找到:
    #header-wrapper {
    margin:0;
    padding: 0;
    background-color: $headerCornersColor;
    text-align: left;
    }

    找不到background:url(“圖片網址”) no-repeat;
    想說直接增加一行,結果是完全沒變化...

    請問我要怎麼做呢??

    回覆刪除
  9. 因為你有兩個網站,一個是從後台直接插入標頭圖片,另一個沒看到你新增的語法,方便給我正確的網址,我再幫你看看。

    回覆刪除
  10. 嗯,謝謝,這是我的blog:
    http://jialin-note.blogspot.com/

    回覆刪除
  11. 你的圖片網址前後的引號""變成亂碼,你要用半形的""或是把引號刪除看看

    回覆刪除
  12. background:url(http://static.zooomr.com/images/6816233_dc4125a030_b.jpg) no-repeat
    你後面no-repeat少了;
    不然你用
    background:url("http://static.zooomr.com/images/6816233_dc4125a030_b.jpg") no-repeat;
    這句貼上看看。

    回覆刪除
  13. 有出現啊,只是被你的背景顏色給擋住,把#header-wrapper {和#header {裡的background-color: #000000;
    的定義都給去除,應該就看得到了。

    回覆刪除
  14. 嗯,謝謝囉...^^
    圖出現了,剩下我自己慢慢改
    感謝

    回覆刪除
  15. 如果想要全圖出現,記得設高度與寬度,慢慢改,改多次後就會知道問題出在哪了,加油。

    回覆刪除
  16. 你好~我又要來麻煩你了^^"
    文章標題前加上圖示,我找不到.posth3或.post-title呢~
    可否撥空幫我看一下~謝謝你^^

    http://giant-dogs.blogspot.com/

    回覆刪除
  17. 你的名稱是.postarea {
    background: #FFFFFF url(http://s310.photobucket.com/albums/kk426/magznetwork/revolutionlifestyle/homepagetop.gif) top no-repeat;
    裡面已經有設標題背景圖了,把它換掉就行了,因為你的模板沒有獨立設標題的定義,只有整篇文章的定義區塊,所以最簡單就是改背景了。

    回覆刪除
  18. 版主你好,初次使用部落格,這裡很多讓我學的~^^
    請問我已經試著把標題換背景了,使用的的底圖是網路上的~被分割3塊,如果把圖合併後,有辦法把部落格的背景圖是像一般網頁一樣單一背景嗎?現在用的標題和內文變成有一條空白段落,頁尾用同樣方法設可是出不來?

    麻煩了謝謝~

    回覆刪除
  19. 你如果要把三張圖合併成一張圖,可以在#content-wrapper { 設這張新圖的底圖,但是圖片大小要調整好,目前你的寬度是940px,設好圖後,你可以用fixed定底圖的方式,不然通常首頁會一直延伸下去,你的圖會重複,如果你可以接受這樣的效果也是可以的,因為我真的看不出來原圖長怎樣,另外所有例如main-wrapper、sidebar-wrapper等等這些background-color: #ffffff;的敘述都要拿掉,才不會檔到你的底圖。

    回覆刪除
  20. TO 小黑豪:

    我想你說的標題和內文間有一條空白段落的問題,應該是出在
    #content-wrapper {
    padding: 0 0 15px;

    將他改成:
    #content-wrapper {
    padding: 0 0 0px;

    就會正常了!

    至於頁尾,你將原本寫在#footer .widget 的
    width: 940px;
    height:171px;
    background:url("http://www.jp.playstation.com/scej/title/locoroco2/extra/img/bp_03.gif") center no-repeat;

    移到#footer {圖就會顯示出來了,不過,中間會有空白段落出現@@,剛剛試著改了很多地方,但這部分的空白段落還是無法解決,照理說不該會這樣@@

    回覆刪除
  21. 再補充一下,最好把
    #header-wrapper {
    margin:0;

    改成
    #header-wrapper {
    margin:0 auto;

    要不然用火狐觀看時,橫幅會整個偏到左邊去~


    剩下的,就跟綸太郎說的一樣囉

    回覆刪除
  22. 作者已經移除這則留言。

    回覆刪除
  23. 謝謝版主和南野紗羅~
    改了之後可以看的到圖,因為中間會有空白段落出現,所以我也把圖合併上傳,整張圖設在#content-wrapper那頁首頁尾background都要拿掉囉?會再接再厲的~請多指教!!謝謝

    回覆刪除
  24. 謝謝你的教學~
    我有照你的方法想在文章標題前加圖示~
    但是圖片跟文字是重疊的~
    請文我該調整哪個地方~

    回覆刪除
  25. .post h3 { 裡面加入padding語法,調整看看。

    回覆刪除
  26. 小弟不才~
    我試著加了padding語法進去~
    但移動的跟我要的不太結果一樣~
    還是我的問題問錯了~
    應該是圖片已經變成文章標題的背景圖片了~
    而不是放在標題前面~兩個重疊了~
    感謝~

    回覆刪除
  27. 你沒有提供你的部落格網址,只好以我的為樣本了,我的
    .post h3 {
    padding:0 0 2px 30px;
    background:url(http://4.bp.blogspot.com/_c2aOyhdt6yA/S2FdveirM9I/AAAAAAAAHwA/psRN9MA0g4s/s400/earthtitle.jpg) no-repeat;
    我的圖片是30*30大小的圖,地球小圖
    所以padding跟左邊的距離是30px。
    圖片不重複顯示,因為我也不知道你用多大的圖。

    回覆刪除
  28. 謝謝你~
    照你的樣本搞定了~

    回覆刪除
  29. 請問站長,我找不到這段 #header-wrapper
    我的網站,請幫我看看,因為我目前還是用網頁元素放首頁圖,想之後用CSS去修改,謝謝您之後的指導。
    我的網站:http://gingerbreadman-studio.blogspot.com/

    回覆刪除
  30. 這已經是四年多前的舊文了,blogger都已經換新版的,很多定義都不一樣,除非你用舊版的才能找到吧。新版的可能是.header-outer {這個元素吧,你自己再試看看。

    回覆刪除
  31. http://amnos0915.blogspot.tw/

    請問~最上方雪花的動態圖怎麼移除><?
    我找不到哪裡可以刪掉它...
    先謝謝指導=)!!

    回覆刪除
    回覆
    1. 後台版面配置→標頭那個小工具,將裡面的圖片選項,移除圖片即可。

      刪除
    2. 弄成功了!!大感謝!!終於移除掉了謝謝你=)

      刪除

設有留言驗證及核准,版主閱覽後,留言才會顯示,發問前請善用網站目錄Google搜尋功能