鑫部落 心經營!

更換痞客邦 Pixnet封面圖懶人包 看了就會! 讓你的部落格耳目一新 (2018適用) [真.教學]

 

這一篇是好友寒武紀大的指定家庭作業，他貴人多忘事記不起如何換部落格封面圖 (banner)。

 

另外，還有幾位新好友最近更新了超寬版面 (請參這一篇:[真.教學]看了就會! 調整痞客邦 Pixnet 文章版面寬度之懶人包 (2016版))，但封面圖還是原來的，不夠寬的圖片讓整體美觀度遜色一大截。這兩個訴求其實算是同一件事，都是跟換封面圖有關，在引發眾怒之前，趕快把這篇寫好。

 

以下是我現在用的痞客邦部落格自訂 1366 超寬版面，因為封面圖沒改，所以系統會自動重覆，再拼接起來補足寬度，就是下面黃圈圈的狀況。 

 

封面圖等於是自己部落格的招牌，一定要好好利用它來展現自家風格。

 

痞客邦標準兩欄式版面，封面圖規格為 950 * 300 (寬 * 高)。延伸成 1366 寬後，則應換上 1366 * 300 封面圖。「寬 * 高」怎麼來的? 它們是定義於 CSS 程式碼內，不過本文不會有很複雜的動作，請放心。

 

我原有照片之比例不能符合，所以重拍，過程拿一把尺當參考基準，大約抓 26 cm 寬 & 6 cm 高，就可對應 1366 * 300 範圍。如果你想用既有照片去裁剪，找主題(主角)之寬高比在 5:1 附近的就可以了。

 

 

搭配寬度 1366 或以上螢幕，用 Windows 內建的「相片檢視器」全螢幕播放全圖。再按 PRINT SCREEN 或 ALT+PRINT SCREEN 截圖，之後貼到小畫家裁剪。

 

以下示範了 1366 * 300 封面圖之裁剪方式，請注意視窗底下的寬 * 高數字。(註: 如果是標準兩欄式版面，則截圖為 950 * 300，其他尺寸比照辦理)

 

封面圖建議存成 PNG 格式，這樣畫質不會損失，比 JPG 漂亮。

 

 

下面動作的目的，是把裁剪好的 1366 * 300 封面圖，上傳到痞客邦系統相簿，後面的步驟會用到它。

 

請前往「部落格»樣式管理»自訂樣式»自訂樣式進階版」，再下拉頁面到「 部落格最上面 (#header) 」位置，這區塊裡有一個功能鍵可以上傳圖片，請依以下 ① 到 ⑧ 步驟操作。

 

你可能有疑問，為什麼不在"自訂樣式進階版"直接改圖，這想法很好，但痞客邦沒提供，所以換圖的動作變得比較複雜。(正向思考是，因為這樣才有機會以此為題寫教學文)

 

2022/4/15 更新

Pixnet 新版後台之操作方式如下:

(1)進「主選單」(管理首頁左邊三條線)

(2)點擊「樣式管理」

(3)選「部落格 CSS 原始碼」分頁

(4)其他改碼動作都一樣

 

 

上傳後會出現一個網址，代表照片已經儲存在痞客邦系統相簿裡。在網址框內用 CTRL+A (選擇全部)，再按 CTRL+C (複製)，此動作是把網址複製到剪貼簿。

 

這裡有一個動作不要做, 不需要做儲存, 複製網址後直接到下一動就可以了! (因為看我文的讀者都冰雪聰明, 所以不必講三遍)

 

 

開啟記事本，按 CTRL+V，把網址貼進來。

 

 

請前往「 部落格»樣式管理»自訂樣式»CSS 原始碼編輯」，在「編輯 CSS 原始碼視窗」框框內隨便點一下，框變成淡藍色，按下 CTRL+F (內文搜尋)，輸入以下關鍵字:

#banner {

找到後，它下面的第一行會有一個 「 height:300px;」，它定義了封面圖高度為 300 點，如果想用不同高度封面圖，請改這數字。 

 

#banner {
height:300px;
background:url(https://pic.pimg.tw/newguest88/1466350676-2058820767.png);
}

 

 

換圖重點在下面的第二行，即「background:url」開頭這行，把網址部份更新便可，再把 CSS 碼存檔，如圖片示範。

 

#banner {
height:300px;
background:url(https://pic.pimg.tw/newguest88/1466350676-2058820767.png);
}

 

順便一提，封面圖的寬度，定義在「#container3 { 」之下第三行 的「width:1366px;」，它就是版面最大寬度，也等於封面圖的寬度。

 

#container3 {
overflow:hidden;
position:relative;
width:1366px;

 

還有，如果 CSS 碼已經被你改過很多次，自己弄不清楚，查看剛剛兩個地方就可以知道封面圖的寬與高了。 

 

 

測試一下的新版面，在瀏覽器下按 F5 鍵，讓畫面重新載入。剛剛調整的設定值已經發生作用，超寬 1366 大招牌出現了! (灑花)

 

 

 

以下是主要操作步驟的教學影片。(使用俄羅斯來邀稿的 Movavi Screen Capture Studio 軟體)

 

   

我自己一直使用系統提供的標準兩欄式藍天白雲版面，直到不久前 (2016/6/19) 才換了封面圖，因為我發現該版面不少人用，對辨識度來說不理想。如果部落格開始累積出人氣，就需要積極思考，在封面圖、logo...等展現出自己的風格。 

 

說來奇妙，我與寒武紀大在網路相識，一開始就是被他部落格超寬版面與大封面圖吸引，才展開後面的互動。希望換上大封面圖後，也能讓你結好緣。謝謝收看!

 

延伸閱讀 (Pixnet 超寬版面與大封面圖)

#1 超寬版面 DIY: [真.教學]看了就會! 調整痞客邦 Pixnet 文章版面寬度之懶人包 (2016版)

#2 更換封面圖:  [真.教學]看了就會! 讓你的部落格耳目一新 (更換封面圖懶人包，痞客邦 Pixnet 適用)

 

 

 

謝謝閱讀，Thank you! 敬請持續關注 鑫部落。 鑫部落。 心經營! (http://newguest88.pixnet.net/blog)

如果您喜歡這篇文章，歡迎到鑫部落粉絲團幫我們按讚(下面連結 or 左側欄)，Thank you!

合作信箱: mandy.sun@msa.hinet.net 

******************************** 

Title:更換痞客邦 Pixnet封面圖懶人包 看了就會! 讓你的部落格耳目一新 (2018適用) [真.教學] 

(Pixnet-0318)