スタイルシートで、font-sizeや、フォントの色などを変更

MovableType3.2のデフォルトのテンプレートは、インターネットエクスプローラー(IE)6で見るのと、Firefoxで見るのでは、いきなりフォントの大きさが違っています。
せめて、この2つのブラウザでの見え方はある程度同じになって欲しいものです。
そう思って、スタイルシートを変更してみました。



まず実際の表示の差を見てみます。

サイドバーの部分。



続きを読むの部分。



投稿者やコメント、トラックバックへのリンクの表示部分。



と、このような表示の差になっております。




スタイルシートをみると、MT3.2のデフォルトのテンプレートでは、フォントのサイズは全てピクセル(px)で指定してあります。



スタイルシートを変更して思ったのですが、どうやら小さいフォントの表示のされ方が、IE6とFirefoxで違う事によってこの差が生じているようです。

Firefox、小さいフォントを小さく表示しすぎという感じです(笑)。

スタイルシートで、font-sizeが10pxとか11px指定されているものを、フォントサイズを12pxに指定すると表示の差が出なくなるみたいです。
実際にやってみました。




メイン・メニュー環境設定テンプレートスタイルシート

スタイルシートの下記の部分を変更してみました。
割と適当ですので、ご参考程度にされて下さい(笑)。




カテゴリーやトラックバック、コメントなどのヘッダー部分。

.module-header,
.trackbacks-header,
.comments-header,
.comments-open-header,
.archive-header
{
/* ie win (5, 5.5, 6) bugfix */
p\osition: relative;
width: 100%;
w\idth: auto;

margin: 0;
border-left: 5px solid #36414d;
padding: 5px;
color: #fff;
background: #a3b8cc;
font-size: 11px12px;
font-weight: bold;
line-height: 1;
text-transform: uppercase;
}



追記の部分。投稿者やコメント、トラックバックへのリンクの表示部分。

.entry-more-link,
.entry-footer,
.comment-footer,
.trackback-footer,
.typelist-thumbnailed
{
font-size: 11px12px;
}



日付部分(あんまり見た目は変わりませんが、一応ここも変更)。

.date-header
{
margin-top: 0;
font-size: 11px12px;
font-weight: bold;
text-transform: uppercase;
}



投稿者やコメント、トラックバックへのリンクの表示部分。
なぜか2ヶ所あるのでこちらも変更。

.entry-footer,
.comment-footer,
.trackback-footer
{
margin: 0 0 20px 0;
border-top: 1px solid #dae0e6;
padding-top: 3px;
color: #666;
font-size: 10px12px;
text-align: right;
}



トラックバックURLの表示部分。

#trackbacks-info
{
margin: 10px 0;
border: 1px dashed #a3b8cc;
padding: 0 10px;
color: #292e33;
font-size: 11px12px;
text-align: center;
background: #e6ecf2;
}



サイドバーの中身の部分。

.module-content
{
margin: 0 0 10px 0;
border-top: 1px solid #cfd4d9;
padding: 10px 10px 0 10px;
font-size: 10px12px;
line-height: 1.2;
}




検索窓の中の文字の大きさ。

.module-search input { font-size: 10px12px; }




ついでに、エントリー本文の文字の大きさを14pxに指定して、行間(line-height)をちょっとだけ縮めてみました。

.entry-content,
.comment-content,
.trackback-content
{
margin: 0;
font-size: 14px;
line-height: 1.51.4;
}



また、文字の色を少しだけ濃くしてみました。
#666(薄い灰色)→#333(濃い灰色)

color: #666#333;




そういうわけで、修正後はこんな感じになります。




font4.gif




<関連エントリー>
MovableTypeのfontのサイズはブラウザによって表示のされ方が違う



@ 2006年02月12日