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

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;
}


このページはTwitter、はてな、Google+、FacebookなどのSNSで以下のような反響があります。
なお、コメントはFacebookにログインしている状態でのみ受け付けております。セキュリティ上の観点からこのようにしております。ご了承願います。
このエントリーをはてなブックマークに追加  

この記事のURL「https://dm2.co.jp/2017/09/movabletypemojisize.html」をQRコードで表示
この記事のURL「https://dm2.co.jp/2017/09/movabletypemojisize.html」をQRコードで表示「https://dm2.co.jp/2017/09/movabletypemojisize.html」
パソコンで表示されたページをスマホでも見たい場合は、このQRコードをスマホのカメラ(QRコードが読めるリーダー)で読むとページが表示されます。