2007/11/15

ちょっと違うIE7の文字

テンプレートの数もちょっとではあるけど増えて、これで私もようやくテンプレート製作者として半人前・・・いやいや、3分の1人前ぐらいにはなれた気がして、今までは恐れ多くて交流できずにいたテンプレートサイト様にお邪魔してみました。

同じ名前のChakoさんのサイト BeigeHeart_べーじゅのこころ

Firefoxでぐちゃぐちゃの表示のテンプレートが登録されている

という事を書かれていて、Firefoxユーザーの私も前から気になっていたので「そうですよねー、何とかして欲しいものです」なんて事をコメントに書き込んだところ、有名なテンプレート配布サイトのどこドアさんが

IE7の表示も崩れているテンプレートがある

と書き込まれていた。その書き込みを見た瞬間、青ざめる私。Σ(゚д゚|||)

IE7でチェックしてない・・・。 やっべー!!と慌てふためき急いでIE7をダウンロードする事に。しかしIE6の使用者も多いからIE6を更新せずに2つとも共存させたい。その方法をまず調べる。すると小粋空間さんのこちらの記事で丁寧に説明されていました。有難い!

そちらを参考に無事インストール完了。しかし私のパソコンがへっぽこなのか動きがちょっと遅い。でもまあ確認用として使うだけだし文句は言ってられない。そんな事より自分の作ったテンプレートが正常に表示されるか確認せねば!恐る恐る確認したところ、崩れることもなく正常に表示されていました!

これで問題解決。良かった〜と胸を撫で下ろしていたのもつかの間、気になる箇所を発見。

IE6とIE7の矢印
左) ページトップのリンク

ページトップの矢印の表示が変です。 これはフォントの指定によるものかなと、スタイルシートを見直してみました。私のテンプレートではbodyのところに以下のようにフォント指定しています。

font-family:Verdana,"ヒラギノ丸ゴ Pro W4","Hiragino Maru Gothic Pro","MS Pゴシック",Osaka,sans-serif;

前から優先的に表示されます。Verdanaは英数字のみのフォントなのでこれの影響かと思い削除してみると、矢印と二重括弧はIE6と同じように表示されました。 しかしこうなると英数字もWinだとMS Pゴシック、MacだとヒラギノかOsakaになってしまいます。

見映えを考えると英数字はVerdanaにしたい。そこでbodyのフォント指定を変えず、該当するところのみ新しくフォント指定します。まずスタイルシートに以下のように書き込みます。○○には好きな半角英数でスタイルシートで使われていない文字を入れます。

.○○{
font-family:"ヒラギノ丸ゴ Pro W4","Hiragino Maru Gothic Pro","MS Pゴシック",Osaka;}

そしてHtmlの編集で該当するところをspanタグでクラス指定をして囲みます。
<span class="○○">↑</span>ページトップ
ちょっと面倒ですが、こうするとIE6と同じように表示されるようになります。


タグ:IE7

にほんブログ村 ランキング

この記事へのコメント

コメントを書く

※質問は該当するテンプレート記事へお願いします。

※ブログオーナーが承認したコメントのみ表示されます。

名前 *
メールアドレス
URL
コメント *
認証コード ※画像の中の文字を半角で入力してください。

この記事へのトラックバック

×

この広告は180日以上新しい記事の投稿がないブログに表示されております。