此處標示紅字的語法,要定位或是更改這些語法在自己樣式裡面的位置,進到自己的CSS路徑是
右上角點自己的頭像我的部落格後台樣式管理部落格CSS原始碼
搜尋語法的話可以按Ctrl+F搜尋即可~
如果梅花所提供的語法尋找名稱你怎麼樣都找不到的話請參考以下文章利用開發人員工具尋找可能的語法位置
如果想要自己找圖片替換自己部落格的封面橫幅底圖,相關的語法如下
部落格封面橫幅區塊搜尋的語法是 #banner 或是 #header
(推薦pngtree註冊每日可免費下載兩張) /建議挑選"橫向圖片"
要替換橫幅底圖修改background:url(你的圖片位址);
(圖片請一律上傳到自己的相簿,在自己相簿那張圖片找出語法,該圖的頁面
你複製出來的東西通常長這樣
我們把紅框處標示的這種.jpg、.png、.gif之類結尾的圖片位址檔複製出來取代你的圖片網址這幾個字
background:url(你的圖片網址);
底圖不夠大可以加上一行 background-size: cover; 強制圖片變成全版
(這個方法如果你的圖片畫質不夠是會失真的,可以自行評估是否要使用)
如果你放了圖片網址,也確定你的圖明明很高畫質、很高清,但語法用出來結果顯示就是不夠大!(或者畫質很差)
先檢查看看你的圖片網址在.jpg、.png、.gif前面有沒有"_I"、"_1"、"_n"之類的字串,請把它移除
上傳到相簿的照片可能會有這些結尾,分別代表的意思如下(參考出處: 圖片大小迷思)
大 1024 | _I |
中600 | _n |
小450 | _m |
大縮圖 170*170 | _q |
中縮圖 120*120 | _s |
小縮圖 90*90 | _t |
如果你想要放的圖片寬度不夠,你想要讓圖片可以"重複"
可以使用這段語法 background-repeat:重複方向的參數; (參考資料: Wibibi網頁教學百科-背景圖片重複)
參數 | |
repeat | 預設重覆方式,背景圖片依 x 軸與 y 軸重覆呈現。 |
repeat-x | 背景圖片沿 x 軸重覆呈現。 |
repeat-y | 背景圖片沿 y 軸重覆呈現 |
no-repeat | 背景圖片不重覆出現,就是只出現一次。 |
如果你放的圖片只是位置錯了而已,你可以加一段語法控制圖片位置
background-position: 背景圖片水平位置參數 背景圖片垂直位置參數 ; (參考資料: Wibibi網頁教學百科-背景圖片位置)
參數 | |
水平方向 | left(靠左)、center(置中對齊)、right(靠右) |
垂直方向 | top(靠上)、center(置中)、bottom(靠下) |
如果你想要人工指定底圖的位置,以下這兩個語法也是梅花很常拿出來try的
margin 文章內文和邊界之間的距離(單位可能是px、em)(1em=16px)
margin-top 上邊界 | margin-bottom 下邊界 |
margin-left 左邊界 | margin-right 右邊界 |
或是直接設定在同一行 margin:上邊界 右邊界 下邊界 左邊界;
padding 留白的距離
padding-top 上留白 | padding-bottom 下留白 |
padding-left 左留白 | padding-right 右留白 |
或是直接設定在同一行 padding:上留白 右留白 下留白 左留白;
如果你放了圖片,但是發現你的圖太大了,原始的封面框架沒辦法完整顯示出你的首圖
除了上述的小技巧可以去調整之外,在#banner或是#header裡面可以試著去直接調整width(寬度)、height(高度)
梅花的語法筆記
檢視CSS標籤F12 | 文章區塊 #content |
*開發人員工具* | *改文章標題字體、背景* |
部落格整體 #body | *改行距、邊界* ⛔ |
*換背景底圖* | 公告版面 #spotlight |
*換字體* | *公告版面應用* |
*換部落格ICON* | 實用推薦 |
*設計LOGO* | *讓部落格可以被Google* |
封面橫幅#banner/#header | *Google Analytics分析* |
*換封面底圖* | 其他應用 |
*部落格標題敘述大小位置* | *梅花的語法筆記本* |
側欄區塊 #links | *文章內的目錄(錨點)* |
*改側欄標題的背景* | *關閉遮蓋版面的廣告* |
*Facebook粉專外掛* | *隱藏上方藍色選單* |
*音樂外掛* | *連結Google相簿* |
*YouTube外掛* | *圖片瘦身不失真* |
*分享連結階層* | |
留言列表