ムーバブルタイプ（MovableType）

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

どもども通信のメルマガは毎月１日発行です

どもども通信

当社の月刊情報誌の「どもども通信」をPDFでご覧いただくことができます。

どもども通信

詳しくは上記のリンクをクリックして専用ページでお確かめください。

どもどもメルマガイメージ
なお、当社にはメルマガが２つあります。

「どもどもカフェ（毎週日曜日夜発行）」のメルマガと「どもども通信（毎月１日発行）」のメルマガの２つです。

この２つのメルマガは別の内容ですのでご注意ください。

【本日の運試し】

どもどもおみくじで本日の運試しをしてみませんか？

おみくじボタン

  • ラッキーモード：大吉の確率50％
  • 標準モード：標準的な確率です
  • いばらの道モード：大吉の確率１％
シェアする
遠田幹雄（とおだみきお）