文字サイズの変更（FC2ブログ編）

今回は、FC2ブログの「文字サイズ」のカスタマイズ方法について説明します。
文字サイズを変更するには、スタイルシートを編集すると簡単に変更することができます。

実際に、FC2ブログをカスタマイズしていますので、参考にしてくださいね。

• FC2BLOGカスタマイズ講座～実例編

文字サイズをカスタマイズする方法として、エントリー本文の文字サイズを変更する方法を例にして説明します。
テンプレートは、公式テンプレートの「sample」を使用して説明します。

■ CSS（スタイルシート）の編集
「sample」テンプレートのスタイルシートを見ていただくと、下記のような記述があります。
本文の文字サイズだけを変更するには、下記の箇所で、font-size プロパティを追加して、文字サイズを指定します。

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

div.entry-body { 　　　　padding : 0 10px; 　　　　font-size:120%; }

文字サイズは、font-size というプロパティで指定します。
「div.entry-body」とは、エントリーの本文部分を指します。



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

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

< 表示例 >

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

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

また、文字サイズの解釈がブラウザによって異なる場合があります。例えば、IEとNetscapeでは、同じ、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」を追加したり、編集することで変更できます。

FC2ブログの「sample」テンプレートの主なクラスは、下記の通りですので、参考にしてください。

＜FC2ブログの「sample」テンプレート＞

クラス	該当箇所
div#branding h1 a	ブログのタイトル
div#branding p	ブログの説明
div.section h2	エントリーのタイトル
div.entry-body	エントリーの本文
div#secondary-column h2	アーカイブ関連の見出
div#extra-column h2	アーカイブ以外の見出

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

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

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

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

参考になりましたら、1クリックの応援お願いします。