ユーザビリティを考慮した記事本文のフォントサイズ変更について

今日はフォントサイズのことについてちょろっと。

フォントサイズと一口に言っても、
これがなかなかに奥が深いもので、
ぶっちゃけどう指定してやるのがベストなのか・・・
まだ自分の中に答えが出ているわけではありません。

って、そこから記事を書き出すと、
またいつもみたくダラダラと無駄に長くなっちまぅので、
今日はとりあえずサクっと大きくしときます。

以前から「文字サイズちっこすぎ！」って、
気になっていた部分と言えば・・・

• 記事本文
• サイドバーの最近の記事一覧のリスト表示
• サイドバーのブログテーマ一覧のリスト表示
• サイドバーのアーカイブのリスト表示

ってとこですかね。
全部一辺にやるとえらいことになっちゃうんで、
今回はとりあえず・・・
記事本文のフォントをサクっと大きくしてみます。

記事本文に関するCSSコードを探して編集する

ＣＳＳを「 .entry .contents 」で検索してみると・・・

/*記事内容*/
.entry .contents{
line-height:1.5;
}

ってのがヒットするんで、
このコードを下のように書き換えます。
具体的には赤字で表示した１行を足すだけですん。

/*記事内容*/
.entry .contents{
line-height:1.5;
font-size:134%;
}

「 134% 」んとこの数字をお好みの大きさに設定してください。

アメブロ（旧テンプレ）の場合の、
フォントの基本サイズは12pxなので、
これを基本（100％）にして、
各要素のフォントサイズを「％」で指定してやるわけです。

フォントサイズとユーザビリティについて

ちなみに・・・
フォントサイズを px などの絶対値で指定すると、
ＩＥで文字サイズの変更ができなくなってしまいます。

これを利用して、レイアウトを崩したくないような場合・・・
たとえば、このブログで言えばこの部分↓

この部分なんかは、
メインのコンテンツとの関連性が薄いですし、
固定数値で指定してやることにより、
レイアウトの崩れを防げるので有効です。
（あくまでIEに限った話ですが・・・）

試しに12px相当の文字サイズである1.0emで指定して、
拡大表示してみると・・・

↑こんな感じに。
この部分は特にpositionで飛ばして表示してるんで、
崩れ方もハンパないっす。
って、思わず話が横道にそれちゃいましたが、
まぁ、絶対値による指定が絶対的に悪いわけじゃない。
ってことが言いたかったわけです。

が、しかぁ～し！

ユーザビリティーってのを考えた場合、
少なくともメインコンテンツである記事本文だとか、
それに深く関連する最近の記事一覧や、
テーマリスト、アーカイブリストなどは、
最低限、閲覧者の好みに応じて、
自由に文字サイズが変えれるようにしておくべきだと言えます。

フォントサイズを変えたら改行ピッチに違和感が・・・

また、文字サイズを変えたことによって、
改行ピッチに違和感がでた場合には、

line-height:1.5;

これの「 1.5 」部分の数値を変更してください。
ちなみにこの「 1.5 」ってのは、
「文字のサイズの1.5倍の高さで改行してんか～」って意味で、
「%」とか「em」とかいう単位をあえてつけていません。
これによって文字サイズの変化に相対的に対応できるので、
上記のように数字だけで指定した方が良いです。