文字サイズの変更

今回は、「文字サイズ」のカスタマイズ方法について説明します。

ブログカスタマイズ講座では、望ましい文字サイズの指定方法についても説明していますので、是非、参考にしてくださいね。

[カスタマイズ講座へ] → 望ましい文字サイズの指定方法とは


文字サイズをカスタマイズする方法として、具体的に「エントリー本文」の文字サイズを変更する方法を例にして説明します。

■ CSS（スタイルシート）の編集
デフォルト・テンプレートのスタイルシートを見ていただくと、下記のような記述がありますね。

＜スタイルシートの記述例＞

.content p { font-size: x-small; }

文字サイズを指定するには、font-size というプロパティを使用します。「.content p」とは、エントリー本文部分を指します。初期設定では、エントリー本文の文字サイズは、「x-small」と指定されています。
この「x-small」という記述を変更することで、エントリー本文の文字サイズを変更することができます。


文字サイズの指定方法は、「x-small」というようなキーワードで指定したり、「12pt」というような数値+単位で指定することができます。
このように文字サイズの指定方法には、いくつか方法がありますので、それぞれ説明します。

■ 7段階のキーワードで指定
下記のような、7段階に分けたキーワードで指定する方法です。

< 表示例 >

xx-small x-small small medium large x-large xx-large

MTの初期設定でも、この指定方法が使われていますが、7段階でしかサイズを変更できないため、微調整したい場合には適していません。

また、文字サイズの解釈がブラウザによって異なる場合があります。例えば、IEとNetscapeでは、同じ、x-small を指定していても、文字の大きさが違うように見えます。

■ smaller , largerで指定
親要素の文字サイズに対して、「1段階小さい文字サイズ」、「1段階大きい文字サイズ」にする指定方法です。

< 表示例 >

smaller 指定なし larger

便利な指定方法ですが、上記と同様、微調整したい場合には適していません。例えば、「0.5段階分小さくしたい」と思っても無理です＾＾

■ 数値 + 単位
数値に単位を付けて文字サイズを指定する方法です。
単位には px、ex、in、cm、mm、pt、pc などがあります。

< 表示例 >

8px 9px 10px 11px 12px 13px 14px 8pt 9pt 10pt 11pt 12pt 13pt 14pt

文字サイズの指定にptやpxなどの単位を使用すると、ブラウザの種類や設定によっては、ユーザー側で文字の大きさを変更できなくなる場合があります。ですので、ユーザビリティ・アクセシビリティ上、あまり望ましいとは言えません。

■ ％値（相対指定）
親要素の文字サイズに対する割合で指定する方法です。

< 表示例 >

85% 90% 95% 100% 105% 110% 115%

上記のように「%」を使った割合の指定では、「元の文字サイズ」を「100％」とした相対サイズを指定できます。
x-small や x-large などの指定方法よりも、はるかに細かなサイズ指定が可能です。

■ em値（相対指定）
上記の「% 値」と同じような方法として、単位 em を使った文字サイズの指定方法もあります

< 表示例 >

0.8em 0.9em 1em 1.1em 1.2em

「1em」とは「1文字分」の意味です。例えば、「1.2em」と指定すれば「1.2文字分の大きさ」で表示されます。これは、「120%」と指定した場合と同じです。

これらの指定方法は「相対指定」ですので、ブラウザの文字サイズ設定を変更すれば、それに合わせて表示サイズも拡大・縮小されます。ユーザビリティ上も問題ありません。

ですので、文字サイズの指定を行う場合は、できるだけ em や ％ などの相対的な単位を使用し、必要に応じて文字のサイズを変更できるようにしておく方が望ましいですね。

ただし、ユーザー側で文字サイズを変更すると、レイアウトが崩れてしまう場合などは、文字サイズの変更をできなくするために、フォントサイズの指定に pt や px などの単位を使用するということもあります。


絶対サイズと相対サイズの各単位は、下記のような意味ですので、参考にしてください。

絶対サイズ	意味
in	インチ。1in = 25.4mm
cm	センチメートル
mm	ミリメートル
pt	ポイント。1pt = 1/72in
pc	パイカ。1pc = 12pt
px	ピクセル。表示上の1ドット幅 （※正確にはデバイス依存の相対サイズ）

相対サイズ	意味
em	基準書体の文字の高さ （英字の「M」の高さを基準とした大きさ）
ex	基準書体の文字の高さ （英字の「x」の高さを基準とした大きさ）
%	基準書体のサイズに対する百分率

文字サイズの変更について、エントリー本文の文字サイズを例として説明しましたが、エントリー本文だけでなく、他の部分の文字サイズを変更したい場合、例えば、ブログのタイトルやエントリーの日付などを変更したい場合は、その該当するクラス・セレクタの「font-size」を編集することで変更できます。

MovableType3.17の主なクラス・セレクタは、下記の通りですので、参考にしてください。

＜MovableType3.17 デフォルト・テンプレート＞

クラス・セレクタ	該当箇所
#banner h1	ブログのタイトル
#banner h2	ブログの説明
.content	エントリー全体
.content h2	エントリーの日付
.content h3	エントリーのタイトル
.content p	エントリーの本文
.content p.posted	投稿者・投稿時間・コメントなど
#right	サイドメニュー全体（右側）
.sidebar	サイドメニュー
.sidebar h2	サイドメニューの見出し
.link-note	RSSへのリンクや検索ボックス
#calendar	カレンダー
#powered	powered　by の部分

以上、文字サイズの変更、指定方法について説明しました。
是非、参考にして、ユーザーアビリティを考慮した文字サイズにカスタマイズしてくださいね。

[次の講義へ] → フォントの変更

参考になりましたら、応援お願いします。