なんかブログのデザインをぐりぐりいじっているヒトビトに刺激されて？
へっだ～の画像をチトいじくってみた。。
ブログ上の画像、マウスカーソルを合わせると画像が変わります～。
うん、それだけー。
やり方。
まず、画像を２枚用意。
通常版とロールオーバー後用の２つ。
んで、みんカラの「スタイルシート用画像」に２つともＵＰします。
ＵＰ後にURLを指定されるので記録しておきましょう。
その後、スタイルシート編集で「Header」部分を探します。
そんでもって、以下のように記載。
#Header{
padding:0px;
height:254px;
background-image: url('通常時の画像URLを記載');
background-repeat: no-repeat;
}
height:254px;
の部分は、画像の高さに合わせて数値変更してください。
でもって、以下を追記します。
#Header .BlogTitle a{
width: 760px;
height: 254px;
text-align: left;
margin: 0px;
padding: 0px;
font-size: 10px;
display:block;}
#Header .BlogTitle a:hover{
margin: 0px;
padding: 0px;
background-image: url('ロールオーバー後の画像URLを記載');
background-repeat: no-repeat;}
これでおっけ。
ちなみに、
#Header .BlogTitle a～
の部分ですが、
width: 760px;
height: 254px;
は画像サイズに合わせて数値を変更。
text-align: left;
margin: 0px;
padding: 0px;
font-size: 10px;
この部分でタイトル文字のサイズや位置を指定できます。
marginとpaddingは若干テクニカルなのでいじらん方がよいかな～？
細かいコトは
ココに結構詳しく書いてあるので
参考にしてください。。。
Posted at 2009/02/04 09:31:22 | |
トラックバック(2) |
なんかサイトの制作とか。 | 日記
なんかブログのデザインをぐりぐりいじっているヒトビトに刺激されて？
