フォントサイズの変更1
2005年 03月 07日
|
▼
私が配布しているスキンでは、フォントサイズは、ブログタイトル以外は、基本的に、10pt、9pt、8ptを使っている。
小さい字が好きな人には少々大きいと感じるかもしれないが、読むのに負担にならないサイズはここまでだと思う。
といっても、もっと大きい方がいい、いや、小さい方がという方もおられるだろうから、どこを変えれば、スキンのフォントサイズを変更できるか書いておく。
フォントのサイズは
font-size:※pt;
という指定になっているので、修正するのもそこになる。
配布しているスキンのCSSで、上から順に説明する。
スキンによっては、その通りになっていないものもあるが、概ね以下の通り。
ちなみに、説明の場所にfont-sizeの指定がない場合は、最初のbodyに対する指定がそのまま効くということになる。
小さい字が好きな人には少々大きいと感じるかもしれないが、読むのに負担にならないサイズはここまでだと思う。
といっても、もっと大きい方がいい、いや、小さい方がという方もおられるだろうから、どこを変えれば、スキンのフォントサイズを変更できるか書いておく。
07/6/8以降公開のスキンは、フォントサイズの指定パターンを変更しています。
従って、それ以降のスキンをご利用の方は「フォントサイズの変更2」も参考にして下さい。
フォントのサイズは
font-size:※pt;
という指定になっているので、修正するのもそこになる。
配布しているスキンのCSSで、上から順に説明する。
スキンによっては、その通りになっていないものもあるが、概ね以下の通り。
ちなみに、説明の場所にfont-sizeの指定がない場合は、最初のbodyに対する指定がそのまま効くということになる。
- /* +++++++++++ body +++++++++++ */ 部分
body { background : ***;
***** }
body,td,div,li { font-size : ※pt ;
このようになっている。
つまり、body、td、div、liタグに対して、サイズを指定している。従って、特別に個別指定が入っていない場合は、全てここのサイズになる。
ほとんどが10pt、たまに9ptになっているはず。
これを、大きくしたければ11に、小さくしたければ、9か8にする。
しかし8では小さすぎて読めないという人が出る可能性があり、しかもMacならいいが、Win IEではブラウザで拡大もできないので、最低でも9がいいと思う。 - /* +++++++++++ head要素 +++++++++++ */ 部分
ここでは
.header : ブログタイトル。 14〜18pt程度の指定が多い
.url :ブログURL。 8ptの指定が多い
.admin :top、newpost、myblogなどのメニュー。 9pt指定が多い
の三つに対してfont-sizeが指定されている。 - /* +++++++++++ menu 要素 +++++++++++ */ 部分
.mnttl :メニューのタイトル。 10ptが多い
.mnbody :メニュー中身(カテゴリ、以前の記事など) 9ptが多い
.mnbody td :メニュー中身(コメント、トラックバックなど) 9ptか8ptが多い
の三つに対して指定が入る。
指定が入っていない場合は、最初のbodyで指定した値となる。
これまた8ptがギリギリ最小サイズだと思う。7ptだと読みにくいし、字が潰れて見た目も綺麗ではない。
また通常、font-size指定はいれていないが、メモ帳の文字サイズを指定したい場合は
div.MEMOBODY に対して、font-size:※pt; と書き加えればよい。 - /* +++++++++++ main 要素+++++++++++ */ 部分
div.ptime :投稿日時。 9ptが多い
.postttle :記事タイトル。 11ptが多い
.postbody :記事本文。 指定がなく、bodyでの指定そのままが多い
.posttale :日時、ID、カテゴリ、トラックバック、コメントなど。 8ptが多い
ptimeは、padminなどの場合もある。
タイトルは、10〜12程度がよいかと思う。
本文は、ここで指定を入れなくても、bodyでの指定が効くので、そちらで調整すればよい。
posttaleは、中身に更に細かい指定が入っているので、こちらだけでなく、個別で指定(その他要素)が必要となる。 - /* +++++++++++ コメント(トラックバック)要素 +++++++++++ */ 部分
div.COMMENT_BODY :コメントやトラックバック本文。 9ptが多い
div.COMMENT_TAIL :コメントした人の名前や日時など。 8ptが多い - /* +++++++++++ カレンダー要素 +++++++++++ */ 部分
div.CAL_TOP :カレンダー、Calenderなどのタイトル。 10ptが多い
div.CAL_HEAD :月の名前と前月、翌月へのリンク部分。 8ptが多い
.CAL以下 :曜日の名前や、日付の数字。 8ptが多い
7〜9が限度だろうが、7だとフォントが潰れるので8が推奨。
メニュータイトルのサイズを変えた時だけ、CAL_TOPを揃え、後は触らない方がよい。 - 他にも指定が入っているところはあるが、概ね修正するとしたら、以上の部分だと思う。
- もちろん、指定をptではなく、em、pxなどの単位に変える事も可能。
ただしemなどの相対値指定に変えると、見る人のブラウザの設定によって、またOS、ブラウザによって、かなり見え方に差が出るので、よく考えて設定する事。
(入れ子になった時の基準が異なるため。
例えば、tdが0.9em、tdの中のdivが0.9emの場合、divをブラウザ設定値に対して0.9とする場合と、tdがブラウザ設定値の0.9で、更にその0.9=0.81とする場合があって、後者だとかなり小さくなる。
といって、divを1emにしておくと、前者の方では大きくなりすぎる) - 一方で、pt、pxなどの絶対値で指定した場合、Macはブラウザで拡大縮小ができるが、Win IEでは出来ない。
従って、見た人が小さすぎて読めないと思っても、サイズを変えられない可能性がある。
私は相対値指定の場合のOS、ブラウザによるずれがあまりに大きいため、pt指定(絶対値)を使っているが、Win IEで小さすぎて読めないという危険を減らすために、極力8pt以上、本文では9pt以上を使うようにしているわけである。
by catsmoon
| 2005-03-07 23:58
| 配布スキン説明
▲