べつになんでもないこと

アサブロの記事のタイトルには無条件で「－」が入っていて、ほとんどのテンプレートで「－」を隠すために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では文字が透明になるので、いい感じにごまかせます。

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