人気ブログランキング | 話題のタグを見る
-Sun&Moon Blog-
catsmoon.exblog.jp
エキサイトブログスキン配布 (Mac OS10.5 Leopard・Safari) ★基本的にコメントにレスしません
by catsmoon
Top | Out
フォントサイズの変更1
2005年 03月 07日 |
私が配布しているスキンでは、フォントサイズは、ブログタイトル以外は、基本的に、10pt、9pt、8ptを使っている。
小さい字が好きな人には少々大きいと感じるかもしれないが、読むのに負担にならないサイズはここまでだと思う。
といっても、もっと大きい方がいい、いや、小さい方がという方もおられるだろうから、どこを変えれば、スキンのフォントサイズを変更できるか書いておく。
07/6/8以降公開のスキンは、フォントサイズの指定パターンを変更しています。
従って、それ以降のスキンをご利用の方は「フォントサイズの変更2」も参考にして下さい。




フォントのサイズは
font-size:※pt;
という指定になっているので、修正するのもそこになる。

配布しているスキンのCSSで、上から順に説明する。
スキンによっては、その通りになっていないものもあるが、概ね以下の通り。
ちなみに、説明の場所にfont-sizeの指定がない場合は、最初のbodyに対する指定がそのまま効くということになる。

  1. /* +++++++++++ body +++++++++++ */ 部分
    body { background : ***;
    ***** }
    body,td,div,li { font-size : ※pt ;
    このようになっている。
    つまり、body、td、div、liタグに対して、サイズを指定している。従って、特別に個別指定が入っていない場合は、全てここのサイズになる。
    ほとんどが10pt、たまに9ptになっているはず。
    これを、大きくしたければ11に、小さくしたければ、9か8にする。
    しかし8では小さすぎて読めないという人が出る可能性があり、しかもMacならいいが、Win IEではブラウザで拡大もできないので、最低でも9がいいと思う。

  2. /* +++++++++++ head要素 +++++++++++ */ 部分
    ここでは
    .header  : ブログタイトル。 14〜18pt程度の指定が多い
    .url  :ブログURL。 8ptの指定が多い
    .admin  :top、newpost、myblogなどのメニュー。 9pt指定が多い
    の三つに対してfont-sizeが指定されている。

  3. /* +++++++++++ menu 要素 +++++++++++ */ 部分
    .mnttl  :メニューのタイトル。 10ptが多い
    .mnbody  :メニュー中身(カテゴリ、以前の記事など)  9ptが多い
    .mnbody td  :メニュー中身(コメント、トラックバックなど)  9ptか8ptが多い
    の三つに対して指定が入る。
    指定が入っていない場合は、最初のbodyで指定した値となる。
    これまた8ptがギリギリ最小サイズだと思う。7ptだと読みにくいし、字が潰れて見た目も綺麗ではない。
    また通常、font-size指定はいれていないが、メモ帳の文字サイズを指定したい場合は
    div.MEMOBODY に対して、font-size:※pt; と書き加えればよい。

  4. /* +++++++++++ main 要素+++++++++++ */ 部分
    div.ptime  :投稿日時。 9ptが多い
    .postttle  :記事タイトル。 11ptが多い 
    .postbody  :記事本文。 指定がなく、bodyでの指定そのままが多い
    .posttale  :日時、ID、カテゴリ、トラックバック、コメントなど。 8ptが多い

    ptimeは、padminなどの場合もある。
    タイトルは、10〜12程度がよいかと思う。
    本文は、ここで指定を入れなくても、bodyでの指定が効くので、そちらで調整すればよい。
    posttaleは、中身に更に細かい指定が入っているので、こちらだけでなく、個別で指定(その他要素)が必要となる。

  5. /* +++++++++++ コメント(トラックバック)要素 +++++++++++ */ 部分
    div.COMMENT_BODY  :コメントやトラックバック本文。 9ptが多い
    div.COMMENT_TAIL  :コメントした人の名前や日時など。 8ptが多い

  6. /* +++++++++++ カレンダー要素 +++++++++++ */ 部分
    div.CAL_TOP  :カレンダー、Calenderなどのタイトル。 10ptが多い
    div.CAL_HEAD  :月の名前と前月、翌月へのリンク部分。 8ptが多い
    .CAL以下  :曜日の名前や、日付の数字。 8ptが多い
    7〜9が限度だろうが、7だとフォントが潰れるので8が推奨。
    メニュータイトルのサイズを変えた時だけ、CAL_TOPを揃え、後は触らない方がよい。

  7. 他にも指定が入っているところはあるが、概ね修正するとしたら、以上の部分だと思う。

  8. もちろん、指定をptではなく、em、pxなどの単位に変える事も可能。
    ただしemなどの相対値指定に変えると、見る人のブラウザの設定によって、またOS、ブラウザによって、かなり見え方に差が出るので、よく考えて設定する事。
    (入れ子になった時の基準が異なるため。
    例えば、tdが0.9em、tdの中のdivが0.9emの場合、divをブラウザ設定値に対して0.9とする場合と、tdがブラウザ設定値の0.9で、更にその0.9=0.81とする場合があって、後者だとかなり小さくなる。
    といって、divを1emにしておくと、前者の方では大きくなりすぎる)

  9. 一方で、pt、pxなどの絶対値で指定した場合、Macはブラウザで拡大縮小ができるが、Win IEでは出来ない。
    従って、見た人が小さすぎて読めないと思っても、サイズを変えられない可能性がある。
    私は相対値指定の場合のOS、ブラウザによるずれがあまりに大きいため、pt指定(絶対値)を使っているが、Win IEで小さすぎて読めないという危険を減らすために、極力8pt以上、本文では9pt以上を使うようにしているわけである。


<< パンジースキン配布 PageTop Spring-Colorスキン配布 >>
XML | ATOM

会社概要
プライバシーポリシー
利用規約
個人情報保護
情報取得について
免責事項
ヘルプ
Blue Paper Skin by Sun&Moon