スタイルシートで文字サイズを変更する

文字サイズの指定方法

文字サイズの指定方法は絶対指定、絶対単位指定、相対指定、相対単位指定、割合のいずれかで指定できます。

絶対指定

xx-small～xx-largeまで7段階の指定が可能です。

絶対単位指定

単位を指定して表示します。in(inch)、mm、cm、pt（ポイント）、pc（バイカ）の5種類の単位があります。ポイントは1/72インチ　バイカ=12ポイントとのこと。バイカはあまり聞きなれない単位ですが。印刷を意識して使う単位ですね。

並べてみるとかなり違いがはっきりしますね。

相対指定

相対指定は今表示している文字と比較した指定です。小さい（smaller）、大きい（larger）で指定します。

相対単位指定

em,ex,pxがあります。emはMの文字の高さが基準、exはxの文字の高さが基準になります。pxは画面の表示単位です。

割合で指定

%で指定します。基準サイズに対する割合になります。

ブログのカスタマイズの場合

ブログの場合は表示を整形するために<div>による段組が何段階も組まれています。たとえば次のようなHTMLが記述されていたとします。

<div class="a">

        <div class="b">

                <div class="c">

                文字サイズはx-small

                </div>

       </div>

</div>

次にスタイルシートが次のように書かれていたとします。

.a { font-size:x-small;}

.b { font-size:xx-large;}

.c{ font-size:medium;}

この場合、実際に表示される文字は標準サイズの文字になります。スタイルシートで指定する場合は直前のタグで指定されたスタイルが適用されます。もし<div class="c"></div>の間をx-smallに変更するカスタマイズをするのであれば

.c{font-size:medium;} →.c{font-size:x-small;}

と書き換えます。

実際に記事エリアの文字サイズを変更する

FC2のdiaryをベースに書き換えをしてみます。まず最初に記事が書かれている場所を特定します。このテンプレートで記事エリアは<div class="entry">の中の<div class="body">が実際に記事が囲まれている部分なりますので 次にスタイルシート側で.bodyを探します。

オリジナルはfont-size:80%;に指定されています。試しに100%と書き換えてみてください。文字が大きくなると思います。FC2ブログの場合「プレビュー」をクリックするとテンプレートの適用状況がすぐ確認できます。

指定するサイズが決まったら最後に「更新」をクリックして保存してください。「更新」を忘れてページ移動するとせっかく変更した部分が破棄されてしまいます。

クラス宣言

スタイルシートで.（ドット）で書かれている宣言をクラスと呼びます。タグに適用する場合class=""のダブルクォーテーションの中にスタイルシートで定義した宣言を記述します。