解決済

clip!clip!
Ads By Google

タイトルに下線(画像)を入れたい

ブログタイトルではなく、
各記事のタイトルとサイドタイトルに画像で下線を入れたいのですが、
CSSで指定できますか?
背景として入れてみましたが、反映されません。

.title{
color:#996666;
font-size:14px;
padding:0px;
backgorund: url( ) no-repeat;
}


入れたいのはこの画像です。



ご存知の方、アドバイスよろしくお願いいたします。

2006-09-23 22:43の質問
この質問と回答を読んで役に立った場合は「役に立つ質問」に投票してください。投票が多い質問は、役に立つ質問一覧に掲載され、より多くの人に見てもらうことができます。

回答(1)

1.

2006-09-24 07:43:27ベスト
背景画像の表示位置を指定してみてはいかがでしょうか。
backgorund: url(画像のURL) no-repeat center bottom;
などと記述してみてください。
ちなみに「center bottom」ではなく「50% 100%」という指定でも結構です。
デフォルトでは一番左端の上部(CSSで位置指定すると「0(%) 0(%)」または「left top」)に表示されます。

なお、この画像の色はとても薄いので、背景色の指定によっては目立たないかもしれません。
背景色が濃い色ならば、大丈夫だと思います。

解決しました!
大変ご丁寧に解りやすく教えてくださりありがとうございました。
また何かありましたら是非宜しくお願いいたします★

Ads By Google

コメント(4)

#1.  kozzy110
2006-09-24 00:03:38

目立たないだけだったりして・・・

#2.  Hukamin
2006-09-25 09:17:53

>>1補足
うっかりしていました。
「hight: ○px;」で「.title」の高さを指定し、「padding-bottom: (画像の高さ+余白分)px;」で「.title」の中の下部に余白を指定しないと、文字などに重なってしまったり、画像が表示されない場合があります。

#3.  羽音
2006-09-29 16:12:33

回答ありがとうございます。
お教えいただいた通りに実行してみましたが、
やはり表示されません。。

.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_/

#4.  Hukamin
2006-09-29 20:03:51

大変失礼いたしました。
「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;">
は削除した方が良いと思います。
でないと修正した後、茶色い点線と画像の点線と両方が表示されてしまいます。

トラックバック(2)

トラックバックURL: