梅花問路

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

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

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

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

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

梅花的語法筆記

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

調整文章標題在CSS裡面搜尋 .title h2 a 或是 .article-head

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

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

更改字體調整 font-family:

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

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

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

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

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

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

我們把紅框處標示的這種.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裡面可以搜尋.publish或是.time

因為大家的語法寫的都有一點點不太一樣，梅花這邊盡量把可能是可以改的地方語法名稱都寫上來

如果你的這些地方都試著去改過，版面還是沒有任何變化，可以留言給梅花討論唷！

梅花問路的文章標題日期是「月、日、星期、年」

因為在摸索的關係，我調了很多的地方，結果我自己的標題日期跑版！

看了很多教學文章我都找不到應該要改哪裡才可以調整好

有些語法是別人的有但是不知道為啥你的沒有！人家說改那個有效，可是你就是找不到那個東西！

後來我的解決方式就是自己加語法上去，我在.publish後面自己加入了這一串才終於解決！

.month {                                                  月份
font-size:15px;                                       字體大小
position:relative;
float:left;
text-align:left;                                       字體靠左
margin:0 3px 0 1px;                                指定位置(margin指的是文字和邊界的距離)
font-family: monospace, Arial;               使用的字型
}

.date {                                                    日期
font-size:15px;
position:relative;
float:left;
text-align:left;
margin:0 1px 0 2px;
font-family: monospace, Arial;
}

.day {                                                    星期
font-size:15px;
position:relative;
float:left;
text-align:left;
margin:0 3px 0 3px;
font-family: monospace, Arial;
}

.year {                                                    年份
font-size:15px;
position:relative;
float:left;
text-align:left;
margin:0 2px 0 1px;
font-family: monospace, Arial;
}