いろんなページをみていると、文字サイズが小さく、文章が読みづらいときがあります。たいていは、サイト側がCSSで文字サイズを小さく設定しているためです。
しかし、文字サイズを小さくしすぎると、FireFoxでの文字の判読性が、Internet Explorer(以下、IE)やOperaなどのブラウザに比べてかなり悪くなります。
アフィリエイトでは、文字サイズが小さい、すなわち商品紹介文が読みづらいと、それだけでクリック率、コンバージョン率が下がります。今回の記事では、当ブログにアクセスのあった上位3つのブラウザ(IE、Opera、FireFox)について、文字サイズがどう変わるのかを紹介します。
人気ブログランキングCSSで文字サイズを設定するときは、font-sizeプロパティを使用します。font-sizeプロパティに指定できる値は以下のとおりです。今回の調査では「キーワード指定」で、それぞれのブラウザがどのように変化するか確認します。
数値指定 | 数値に単位(px、em、exなど)をつけて指定します。10px、1.5em、2exなど。 |
%指定 | %値で指定します。90%、120%など |
キーワード指定 | xx-small、x-small、small、medium、large、x-large、xx-largeの7段階で指定します。mediumが標準サイズです。1段上がると1.2倍のサイズになります。smallerで1段階下げ、largerで1段階上げ |
IE、Opera、FireFoxの3大ブラウザで、font-sizeを7段階に変化させると、以下のように表示されます。ブラウザの文字サイズは、デフォルトの設定で確認しています。
IEとOperaでは、文字サイズに違いはみられません。しかし、FireFoxでは、これらのブラウザに比べて、1段階ほど小さく表示されています。個人差はありますが、FireFoxで「x-small」以下の文字はかなり読みづらいのではないでしょうか?
文字サイズの小さいサイトは、IEのみで表示を確認していると想像します。FireFoxでは文字サイズが1段階小さくなることを踏まえて、サイト作りを心がけましょう。
IE | Opera | FireFox |
![]() | ![]() | ![]() |
■ブラウザ環境
IE | Internet Explorer 6.0 + SP2、文字のサイズは「中」 |
Opera | Opera 8.02、ズームは「100%」 |
FireFox | FireFox 1.0.6、文字サイズは「標準サイズ」 |
MovableType(以下、MT)をデフォルトで使用されている方も注意です。MTでは、記事(エントリ)の文字サイズは、デフォルトで「x-small」です。MTをカスタマイズされていない方は、CSSの以下の内容を確認してみてください。
.content p {
font-size: x-small;
}
ブログサービスや無料で配布されているテンプレートにも、エントリの文字サイズを「x-small」に指定しているものもあります。IEやOperaなどのブラウザで文字が小さいと感じたときは、FireFoxではかなり小さいので、CSSのfont-sizeプロパティを見直しましょう。
P.S.
ランキングのベスト10入りがみえてきました。いつも応援ありがとうございます!
はじめましてー
Firefoxで僕のサイトを見たら驚くほど小さな字だったんでビックリです
SEOとか以前の問題ですね(泣)
ためになる記事ありがとうございました。
ポッチリしときます