人気ブログランキング | 話題のタグを見る

IE7と全角記号   

今回はFFと全く関係ない話。しかもブログを作る側の話なので興味ない人は即刻Alt + F4Backspace叩いて下さい。

みなさんはどんなブラウザ使ってますか?多分世の中的にはIE6が主流だと思いますし自分も前はIE6を使ってましたが、IE7が正式リリースされてからはIE7を使うようになりました。実際にはIE6とIE7を両方使っているんですけどね。IE7がリリースされたのが2006年の10月だったかな?そのころから使っているので結構長い間使ってます。

それで、使い始めてからすぐ気付いてたことがあるんですが、直し方がよくわからないのでずっと放置してたことがありました。

どうもIE7では■とか○とかの全角記号(これを全角記号と言うのかは知らない)が小さく表示されてしまうことがあるんです。

例えばディアボロス記事で書いた床配置は、単に全角記号を並べただけだったんですが、これをIE7で表示すると、


IE7と全角記号 _d0125394_21221330.jpg


こんな感じで○と×が小さく表示されます。しかも星マークの後の○は大きさが違うというわけわからん表示をしてくれます(笑)

今度はFirefox2で表示させると、


IE7と全角記号 _d0125394_21231189.jpg

○の大きさはあってるんですが、×だけ小さく表示されました。
IE6なら、

IE7と全角記号 _d0125394_21244665.jpg


期待した通りに表示されます。

でもIE7なら必ずこうなるわけではなくて、例えばelemen様のサイトで使われてる装備のExRareを表す●●は全角の●にスタイルシートで色を付けてるんですが、これがIE6と同じ大きさで表示されます。でも自分のブログで同じように書くと小さく表示される・・・

・・・なんでよ(´Д`;)

で、色々調べてみると、

欧文フォントを指定するとこうなるらしい

ということが発覚。
確かにこのブログではVerdanaというフォントが優先されるようになってました(デフォルトでそうなってた)。具体的にはこんな感じです。

body {
  font-family: Verdana, MS Pゴシック;
}

font-familyの指定は左にあるものが優先されるので、この順番を変えてMS Pゴシックを先頭に持ってくると、

body {
  font-family: MS Pゴシック, Verdana;
}

IE7もFirefox2も全角記号が同じ大きさで表示されました。
ちなみにelemen様のサイトはフォント指定が部分的にしかされてないみたいで、ほとんどはブラウザのデフォルトフォントで表示されるはずです。IEのデフォルトフォントはMS Pゴシックだと思うので、IE7でもちゃんと表示されたんでしょうね。

これで全角記号はIE6と同じ大きさで表示されるようになったんですが、デフォルトでVerdanaフォントだったのは、ブラウザで見るのに適したフォントだからだと思うので、全角記号の表示のためにフォントを変えるのもどうなんだ?って気もします。実際MS PゴシックとVerdanaなら、Verdanaの方が文字が全然見やすいです。なので結局戻してしまいました。

(2007/03/11 追記)
全角記号のとこだけフォントを部分的に上書きすればいいようです。全角記号向けに

.zenkaku {
  font-family: MS Pゴシック;
}

こんな感じのスタイルを作って、



とすれば、めんどくさいけど一応全体がverdanaでもちゃんと表示されます。

.rare {
  color : #FFDD33;
  font-family: MS Pゴシック;
}

RareExのスタイルにもフォント指定を入れればこれも



これでちゃんと表示されました。


まぁぶっちゃけIE7なんてシラネーヨ!ってのでもいいじゃないかとも思いますが(笑)
でもそろそろWindows Updateの自動更新で自動ダウンロード(インストールは選択?)されるようになる時期が近づいてるかもしれないので、無視できなくなってくるのかなと。
本当はこんなのぐぐれば簡単に見つかると思ってたんですが、意外に見つからなかったので書いてみました。ぐぐり方がまずかっただけのような気もしますが。

尚、この内容については一切責任持てないので、自己責任で・・・

by ktocomo | 2007-03-11 21:21

<< ENM 猛進転進 ポイント探し デュエルタバード >>