image

 

 

1075865138180_9218.gif

 

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

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

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

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

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

 

1075865138180_9218.gif

 

 

如果想要自己調整部落格標題、敘述、導覽列的位置跟大小,相關的語法如下

部落格封面橫幅區塊標題的語法是 #banner h1 或是 #header h1

            如果這兩個都沒反應試試看 #banner h1 a 或是 #header h1 a

部落格封面橫幅區塊敘述的語法是 #banner h2或是 #header h2

部落格封面橫幅區塊導覽列的語法是 #navigation

 

 

de75dfd240e76913fd4d393b4930d11f.gif我想讓標題跟其他的內文有點區分,給他加個陰影上去

加上這段語法 text-shadow:3px 3px 3px #cccccc; 就可以做到囉!

來看一下標題加上陰影前後的變化!

 

Before                                                           After

截圖 2020-06-13 下午4.23.29.png  截圖 2020-06-13 下午4.25.22.png

 

如果你調整#banner h1或是#header h1都沒有改變

 

可以試試看調整 #banner h1 a或是#header h1 a

 

我的部落格標題字體大小就是在#header h1 a才有反應

 

因為每個人套用的版型語法寫法都有一點不太一樣,所以可以都試試看喔!

 

《重要》如果你的部落格標題想要直接P在橫幅圖片上,要捨棄原先痞客邦的字,千萬別直接把部落格標題刪除!

因為那樣會導致你的部落格變成一個"沒有名字的地方",這樣要找到你的部落格就難上加難了!

如果你把部落格標題P在圖片上,你的部落格標題還是要打出來,可以在標題的語法(#banner h1或是#header h1)裡面的語法裡面

先試著調整那幾個字的位置跟你的橫幅圖片上面P好的部落格標題盡可能的大小、位置都重疊

然後你再把#banner h1或是#header h1裡面加上 display:none; 隱藏標題

這樣你的部落格就可以"有名有姓",還可以依照自己喜好愛給它用什麼字型就用什麼字型!!

 

 

 

de75dfd240e76913fd4d393b4930d11f.gif如果你想要改標題、敘述的字型、大小、粗細等等,請一併參照這一篇痞客邦新手入門 [5] 如何修改版面的字體

 

de75dfd240e76913fd4d393b4930d11f.gif如果你想要人工指定文字的位置,以下這兩個語法梅花很常拿出來try !

margin         文章內文和邊界之間的距離(單位可能是px、em)(1em=16px)

margin-top   上邊界 margin-bottom   下邊界
margin-left   左邊界 margin-right   右邊界

或是直接設定在同一行 margin:上邊界 右邊界 下邊界 左邊界;

06004083.gif

padding       留白的距離

padding-top   上留白 padding-bottom   下留白
padding-left   左留白 padding-right   右留白

或是直接設定在同一行 padding:上留白 右留白 下留白 左留白;

06004083.gif

 

 

 

梅花的語法筆記

檢視CSS標籤F12 文章區塊 #content
*開發人員工具* *改文章標題字體、背景*
部落格整體 #body *改行距、邊界*
*換背景底圖* 公告版面 #spotlight
*換字體* *公告版面應用*
*換部落格ICON* 實用推薦
*設計LOGO*  *讓部落格可以被Google*
封面橫幅#banner/#header *Google Analytics分析*
*換封面底圖* 其他應用
*部落格標題敘述大小位置* 0074.gif梅花的語法筆記本0074.gif
側欄區塊 #links *文章內的目錄(錨點)image
*改側欄標題的背景* *關閉遮蓋版面的廣告*
*Facebook粉專外掛image *隱藏上方藍色選單*
*音樂外掛image *連結Google相簿*
*YouTube外掛image *圖片瘦身不失真*
*分享連結階層*  
   

 

arrow
arrow

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