自訂部落格面板式樣~標題區

近來因奇摩限制語法後~實在在奇摩部落格很不好發揮

已漸轉往各部落格去探索~~甚少上這邊來讓部落格幾乎成停格狀態

為ㄌ各格友們抬愛~~最近將製作一些部落格自訂式樣面板說明幫助一些初接觸部落格格友

能更快速順利去佈置改變自己轉屬風格的部落格

下方圖示是CSS式樣各區快標籤名稱請仔細對照

1. 奇摩置頂區標籤

#yhtw_masthead

此區塊可設定背景圖 文字顯示顏色 字型 文字大小等

範例語法如下  置頂背景圖 文字標楷體  文字大小 120%

 #yhtw_masthead{background: url(背景底圖網址) font-family:標楷體;font-size:120%;}

ps:所以在你要作面板自訂的改變時在區塊名稱後 加上  {

在這符號後加上改變設定 最後再加上收尾的 }</  因此p>  因此記的 CSS語法設定一定是區塊標簽後的{..}

裡去填上設定語法

2. 改變整個橫幅地方設定的區塊標籤

#yblogtitle .mbd

這裡就是如圖中主橫幅(整個粉色區域)的地方 可做背景圖設定或是背景色設定等

如下範例

#yblogtitle .mbd {background: url(圖片網址) #8080ff repeat;}

語法中 #B0B0ff 為背景色設定色碼  repeat 式設定圖片重覆呈現(應用在小圖片建議使用四邊無接縫的四角背景圖)

如是使用大一些圖片 請設成 背景圖不重覆 → no-repeat

3. 部落格名稱文字設定處區塊標籤

#yblogtitle h1

這裡可以改變部落格名稱處文字顏色及字體大小等

如下範例:

#yblogtitle h1 {color: #00FF00; font-family:標楷體; FONT-SIZE:30px;}

需注意如你有另設定超連結文字顯示顏色時會引響這裡的設定

可以利用下方語法單獨設定不受引響

如下範例:

#yblogtitle h1, #yblogtitle a {color: #00FF00; font-family:標楷體; FONT-SIZE:30px;}

如要將部落格名稱處文字改成圖片替代

請使用下方範例語法

#yblogtitle .thd a {display:block;background:url(格名圖網址) center no-repeat;display:block;width:圖寬px;height:圖高px;font-size:0;text-indent:-5000px;}

語法中 center 是設定替代圖置中 預設是置左 如不要改變原來位置將 center刪除即可

no-repeat 是圖片不重覆 字體大小為font-size:0 而文字排縮text-indent:-5000px(目的為移出顯示圖片作用)

4. 部落格描述文字設定區塊標籤

#yblogtitle.mbd .tbd

這裡是部落格描述文字設定

如下範例:

#yblogtitle .mbd .tbd {font-family:標楷體; color:#00007f;font-size:150%;text-align:left;width:90%;height:205px;position:relative;top:85px;left:5px;}

語法中設定註解

字型→font-family:標楷體

 字體顏色 color:#00007f

字體大小→- font-size:150%

文字靠左→- text-align:left

文字顯示範圍寬度高度→width:90%;height:205px

絕對位置→position:relative

文字位置→top:85px;left:5px

5. 招呼欄位區塊標籤

#yblast

招呼語隱藏"我要留言"字樣(招呼語有連結作用時，此語法不能使用)

#yblast .text a{display:none;}

招呼語-自訂背景圖語法

底圖圖如果與字寬同寬時，可設 no-repeat (圖片網址空白不填網址即透明)

#yblast .bg {background: url(圖片網址) repeat;}

招呼語-文字置中-文字位置~字體顏色-字型-大小-粗體(當招呼語有連結作用時，需在.text後空一格加入 a 改變為連結的字體作用)

語法範例

#yblast .text{text-align:center; position:relative;top:-45px;left:-10px;color:#FF0000;font-family:標楷體;font-size:300%;font-weight:bold;}

6. 訂閱圖區塊標簽

div#btnsbsrb_nologin a,div#btnsbsrb a

範例語法:

div#btnsbsrb_nologin a,div#btnsbsrb a {display:block;background: url(圖片網址); margin:100pt 0pt 0pt 0pt; width:訂閱圖寬度;height:訂閱圖高度;no-repeat;}

語法說明

顯示連結區塊設定 → display:block

改變圖示位置四邊不同值~~順序為上、右、下、左 → margin:100pt 0pt 0pt 0pt

圖片不重覆 → no-repeat

圖片重複方向定義解說 :
repeat-x = 橫向排列，適用垂直條形圖;  
repeat-y = 縱向排列，適用水平條形圖;  
repeat = x-y軸同時排列，適用方形圖;  
no-repeat = 單張圖片不重複，適用與架框同等長寬的圖片

文　字　設　定   參   數  值　　　　
  

文字樣式屬性	常用一些設定值	說明	範例
font-family :	細明體, 標楷體, Time new roman, arial, serif, san-serif, Comic Sans MS, Arial Black	文字字型	{font-family:arial;}
font-color :	色碼(如#FFFFFF..)、顏色的英文字(如:red、black、white..)	字體顏色	{font-color:#FFFFF;}
font-style :	normal(正常體)、 italic(斜體)	字體樣式	{font-style:normal;}
font-weight :	normal(正常體) 、bold(粗體)	字體份量	{font-weight:bold;}
font-size :	xx-small、x-small、small、medium、large、x-large、xx-large、larger、smaller、  長度值(如:10pt)或百分比值	字體大小	{font-size:10px;}
text-decoration :	none(連結無底線)、underline(連結加底線)、overline(連結加頂線)、linethrough(連結加刪除線)、blink(連結閃爍)	文字裝飾	{text-decoration:none}