梅花問路 消除醜醜的藍色頂端列 自訂網頁LOGO 天界之舟

 

1075865138180_9218.gif

 

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

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

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

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

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

 

1075865138180_9218.gif

 

梅花的語法筆記

檢視CSS標籤F12 (Ctrl+Shift+I) 箭頭粉.jpeg *開發人員工具*


部落格整體 #body 箭頭粉.jpeg *換背景底圖*箭頭-15.png*換字體*箭頭-15.png*換部落格ICON*箭頭-15.png*設計LOGO* 


封面橫幅#banner/#header 箭頭粉.jpeg *換封面底圖*箭頭-15.png*部落格標題敘述大小位置*


文章區塊 #content 箭頭粉.jpeg *改文章標題字體、背景*


公告版面 #spotlight 箭頭粉.jpeg *公告版面應用*


側欄區塊 #links 箭頭粉.jpeg *改側欄標題的背景*箭頭-15.png*Facebook粉專外掛image箭頭-15.png*音樂外掛image箭頭-15.png*YouTube外掛image箭頭-15.png*分享連結階層*


實用推薦 箭頭粉.jpeg *看所有語法筆記文章*箭頭-15.png0074.gif梅花的語法筆記本0074.gif箭頭-15.png*看梅花的CSS標籤筆記*箭頭-15.png*文章內的目錄(錨點)image箭頭-15.png*關閉遮蓋版面的廣告*箭頭-15.png*隱藏上方藍色選單*箭頭-15.png*連結Google相簿*箭頭-15.png*圖片瘦身不失真*箭頭-15.png*讓部落格可以被Google*箭頭-15.png*Google Analytics分析*
箭頭-15.png精美分隔線圖片大全箭頭-15.png語法DIY美美的標題分隔線

 

痞客幫新手入門

痞客邦新手入門⑴|新手基礎入門設定 開啟部落格 設定作者名稱 痞客邦新手入門⑹|如何自訂個性化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就直接上傳一張很小的圖片,我上面用的那張圖就超小--可以不用額外語法調整的版本極小的梅花問路logo.png)

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

梅花是自己人工使用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;

 

 

 

藍綠色簡約方塊分隔線-1.png藍綠色簡約方塊分隔線-1.png藍綠色簡約方塊分隔線-1.png

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

 

痞客邦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

arrow
arrow
    創作者介紹
    創作者 梅梅 的頭像
    梅梅

    梅花問路

    梅梅 發表在 痞客邦 留言(6) 人氣()