MovableType（ムーバブルタイプ）で構築されたWEBサイト本文の文字サイズを大きくするためにスタイルシートを編集した

2017.09.09
この記事は約2分で読めます。

MovableTypeの文字サイズを大きくする当サイトはMovableTypeで構築されている。レスポンシブデザインになっているので同じURLのままでPCでもスマホでも見やすいはずである。しかし、最近ではスマホでの閲覧のほうが増加してきたため、スマホでの見やすさをより重視する必要性を感じていた。というのは、スマホで当サイトを見ると文字サイズが小さいという苦情を時々聞くようになったからである。そこで、文字サイズを大きくするためスタイルシートを編集した。

▼MovableTypeのスタイルシートに追記

mojisizeupmt.jpg

MovableTypeでは、管理画面の「デザイン」→「テンプレート」→「スタイルシート」で、標準のスタイルシートが編集できる。

今回は

/* サイト全体 */
body {
font-size: 14px;
font-size: 1rem;
text-rendering: optimizeLegibility;
color: #333;
}

/* 記事本文の文字 */
.entry-content {
font-size: 16px;
font-size: 1.14285714rem;
}

を追記しただけである。

これでスマホでの文字サイズが大きくなった。PCでは少し大きすぎるかもしれないが、しばらく様子をみることにする。

文字サイズは、font-size: 14px;とfont-size: 1rem;が対応しているので、文字の大小はfont-size:font-size＝14:1の比率で変化させていく必要がある。

比例計算による文字サイズ別表記の記録を残しておく。

▼標準の文字サイズ
/* body moji size */
.entry-content {
font-size: 14px;
font-size: 1rem;
}

▼少し大きめの文字サイズ
/* body moji size */
.entry-content {
font-size: 16px;
font-size: 1.14285714rem;
}

▼大きめの文字サイズ
/* body moji size */
.entry-content {
font-size: 18px;
font-size: 1.28571428591rem;
}

▼かなり大きめの文字サイズ
/* body moji size */
.entry-content {
font-size: 20px;
font-size: 1.42857142857rem;
}