2008年03月スタイルシート

文字の大きさを指定して行きます。

.BlogName { font-family:"HG丸ｺﾞｼｯｸM-PRO", "Verdana", "ＭＳ Ｐゴシック", "Arial Black", "Impact", "Osaka"; font-size : 22px; color: #666; }
プロパティが「font-size 」になるのでこの部分で値を変える事によって
文字の大きさが変わります。
指定する値は１?７、または数値+単位の種類「%　px　pt　mm　cm　in　pc　em　ex　」
決められた単語で指定して行きます。


決められた単語と文字の大きさ

xx-small ・・・ font size="1"
x-small ･･･ font size="2"
small ･･･ font size="3"
medium ･･･ font size="4"
large ･･･ font size="5"
x-large ･･･ font size="6"
xx-large ･･･ font size="7"


まったく同じではないですが大体同じくらいの大きさになります。
スタイルシートで指定する場合、「font-size: 13px;」のように数値+単位のpxで
指定してあることが多いと思います。
通常の大きさは16px


文字の大きさの目安。

1 2 3 4 5 6 7

通常が4なので1?7の数字ではなく、-3?+3でも指定可能ですが
ややこしくなるのでどれで指定するか決めて指定の仕方は統一させてください。

スタイルシートで指定した部分をHTMLに記述することで反映されます。
HTMLを探してみると
<div class="BlogName"> <h1 id="title"><a href="<%url>"><%blog_name></a></h1> </div>
つまりは無料ブログサービスなどでテンプレートを少し触ってイメージを変えるなら
スタイルシートで指定していくのでHTMLを触ることは少なくなります。

通常あまり変更しない気がします。
パソコンにそのフォントがインストールされていないと
反映されないからです。


フォントの種類は「ＭＳ ゴシック」「ＭＳ 明朝」など
はじめからインストールされているものが無難です。
「フォント（FONT）」で検索すればフリーのフォントを利用することができますが
先ほども書いたようにすべての方がそのフォントに対応しているとは限らないので
注意してください。

さて、その設定の仕方です。
スタイルシートを見てみると、

.BlogName { font-family:"HG丸ｺﾞｼｯｸM-PRO", "Verdana", "ＭＳ Ｐゴシック", "Arial Black", "Impact", "Osaka"; font-size : 22px; color: #666; } こんな記述を見つけられると思います。
プロパティは「font-family」の部分で値の部分で文字の種類を指定しています。
FC2のユーザーテンプレートの一部分ですがこの場合は6つのフォントを指定しています。

HG丸ｺﾞｼｯｸM-PRO
Verdana
ＭＳ Ｐゴシック
Arial Black
Impact
Osaka

複数指定しておくと、前のフォントが対応してない場合次のフォントが反映されます。
できるだけ自分のイメージで表示させたい場合はこのように複数指定しておけば安心ですね。
もちろん1つのフォントだけでもいいです。
フォント名の間に空白がある場合半角二重引用符（始）「"」で囲む必要があります。
複数指定する場合は半角カンマ「,」で区切る。

ゴシック系、明朝系、筆記系などと大まかに種類を指定することもできます。

serif ･･･ 明朝系
sans-serif ･･･ ゴシック系
cursive ･･･ 筆記体系
fantasy ･･･ 飾り文字系
monospace ･･･ 等幅系


BlogNameのほか、introduction などテキストのエリアごとに指定して行きます。

スタイルシートで文字をあらかじめ指定しておくことで
そのつどHTMLで指定する手間を省くことができます。


どんな指定があるかというと


文字の種類
文字の大きさ
文字の色
文字を太字
文字を斜体


などそれぞれ個別に指定することができます。
もちろんまとめて指定しまえばその部分はほかと区別することもできます。


それぞれの指定の仕方を説明します。