|
記事外への文字サイズ指定font-size:0.75em;が，記事内まで影響している。
それを解放し，以前と同じように表示させるには、
値を上書きしてやればよい。
記事内のli要素内の文字が以前より小さく表示されていたり、
入れ子になっていたりして，更に，小さく表示されている。
記事の本文ではなく、その周辺部分にあるli要素にfont-size:0.75em;を指定しているのが，原因だ。
/* ===== blogContentsArea ===== */
#mainContentsArea p,
#mainContentsArea ul li{
font-size:0.75em;
line-height:1.2;
}
これは、mainContentsArea内にある、li要素全てに影響する。(ulを親とするli要素)
記事もこの中にあるので、影響してしまう。
li要素への文字サイズ指定
本来、入れ子になる可能性の高い要素に、相対的な値の単位で上位の文字サイズから，自分のサイズを計算する単位であるemを指定するには注意が必要。
Wiki文法では，必ずでてくるdiv要素にも、font-size:0.75em;が指定されているので、
記事内では、
例えば、ブラウザの初期の文字サイズが16pxだとすると、
16×0.75×0.75=9px
と非情に小さな文字サイズとなってしまう。
以前の記事内の文字サイズは、Wiki文法では必ずでてくるdiv要素「wiki」に
div.wiki {
font-size:12px;
line-height:18px;
/* color:#4B4B4B; */
}
と指定されていた。
以前は、li要素への指定などなかったので、文字のサイズは12pxであった。
現在
#mainContentsArea div.wiki{
/* \*/
position:relative;
/* */
font-size:0.75em;
line-height:1.4;
word-break:break-all;
word-wrap:break-word;
overflow:hidden;
}
ブラウザの初期値が16pxの場合、
16×0.75=12pxとなり，ほぼ同じように表示される。
ここに記事外に指定されていたfont-size:0.75em;が影響してしまう。
この影響を受けずに，記事内を以前と同じように表示するには、
記事内のli要素に文字サイズを指定してやればよい。
#mainContentsArea div.wiki ul li{
font-size:1.em;
line-height:1.2;
}
こうすることによって、
ブラウザの初期値が16pxの場合、
16×0.75×1=12pxとなり、
12pxとほぼ同じサイズで表示される。
また、li要素の特徴として入れ子として使用していたとしても、
font-size:1.em;であれば，入れ子の内容であったとしても、影響はない。
つまり、
ブラウザの初期値が16pxの場合、
16×0.75×1×1×1....=12px
以前と同じようにほぼ12pxぐらいの文字サイズで表示される。
| | 記事周辺のli要素 | 記事内 | 記事内のli要素 | 入れ子li要素 | 入れ子li要素 | 入れ子li要素 |
| 以前 | ※1 | 12px | 12px | 12px | 12px | 12px |
| 現在 | 0.75em | 0.75em | 0.75em | 0.75em | 0.75em | 0.75em |
| 現在 | ※2 | (12px) | (9px) | (6.75px) | (5.06px) | (3.8px) |
| 修正後 | 0.75em | 0.75em | 1em | 1em | 1em | 1em |
| 修正後 | | (12px) | (12px) | (12px) | (12px) | (12px) |
()内はブラウザの初期値16pxの場合の計算値
この記事は記事外への文字サイズ指定から解放し、以前と同じように表示させる。
|
コメント（9）
