v 換Banner圖片及文章標題加上圖示 >> 0 與 1 謎詭世界
★★★請勿任意轉載本站的文章及圖片但歡迎網摘及連結並註明網站名稱與網址,勿全文轉載,彼此尊重,
是網路的基本禮儀。


>
2013 曬書節 - 萬種商品49元起!

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搜尋功能

Related Posts Plugin for WordPress, Blogger...