我換新的部落格樣式了,更換樣式之後,就想要更換橫幅,因為我很不會用CSS,弄了老半天,終於弄好了。

方法如下:

 

首先選擇自己想要的圖片,並且製作成自己想要的大小後,上傳至痞客邦的相簿中。

 

因為痞客邦相簿改版後,在痞客邦的相簿中無法選擇觀看原圖(似乎只有VIP可以用此功能?我是找不到地方可以選觀看原圖啦!非VIP的人,有找到的麻煩跟我說一聲嘍),所以新增一個文章(標題可訂為「橫幅」),並且在文章中選擇「插入圖片」,插入那個想要作為橫幅的圖片,在下方閱讀權限的部分選擇「隱藏」,並且選擇「置頂」(選擇置頂是因為以後修改方便,所以可以省略)。

 

然後進入此篇文章主頁,在圖片上按右鍵,找到「內容」,複製圖片網址。

痞客邦css04.jpg  

 

再選擇《部落格》,至網頁左邊的《部落格後台》中選擇《自訂樣式》,再選擇《CSS原始碼編輯》,然後再按《ctrl+f》搜尋《header》。

痞客邦css03.jpg  

  

就會看到類似以下的css碼:

#header{
background:url(http://pic.pimg.tw/bamcloud/1191023817.jpg) no-repeat scroll center 80px;
clear:both;
float:left;
height:350px;
width:100%;
}

 

再將剛剛複製的圖片網址貼在url之後的括號中,取代原來的網址,即:

background:url(複製之圖片網址)

 

可以先選擇「預覽」看看有無問題,沒有問題的話,就按「儲存」。

 

於是就有屬於自己風格的橫幅啦!  

 

完成後是這樣:

痞客邦css05.jpg  

 

還滿好玩的,有興趣的人可以試試看!

 

我會弄很久是因為我以為痞客邦的相簿中的複製語法可以直接拿來當作圖片網址,但其實是不行的,還是必須按右鍵後,複製內容中的圖片網址才可以。但是痞客邦相簿現在按右鍵後,並不會出現「內容」的選項(好像是改版後才變成這樣,似乎現在只有VIP可以?)。後來我就想說上傳到自己的無名相簿中,然後用它的原圖大小的網址,但後來才發現無名相簿的圖片網址會一直變動,圖片很快就連不上了,所以無法用它的圖片網址做橫幅。

 

再來,我就想到上述發表新文章,然後插入圖片的辦法啦!結果就成功了(笑)。

 

當然,有更好的辦法的話,歡迎提出喔!

 

~~◎相關網站◎~~

痞客模板 CSS 架構圖釋出   痞客邦 PIXNET 站方部落格

這裡有痞客邦CSS的架構圖可以觀看。

 

CSS 語法教學

很詳盡的語法教學網站。

創作者介紹
yun

Sub Rosa 玫瑰之下

yun 發表在 痞客邦 PIXNET 留言(3) 人氣()


留言列表 (3)

發表留言
  • Leilei
  • 謝謝你的分享...
    蕾也是卡在找不到照片網址
    直拷貝相本裡的網址至語法裡面
    真的行不通
    找了好久才看到你的分享
    成功之後~~真的高興到想哭
    ^^
    感恩~~
  • 不客氣喔!
    我到現在都還是用這種方法改圖片的。

    yun 於 2014/11/16 23:31 回覆

  • Ellen
  • 謝謝你的分享~
    我也是卡在按右鍵卻沒有網址的步驟…後來是想到用手機至相薄開啟圖片後長按圖片“複制圖片網址”再留言到文章裡的方式來改圖 就在這時看見本篇 呵呵 是不是有異曲同工之妙呢~
  • 感謝您提供另外一種方法嘍。

    yun 於 2014/11/16 23:33 回覆

  • ♡泡芙媽咪♡
  • 謝謝你的分享~~~

    我有申請vip、但一樣沒辦法選擇原圖大小上傳:'(
    今天依照你的步驟終於完成了~~~

    推一個^___^
  • 原來VIP也沒有這個功能喔。

    yun 於 2015/02/25 20:30 回覆