如何讓招呼語框的文字置放在圖片中間及改字體文字加大－DIY玩化學

逛了好多格友的部落格，許多格子的招呼語文字都貼在圖片上邊，

記得最早之前曾找過讓文字置中的語法，

今正逢時，就把語法貼出來，讓大家分享，希望對大家有幫助。

( 語法出自玄音 )

1.先看看奇摩原設的招呼語放置，文字有置中喔。

語法範例↓

/*Opacity for blast 奇摩招呼語預設語法*/
#yblast .bg {zoom:1; filter:alpha(opacity:100); background: url(http://tw.yimg.com/i/tw/blog/yimg/blast_bg1.gif) no-repeat}

↓

2.再來看看，若自行加入圖片後→　文字會貼在上方且圖片無法全部顯示喔。

語法範例↓

/*Opacity for blast 更換招呼語圖框*/
#yblast .bg {zoom:1; filter:alpha(opacity:100); background: url(http://blog.yam.com/love454517/a142bcdc.gif) no-repeat}

↓

3. 把招呼語換成這段語法→　看到了嗎？文字在中間了，且圖片全部顯示了唷。

※若是您只想讓文字單純置中，就可以複製下列語法，置換您格子裡的CSS裡的這段招呼語法，然後修改一下圖片網址，就可以囉。看清楚唷，圖片網址有兩個地方都要改喔。

語法範例↓

/*Opacity for blast招呼語圖框文字置中*/
#yblast{zoom:1;position:relative;top:-20px;left:0px;margin:0 0 -55px 0;z-index:2;}
#yblast .text,#yblast .bg{overflow:hidden;padding:5px 5px;width:555px;height:70px;}
#yblast .text{zoom:1;margin:-55px 0 0;}
#yblast .text a
#yblast a.edit{background:url(http://blog.yam.com/love454517/a142bcdc.gif);width:13px;height:13px;}
#yblast .bg {zoom:1; filter:alpha(opacity:100); background: url(http://blog.yam.com/love454517/a142bcdc.gif) no-repeat}
#yblast .text{color:#2D328D;font-size:100%;}

↓

可以自行應用語法設定→　將 margin:-xxpx　改成 -57px 招呼語框就會貼齊最新文章邊線。

加入字體指令→　font-family:標楷體;　就可以改變字型了

(↑任何字型都可以，但若對方電腦沒有您設的字型，觀看時還是會變成細明體喔)。

再來就是將百分比的數字加大→　font-size:150%;　文字就會變大了，(數字越大文字越大喔)。

語法範例↓

/*Opacity for blast招呼語圖框貼齊最新文章邊線及換字體加大文字*/
#yblast{zoom:1;position:relative;top:-20px;left:0px;margin:0 0 -57px 0;z-index:2;}
#yblast .text,#yblast .bg{overflow:hidden;padding:5px 5px;width:555px;height:70px;}
#yblast .text{zoom:1;margin:-57px 0 0;}
#yblast .text a
#yblast a.edit{background:url(http://blog.yam.com/love454517/a142bcdc.gif);width:13px;height:13px;}
#yblast .bg {zoom:1; filter:alpha(opacity:100); background: url(http://blog.yam.com/love454517/a142bcdc.gif) no-repeat}
#yblast .text{color:#2D328D;font-family:標楷體;font-size:150%;}

↓

5. 語法說明：

/*Opacity for blast招呼語圖框文字置中*/

#yblast{zoom:1;position:relative;top(圖片.文字位置往上移):-20px;left(圖片.文字位置往右移):0px;margin:0 0 -55px 0;z-index:2;}
#yblast .text,#yblast .bg{overflow:hidden;padding:5px 5px;width(圖片寬):555px;height:(圖片高)70px;}
#yblast .text{zoom:1;margin:-55px 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:#2D328D;font-family(設定字體):標楷體;font-size(文字大小):125%;}