梅花問路

 

 

此處標示紅字的語法，要定位或是更改這些語法在自己樣式裡面的位置，進到自己的CSS路徑是

右上角點自己的頭像我的部落格後台樣式管理部落格CSS原始碼

搜尋語法的話可以按Ctrl+F搜尋即可~ 

如果梅花所提供的語法尋找名稱你怎麼樣都找不到的話請參考以下文章利用開發人員工具尋找可能的語法位置

【梅花的CSS學習】用「開發人員工具」檢視區塊語法的名稱

 

 

梅花的語法筆記

 

痞客幫新手入門

痞客邦新手入門⑴｜新手基礎入門設定 開啟部落格 設定作者名稱	痞客邦新手入門⑹｜如何自訂個性化ICON圖標
痞客邦新手入門⑵｜如何編輯側欄推薦連結區	痞客邦新手入門⑺｜用語法外掛來撥放音樂
痞客邦新手入門⑶｜宣傳Facebook粉專、浮動FB粉專外掛​​​	痞客邦新手入門⑻｜移除煩人的痞客邦廣告! 廣告__OUT!
痞客邦新手入門⑷｜利用公告版位製造多樣性	痞客邦新手入門⑼｜如何自己設定文章顯示的縮圖
痞客邦新手入門⑸｜修改版面的字體字型	痞客邦新手入門⑽｜如何在痞客邦發表文章

 

 

利用這段語法加在自己CSS最前面或是最後面

可以直接完全隱藏痞客邦上方那條醜醜藍藍的東東 (參考文章)

但是缺點是你沒有自己的那個頭像可以點出你的部落格後台那些

優點就是你部落格看起來會更有質感一點（梅花自己覺得）

.pixnavbar__top-bar {display:none !important}  /*不要出現藍色bar*/
.main-container {padding-top: 0px !important;}

 

 

把它變透明 

透明版(原本藍色直接變透明)

.navbar {position: fixed;top: 0;z-index: 100000001;line-height: normal;background-color: transparent;}

.pixnavbar {background-color: #fff !important;}

 

background-color: transparent

設定背景顏色 transparent就是字面上的意思讓它變透明

 

選單字樣白色，頭像無透明，其餘區塊透明(使用transparent)
.pixnavbar {background-color: transparent !important;}

 

替換藍色那條上面的痞客邦logo  

.pixnavbar__top-bar__logo {background: url(你自己想要用的logo圖片) no-repeat !important;}

(建議這張自製logo就直接上傳一張很小的圖片，我上面用的那張圖就超小--可以不用額外語法調整的版本)

字體的生成是從這裡(線上繁體字生成器) 

梅花是自己人工使用PPT去調整這四個字的間距跟大小到最後輸出這一張圖是0.49cm*1.4cm

(點它是連結到痞客邦首頁，我還沒研究出替換這個超連結的方式)

我自己替換上面的logo文字上傳的是png檔，但是這列原本設定的圖檔都是.svg

.svg圖檔也可以自己畫，只是使用上會比較麻煩要利用到google雲端(參考用法:【梅花的CSS學習】怕相簿空間不夠用，可以試試Google相簿!)

(REF.小無的教學- https://smallwu36.pixnet.net/blog/post/46006311)

 

隱藏部落格字樣

.pixnavbar-d__navbar .pixnavbar__top-bar__pix-blog {width: 70px;height: 20px;background: url() !important;}

 

 

隱藏邦邦字樣

.pixnavbar-d__navbar .pixnavbar__top-bar__pix-streamtopic {width: 45px;height: 20px;margin-left: 40px;background:url() !important;}

 

梅花現有設定懶人包 (痞客邦LOGO換成你自己的LOGO/隱藏部落格和邦邦的字樣)

/*-----------------------隱藏頂端藍色列------------------------*/
.navbar {background-color: transparent;}

/*把痞客邦LOGO替換成你自己的LOGO 放上之後 background-size(圖片大小)或width(寬度)或height(高度)  都可以自行調整看看*/
.pixnavbar__top-bar__logo {background: url(放你的LOGO圖片) no-repeat !important;background-size:100% !important; width:500px;}
.pixnavbar-d__navbar .pixnavbar__top-bar__logo {width:560px !important ;height: 47px !important ;margin-left: -100px;}
.pixnavbar, .pixnavbar-d__navbar .pixnavbar__top-bar__pix-site, .pixnavbar__top-bar__list  {background-color: transparent !important;}
/*部落格字樣隱藏*/
.pixnavbar-d__navbar .pixnavbar__top-bar__pix-blog {width: -20px !important;height: 20px!important;background: transparent !important;}
/*邦邦字樣隱藏*/
.pixnavbar-d__navbar .pixnavbar__top-bar__pix-streamtopic {width: 10px;height: 20px;margin-left: 80px; background: transparent !important;}
 

 

若是把頂端列變透明之後發現你的橫幅封面首圖沒有完全貼齊最上方(如果你沒有這問題，就忽略這一段)

試試看在語法裡搜尋#header，然後把margin-top: -40px;改成margin-top: -45px;

 

 

 

這邊的是因為我企圖看懂是啥所以用這裡的去改看看變化用的筆記

 

痞客邦logo、部落格、邦邦字樣 (參考出處)

.pixnavbar__top-bar__main-sites {display: -webkit-inline-box;display: -ms-inline-flexbox;display: inline-flex;-webkit-box-align: center;-ms-flex-align: center;align-items: center;}

 

痞客邦logo(參考出處)

.pixnavbar-d__navbar .pixnavbar__top-bar__logo {width: 110px;height: 30px;margin-right: 35px;background-size: 75px 30px;border: 5px solid #007eff !important;}
.pixnavbar a {text-decoration: none;}

 

右上那五個選項的底色(參考出處)

.pixnavbar__top-bar__list {display: -webkit-inline-box;display: -ms-inline-flexbox;display: inline-flex;-webkit-box-align: center;-ms-flex-align: center;align-items: center;border: 5px solid #c7006c !important;}

 

 

---------------------------------

文章最後面有補充右上方五個選項(我原本以為是字但其實它是圖)更改的方式(未嘗試)

https://smallwu36.pixnet.net/blog/post/46006311