2010年3月12日 星期五

[天空部落格]如何更換部落格上方banner的圖片

進到管理介面後,請點選上方功能列的功能設定按鈕。

接著,請點選左方功能列的樣版設定按鈕。

此時,中間區塊已經切換成樣版設定的設定內容了,請點選樣版設定小幫手。

此時,將會開出一個新的視窗,這個視窗共分三個部分,分別是:左上方顯示變更區域選擇、右上方顯示區域內容細部設定、正下方顯示前台網頁改變後的狀況。

點選左上方顯示變更區域選擇的上方大區塊,裡面有上面Banner及文字兩個選項,當點選上方Banner時。

右上方就會變更成上方Banner的相關選項,在這裡可以設定上框Banner的版面大小,可以設定使用什麼背景圖片等相關選項。

如果點選左上方顯示變更區域選擇的上方大區塊,裡面的文字,則可以改變部落格標題、部落格描述、頻道選擇等文字的位置及字的顏色(字的顏色有時候會受CSS語法的影響,所以不見得能設定成功)。

為了方便大家清楚辨識,天空部落格很貼心的做了一個設計,只要將滑鼠移動到右上方的上框Banner的旁邊紅色字的上方。

在下方 的顯示區域就會以紅色框框標出即將改變的區域。

當完成相關設定後,請記得移到左上方,點選下方的儲存目前的設定。

當然,這樣的設定方法雖然方便,但是有時候還是會有無法設定成功的狀況,因此這時候我們必須學會如何看懂部落格的CSS設定喔!回到樣版設定,接著請點選編輯CSS檔。

此時會開啟部落格的CSS語法檔案,在這裡的CSS語法是控制整個部落格外觀顯示的一個重要地方,只要改變CSS語法,整個部落格的外觀便跟著改變。

這也是為什麼當我們套用選擇樣版時,整個部落格的外觀就跟著改變了!因為是直接套用新的CSS語法。

在CSS語法檔中,部落格中的每一個元素,都會對應到一個相對的語法設定,因此請拉動右方的拉桿,尋找#banner{的位置。

在這段語法中,告訴我們一件事情,那就是上方Banner的圖片的寬度是960px(因為WIDTH:960px)、高度是148px(因為HEIGHT:148px),圖片的來源是來自於哪個網路位置(反白的部分)。

因此,我們只要能夠做出一張寬度為960px、高度為148px大小的圖片,並將這張照片傳到網路空間,接著再去變更CSS語法中圖片來源,就可以順利變更部落格的樣式啦!

那要如何做出一個寬度為960px、高度為148px大小的圖片呢?我們將透過Photoscape這套軟體幫我們來完成這個任務。請事先準備一張想要編修後上傳的照片。(點選下面的範例圖片後,會開啟這張照片的原始檔,請將照片另存新檔後即可練習)

接著,請打開Photoscape這套軟體,並點選相片編修功能。

進到相片編修功能後,請先點選左上方找到該張圖片的所在位置,接著點選左下方要編輯的檔案,此時右側的相片編修畫面就變成你要編修的畫面了!。

請切換下方的編修功能至剪裁。

點選自由剪裁後方的下拉式選單,選擇指定比例/大小剪裁。

在剪裁的設定畫面中,請勾選指定比例,寬度:高度請設定為960:148。為何要指定比例而不是指定大小呢?因為如果指定大小,在照片上裁切的範圍就被固定住了!會造成只裁切到部分區域的遺憾。

接著,以拖曳的方式,在畫面上擷取想要呈現的範圍。

完成後點選下方的剪裁按鈕。

裁切成功。

接著切換到編輯功能列的主要功能。

請點選調整大小按鈕,並將寬度設定為960像素(由於預設是維持寬高比例,因此此時高度將自動變成148像素),設定完成後按確認。

接著,請點選儲存。

請直接點選儲存,這時候儲存後的檔案會放在跟原檔案相同位置處的一個叫Originals的資料夾中。

請回到天空部落格中的相簿功能,接下來我們要將相片上傳到網路相簿中。

點選左方功能列的相簿管理。

接著點選上方功能列的新增相簿。

替這本相簿設定好相關資料吧!完成後按新增。

點選左方的上傳相片。

相片上傳到指定的資料夾,相片調整尺寸請記得選擇1024×1024喔。(如果設定成800×800或600×600),則相片會被壓縮,這樣大小就不一樣啦!

點選新增上傳圖片,並按確認上傳。

上傳成功,接著點選前往該相簿。

接著變會移到該本相簿之中,請點選下方的縮圖。

此時會開啟這張相片在網路相簿的位置。

請在這張照片上按右鍵選內容,這這時候就會知道這張照片的網路位置啦!將這段位置選取後複製。

回到剛剛編輯CSS語法的位置(功能設定\樣版設定\編輯CSS檔)。

找到banner圖片所在位置的語法,將它改成我們剛剛複製的這一張圖片網址。

完成後,請點選下方的儲存。

點選右上方的預覽部落格\網誌。

banner果然變更成功啦!真棒!

如果你對其他相關的設定有興趣,也可以回到剛剛編輯CSS語法的位置(功能設定\樣版設定\編輯CSS檔)。點選CSS樣式表。

在樣式表中很清楚的定義了天空部落格中,各個欄位所代表的標籤語法是哪一些,那麼接下來你就可以一一針對你想要修改的部分去做修改啦!

沒有留言:

張貼留言