アナログ
RSS  

記事のタイトルの「-」をもう少し上手く隠す2010/04/27 17:50

アサブロの記事のタイトルには無条件で「-」が入っていて、ほとんどのテンプレートで「-」を隠すためにh2タグの文字色を背景色にしています。

それでも、背景が画像だったり、グラデーションだったりすると、いくら似た色にしてもうっすら見えてしまい興ざめです。せめてspanタグでくくられていたらdisplay:noneで隠せるのですが、ないものはしょうがない。

IEさえなければ、color:rgba(0,0,0,0)で透明にしてしまう手もあるのですが、IEでどうするか考えないといけないのであまり現実的ではありません。

そういうわけで今まであきらめていたのですが、ひょんなことからfont-size:0ならどうなる?ということで試してみると、やっぱりIE 6で小さな「-」が表示されますが、FirefoxとIE 8は上手く消えます。

IE 6もそれほど目立つわけではありませんので、背景に似た色を使えば現状より違和感がなくなります。しかしChromeでは小さくすらならないので、その点も考慮に入れるとcolor:rgba(0,0,0,0)も必要になります。

というわけで、CSS編集で.msg-titleのfont-sizeを0に(無ければ挿入)して、color→*colorとし、その前にcolor:rgba(0,0,0,0)を挿入します。
.msg-title {
	font-size: medium;color:#777;background:#777;
	↓
	font-size: 0;color:rgba(0,0,0,0);*color:#777;background:#777;

*color:の色は背景に似た色(例の場合背景色(background)の#777)を指定します。

.msg-title aに.msg-titleに設定されていたfont-sizeを挿入

.msg-title a {
	font-size: medium;

のようにするとFirefoxとIE8では文字が見えなくなり、IE6では*color色の小さな文字になって、Chromeでは文字が透明になるので、いい感じにごまかせます。

お前のブログ、背景が画像でもグラデーションでもないじゃないかって?
ローカルで遊んでるほうのデザインで邪魔だったので……公開しない奴だけどさ。

コメント

コメントをどうぞ

※メールアドレスとURLの入力は必須ではありません。 入力されたメールアドレスは記事に反映されず、ブログの管理者のみが参照できます。

※投稿には管理者が設定した質問に答える必要があります。

名前:
メールアドレス:
URL:
次の質問に答えてください:
スパムがウザイので合い言葉を入れるようにしました。山と言えば川だろJK


コメント:

トラックバック

このエントリのトラックバックURL: http://puppet.asablo.jp/blog/2010/04/27/5046714/tb

※なお、送られたトラックバックはブログの管理者が確認するまで公開されません。