《【3C實用】⌥如何更換插入痞客邦部落格bannerCSS封面圖片大小寬度!6個簡單步驟無BUG!!2019更新》 @ bananaowo@gmail.com

【如何更換部落格封面圖片大小寬度!最寬版簡單6步驟!】

一開始就想要全準備好這算是有某種精神潔癖吧(唉~)，反覆摸索了好幾個禮拜才弄了屬於自己的個人風格樣式，反正就是自己看爽的!! 弄的華麗做作一點挺舒服的~嘿嘿

進入正題! 就要來挑戰 "我自己的螢幕" 最寬寬度"
首先，你要先衡量，痞客邦官方的自訂樣式最寬版的是不是你喜歡的，現在2019已經有了比較多元化的版面出現，不然一步一步改下去真的是個坑
我自己是從下面這個樣式下去改的

不同的樣式語法開頭會略有不同，但大致上都是一樣(想更進階的可以搜尋CSS標題語法等等關鍵字)

簡易插入封面圖片 :到『管理後台→自訂樣式→自訂樣式簡易版』插入主視覺圖片，也可以自己決定封面圖片跟背景圖片
但官方樣式的圖片大小是950*300px，如果想要符合自己理想中的舒服寬度一定就要從CSS原始碼編輯下手了!

再進入CSS的世界之前先預想自己想要的封面圖片尺寸

我螢幕是25吋，封面圖片大小是1800*500px，剛好滿版的大小

當然在不同的顯示器會有不同的效果，我自己是覺得自己最適合看的大小一定最適合，畢竟編輯起來也方便

挑一張解析度不算差的封面圖片，開始6個CSS步驟
(我自己是還有美圖編輯剛好做成1800*500px大小)

一、拓寬內文區塊

其實真的很簡單，想要封面圖片加寬，當然內文也要等比加寬看了才舒服

.article content /*文章內文*/：在width(寬)把650px改成1350px

二、拓寬內容區塊

#container3 /*所有內容區塊3*/：在width(寬)把950px改成1800px
這時候封面照片已經是1800px的寬度了喔~接下來要調整高度

三、加高橫幅架構高度

#header /*橫幅*/：在height(高)把300px改成500px (可以自行調整到想要的高度)

四、加高橫幅內容高度

#banner /*橫幅主要內容*/：在height(高)把300px改成500px
注意:第三跟第四項高度必須一樣

五、調整其他頁面導覽列

#navigation /*其他服務頁面導覽*/：在top(頂端距離)把315px改成515px

六、放入圖片(重要)
終於試出來這個方法最簡單
我先把改好的圖片1800*500px放入相簿，再按右鍵〈複製語法〉

注意!! 會發現有兩串網址，請選" "第二串網址複製下來
以下範例:
<a href="http://bananaowo.pixnet.net/album/photo/159118-48995"><img src="https://pic.pimg.tw/bananaowo/152001-502638950_l.jpg"></a>
複製下來後貼到打圈的地方覆蓋

最後，要將_n刪除