2011年01月23日

【第42回】文字サイズの定義方法

今回は、ブログの文字サイズとブラウザ表示について解説してみたいと思います。

自分のブログの文字サイズが、実は見る人によって異なっている可能性があるということをご存知ですか?

試しに、ブラウザの文字表示サイズを変更してみましょう。

ブラウザのメニューで表示文字のサイズ最大を選択してみて下さい。
(注)この時、ご自分の元の設定(下図では“中”)を忘れないようにして下さいね。

SD_042_01.jpg

そうすると、Seesaaブログのテンプレートこねこ(左サイドバー)のフォント設定では、ご覧のように表示が変わってしまいます。

▼▼▼ 変更前 ▼▼▼
SD_042_02.jpg

▼▼▼ 変更後 ▼▼▼
SD_042_03.jpg

ブログのタイトル文字のサイズ、その下の説明文、記事のタイトル、日付、本文文字サイズ等々、ほぼすべての文字が大きくなっているのがお分かりかと思います。

なぜこうなってしまうかというと、フォントサイズの定義が、ブラウザ依存の定義になっているからです。

例えば第1回で簡単に解説しましたが、ブログのタイトル文字は#banner h1 a要素で以下のように定義されています。

  #banner h1 a {font-size:x-large;}

このx-largeがタイトル文字の大きさを表しているわけなのですが、ご覧の通り「大きい」という意味で、それが何pxあるいは何ptなのかが分かりません。

これは、フォントサイズを7段階(xx-small、x-small、small、medium、large、x-large、xx-large)で定義する方法で、ブラウザの文字表示設定に依存してその大きさが変わるのが特徴です。
例えば小さな字を読みにくい人は、ブラウザの表示文字サイズを大きくすると読みやすくなるといったメリットがあります。

一方でこの定義方法は、ブログのデザインが、作る人と見る人で異なってしまうというリスクをはらんでいます。

この定義方法が良いかどうかは人によって意見が分かれるかもしれませんが、デザインも含めてブログを管理している立場から言えば、やはりフォントサイズは自分がイメージしているサイズで見てもらいたいもの。
見る人がブラウザの文字サイズ設定を大きくしていても小さくしていても、自分が思った通りのサイズで表示したいですね。

このように、文字サイズをブラウザの設定に依存させないためには、font-sizeを具体的な値で定義する必要があります。

例えばもう一度上の変更前/後の図を見比べて頂きたいのですが、この中でサイドコンテンツの本文文字サイズは変わっていないと思います。
これは、第4回で文字サイズを以下のように数値で定義しているからです。

  font-size:11px;

このようにfont-sizeを数値で定義してしまえば、ブラウザの設定によって文字の大きさが変わることがありません。

自分のブログの文字サイズを、ブラウザの表示設定に依存させたくない方は、font-sizeは数値で定義しましょう。

▼▼▼▼▼▼▼▼▼▼▼▼▼
参考になりましたら
クリック&応援をお願いします
にほんブログ村 ブログノウハウへ
▲▲▲▲▲▲▲▲▲▲▲▲▲

【PR】FXシステムトレードで着実に利益を重ねる長期資産運用方法o(^0^)o ほくほくFX
【PR】日々の運用成績やユーザーの情報満載のブログo(^0^)o ほくほくポートフォリオ
posted by o(^0^)o ほくほく at 20:00| Comment(0) | PCブログデザイン | このブログの読者になる | 更新情報をチェックする
この記事へのコメント
コメントを書く
お名前:

メールアドレス:

ホームページアドレス:

コメント:

認証コード: [必須入力]


※画像の中の文字を半角で入力してください。
※ブログオーナーが承認したコメントのみ表示されます。
×

この広告は180日以上新しい記事の投稿がないブログに表示されております。