トリビア・ライフ - 天狼記

世の中の至る所にあるトリビア(主にPC上での物創りトリビア、生活トリビア)を発見する生活日記

カレンダー

ブログ内タグ検索

カウンター

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。
ホームページやブログはきちんと作られていないと、使用しているブラウザ(Internet ExplorerやFireFox等)で見え方が異なっているのです。

FireFoxで見るページのフォントサイズよりInternet Exploerで見るフォントサイズが小さいことは実はよくある話なのです。

そこで一つちょっとだけ頑張ればフォントサイズの大きさが同じように見えるようにすることが出来るのです。その解決方法がYahoo UI Library(通称:YUI)です。
ブログ作成(ブログランキング)

YUIについての詳細はYahoo! UI Library Fonts CSSを参照して下さい。 することは、下の1、2のことをブログ管理画面よりテンプレートを編集するだけです。

1.body { ・・・ }の中に以下の5行を追加(※)します。

body {
    font-family: "MS PGothic","Osaka",Arial,sans-serif;
    line-height: 1.231;
    font-size: 13px;
    *font-size: small;
    *font: x-small;
}

※尚、この時body内に font が記述されている場合は差替えが必要です。


2.body { ・・・ } の下に以下を挿入

select,input,button,textarea,button {
    font: 99% arial,helvetica,clean,sans-serif;
}
table {
    font-size: inherit;
    font: 100%;
}
pre,code,kbd,samp,tt {
    font-family: monospace;
    *font-size:108%;
    line-height:100%;
}


例)↓のような感じになります。青文字が追加行です。

body {
    padding: 0 0 10px 0;
    color: #666;
    background: url(http://templates.blog.fc2.com/template/monotone/bg.jpg) repeat-x top center #E9E9E9;
    font-family: "MS PGothic","Osaka",Arial,sans-serif;
    line-height: 1.231;
    font-size: 13px;
    *font-size: small;
    *font: x-small;
}
select,input,button,textarea,button {
    font: 99% arial,helvetica,clean,sans-serif;
}
table {
    font-size: inherit;
    font: 100%;
}
pre,code,kbd,samp,tt {
    font-family: monospace;
    *font-size:108%;
    line-height:100%;
}


ここまでで、1、2を使ってテンプレートを書き換えればいいけれどこれってどうなってるの?って思われた方もいるでしょう。

わかりやすく説明すると、1,2を行うことで、

とブラウザやOSは関係なく、
・フォントの種類は「MS PGothic」
・フォントの大きさは「13 px 」
・フォント行の高さは「16px」
が標準サイズとして適用されます。

その他HTML標準以外に個別にフォントのサイズを変更したい箇所では、font-sizeに93%を指定するとほぼ 12pxで表示されて、85 %を指定すると11pxで表示されます。

このように、すべてのブラウザで%で 共通する文字サイズを指定することが可能になります。

%とpxの対応表はFont-size Adjustmentを参考にしてください。

フォント行の高さは何故16pxになるのでしょうか?Font-size Adjustmentにあるように123.1%が16pxなので100%(13px)に対してline-heght: 1.231を指定することにより13pxの1.231倍すなわち16pxになるのです。

文章を読むときの見やすい行の高さは好みによって違うので、標準設定を
line-height: 1.465;
として19pxにする等しても良いでしょう。


コメント

コメントの投稿

   管理者にだけ表示を許可する
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。