招呼語框置中語法完整教學


源:


小米酒


衷心感謝小米酒大大熱心教學!


以下是教學文章↓



米酒來教大家招呼語框置中的語法嚕!

最近啊!米酒發現格友都有許多問題,

有些人呢!是利用部落格整個版面的文字置中語法來令招呼語框置中的,

但是很多格友啊!都告訴米酒,文字置中我覺得段落不明很亂,

把文字置中語法拿掉,我的招呼語框又靠左對齊,該怎麼辦呢?

讓米酒來告訴大家吧  ^^..不需要用文字置中語法,招呼語框也可以置中喔!





改為個人風格招呼語框的語法:



/*小米酒★招呼語框-開始*/



#yblast .bg {zoom:1; filter:alpha(opacity:100); background: url(招呼語框圖片網址

) no-repeat}




/*小米酒★招呼語框-結束*/




PS:但是以上語法,只能換上個人風格的招呼語框圖片,並沒有讓招呼語框置中啊!怎麼辦呢?


      別急!小米酒會將完整語法仔細教給各位的喔  ^^













如果呢!想要將招呼語框的圖與文字置中,請參考米酒所列的語法,就不需再用全文字置中的語法下去補足嚕!

將招呼語框語與框內文字置中語法:

/*小米酒★招呼語框-開始*/

#yblast{zoom:1;position:relative;top:-20px;left:280px;margin:0 0 100px 0;z-index:2;}
#yblast .text,#yblast .bg{overflow:hidden;padding:5px 50px;width:424px;height:54px;}
#yblast .text{zoom:1;margin:-58px 0 0;}
#yblast .text a
#yblast a.edit{background:url(招呼語框圖片網址) ;width:13px;height:13px;}
#yblast .bg {zoom:1; filter:alpha(opacity:100); background: url(招呼語框圖片網址) no-repeat}
#yblast .text{color:#00AA00;font-size:100%;}

/*小米酒★招呼語框-結束*/


<<<<<<<<<<<以下是小米酒示範的招呼語框與文字置中完成圖>>>>>>>>>>>>>>>>







先說明,米酒使用的版型與大家的版型不一樣,






要測試的時候不能依我的標準為標準,






因為每一張圖檔與版型的契合度都會不相同的啊,






還有你填寫上的招呼語字數多寡以及是否有使用框線跟框線透明







都會影響數值,所以請大家慢慢更改數值反覆測試喔!












語法解說:



招呼語框置中






本來left:0px是0,現在我把它調至left:280px,招呼語框在中間了。






這調整的方法要依每張圖檔的寬來做調整唷!(數字越小圖會越左邊喔!)






調整圖框空繫



第二行的50PX,是調整招呼語框整個圖的高度!






px 越高圖檔就會越低,相反的px 越低圖檔就會越高。






調整文字往右移動






padding:5px 50px,我調整至50px,文字也就跟著往右移,






調整px越高,當然文字也就會越往右移動。






設定圖檔寬高






width:424px;height:54px→這個地方,是每張圖檔的寬高。






我所示範的招呼語框圖檔    寬→424    高→54






字體大小更改






font-size:100% →這段更改了文字大小,標準的文字大小是100%






可以字行放大或縮小喔!






文字顏色更改






color:#000000→這個地方就是更改文字顏色,米酒提供色碼表供大家改變色彩喔 ^^














色碼表連結:http://user.infor.org/~ohb/colorcode.htm  <------點擊進入色碼表頁面














附註:小米酒提供的語法最後一行,可以加上font-family:標楷體,範例如下。





#yblast .text{color:#000000;font-family:標楷體;font-size:150%;}  
   



加入字體指令font-family:標楷體;可以改變字型,任何字型都可以





但若對方電腦沒有您設的字型,觀看時還是細明體喔!







(opacity:100) →調整招呼語框透明度   0→全透明    100→不透明








接下來,小米酒就要教大家,怎麼將招呼語框設置在自己的部落格裡啦 ^Q^





首先,按管理部落格,【一】面板設定【二】選擇自訂樣式【三】將複製的語法貼在CSS欄位裡




至於找到的招呼語框樣式,怎麼知道他的圖檔網址在哪呢?又怎麼看他的寬與高尺寸多少呢?




請看以下的圖檔說明喔 (要先對找到的圖檔用滑鼠對準圖檔按右鍵才會出現下圖唷!)












還有問題隨時歡迎再來問小米酒 ,米酒會竭盡所能會大家解答的。

PS:簽名檔連結到米酒部落格,還有很多台灣奇摩部落格的怖置語法教學 ^Q^

教學相當清楚~


還有圖片&文字的說明~相信大家應該都學得會吧!!




 


 


 


 


 

arrow
arrow
    全站熱搜
    創作者介紹
    創作者 min 的頭像
    min

    ♫ みんのブログ ♫

    min 發表在 痞客邦 留言(1) 人氣()