梅花問路

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

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

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

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

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

如果想要自己找圖片設計自己標題的文字、底圖，相關的語法如下

調整側欄的標題在CSS裡面搜尋 .box-title

建議使用細長型的橫圖(最好是有去背的)

想讓標題置中、靠左、靠右修改這段語法 text-alight: center(置中)、left(靠左)、right(靠右);

想讓標題文字加上陰影可以加入這段語法 text-shadow:3px 3px 3px #cccccc;

更改字體調整 font-family:

更改字體大小調整 font-size:

更改字體粗細調整 font-weight:

更多的修改字體方式請一併參照痞客邦新手入門 [5] 如何修改版面的字體

要替換標題的底圖修改background:url(你的圖片位址); 

(如果你的.box-title裡面沒有這一個你就自己加進去)

圖片請一律上傳到自己的相簿，在自己相簿那張圖片找出語法，該圖的頁面

你複製出來的東西通常長這樣             

我們把紅框處標示的這種.jpg、.png、.gif之類結尾的圖片位址檔複製出來取代你的圖片網址這幾個字

  background:url(你的圖片網址);

底圖不夠大可以加上一行 background-size: cover; 強制圖片變成全版

(這個方法如果你的圖片畫質不夠是會失真的，可以自行評估是否要使用)

如果你放了圖片網址，也確定你的圖明明很高畫質、很高清，但語法用出來結果顯示就是不夠大!(或者畫質很差)

先檢查看看你的圖片網址在.jpg、.png、.gif前面有沒有"_I"、"_1"、"_n"之類的字串，請把它移除

上傳到相簿的照片可能會有這些結尾，分別代表的意思如下(參考出處: 圖片大小迷思)

放在標題嘛!常遇到的幾個問題的相關語法，梅花也一併整理在這裡

如果你想要放的圖片寬度不夠，你想要讓圖片可以"重複"

可以使用這段語法 background-repeat:重複方向的參數;   (參考資料: Wibibi網頁教學百科-背景圖片重複)

如果你放的圖片只是位置錯了而已，你可以加一段語法控制圖片位置

background-position: 背景圖片水平位置參數 背景圖片垂直位置參數 ;  (參考資料: Wibibi網頁教學百科-背景圖片位置)

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

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

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

padding       留白的距離

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

梅花的語法筆記

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