タイトルに下線(画像)を入れたい
ブログタイトルではなく、各記事のタイトルとサイドタイトルに画像で下線を入れたいのですが、
CSSで指定できますか?
背景として入れてみましたが、反映されません。
.title{
color:#996666;
font-size:14px;
padding:0px;
backgorund: url( ) no-repeat;
}
入れたいのはこの画像です。
ご存知の方、アドバイスよろしくお願いいたします。
回答(1)
1.

backgorund: url(画像のURL) no-repeat center bottom;などと記述してみてください。
ちなみに「center bottom」ではなく「50% 100%」という指定でも結構です。
デフォルトでは一番左端の上部(CSSで位置指定すると「0(%) 0(%)」または「left top」)に表示されます。
なお、この画像の色はとても薄いので、背景色の指定によっては目立たないかもしれません。
背景色が濃い色ならば、大丈夫だと思います。
解決しました!
大変ご丁寧に解りやすく教えてくださりありがとうございました。
また何かありましたら是非宜しくお願いいたします★
コメント(4)
目立たないだけだったりして・・・
>>1補足
うっかりしていました。
「hight: ○px;」で「.title」の高さを指定し、「padding-bottom: (画像の高さ+余白分)px;」で「.title」の中の下部に余白を指定しないと、文字などに重なってしまったり、画像が表示されない場合があります。
回答ありがとうございます。
お教えいただいた通りに実行してみましたが、
やはり表示されません。。
.title{
color:#996666;
font-size:14px;
padding:0px;
hight: 20px;
padding-bottom: 10px;
backgorund: url(http://www37.tok2.com/home/haoto/img/4.gif) no-repeat center bottom;
}
どこか間違っていますでしょうか?
なお、症状はこの通りです。
http://blog.livedoor.jp/haoto_/
大変失礼いたしました。
「hight:20px;」ではなく「height:20px;」で
「backgorund」ではなく「background」です。
つづりミスのため表示できない状態になっています。
大変申し訳ありません。
あと、HTML部分に
<div class="titlebody"><h3><a href="<$ArticlePermalink$>"><$ArticleTitle ESCAPE$></a><IfArticleRating><$ArticleRatingIcon$></IfArticleRating></h3> <hr size="1" width="100%" align="center" style="color:#996666;border-style:dotted;"></div>となっていると思いますが、
<hr size="1" width="100%" align="center" style="color:#996666;border-style:dotted;">は削除した方が良いと思います。
でないと修正した後、茶色い点線と画像の点線と両方が表示されてしまいます。




