2007年5月9日 星期三

如何在文章標題前加小圖

其實在很多留言裡我有教過了

但因為還是不斷的有人來問我
所以也教一下大家歐~

這段CSS語法, 沒有包含在yahoo原本給的css編輯框裡, 所以你只要把語法加上去即可

/*article content module*/
.yblogcnt .blgtitlebar h2 {font-size:126%;font-weight:bold;background:url(小圖網址) no-repeat;padding-left:28px;}
.yblogcnt .blgtitlebar h2 a {color:#000000; }



‧h2是指文章標題

‧font-size 是文字大小 yahoo預設的是126% , 想加大或變小 直接改數字即可 (%是相對大小)
 文字大小也能改成固定大小, 例如12px, 14px, 之類的

‧font-wight是字體粗細, 因為是文章標題, 所以我設的是粗體字 bold,如果你不想加粗,直接把那段語法刪掉即可

‧background是背景顏色或背景圖的設定指令,因為我們要在標題前面加小圖,所以要把小圖的圖檔連結設定在這邊,後面加 no-repeat 表示背景圖不重覆顯示
 設定完成後,那段語法應該長這樣:background:url(http://tw.yimg.com/i/tw/hp/spirit/yahoo_logo.gif) no-repeat;

‧padding-left:28px,指的是文字和左邊要隔多寬,數字的大小是依照圖片的寬度決定的,如果圖片寬是30px,你就要把28改成31或32,才不會文字標題去蓋到圖。

第2行的h2 a{color:#000000;} 是標題連結的顏色設定, 如果你要改標題的顏色,就從這邊改喔!

色碼表可以點到這邊參考

小圖網址 這邊有很多, 但大家不要選太大的小圖去放歐, 因為你的文字沒那麼大, 如果圖太大, 那圖只會顯示一半而以唷~ (看得懂日文的人可以到素材網去看看)
 
希望大家的blog都美美的唷~
您是第位訪客

沒有留言:

張貼留言