Cocoonの『フォントサイズ』と『行間』を変更する簡単な方法

今回は『Cocoonのフォントサイズと行間の変更方法』を解説していきます。

CocoonならCSSをいじらなくても、誰でも簡単にフォントサイズや行間を調整できます。

自分好みの見やすいサイズに変更したい方は、ぜひ参考にしてみてください。

なお、この記事では『フォントサイズ＝文字の大きさ』『行間＝文章の行と行の間』と定義して解説していきます。

動画でも解説しています。

Cocoonのフォントサイズの変更方法

Cocoonのフォントサイズは『Cocoon設定 ⇒ 全体』で変更できます。

サイトフォントの文字サイズがパソコンで見たときのフォントサイズ、モバイルサイトフォントはスマホで見たときのフォントサイズです。

デフォルトではパソコンのフォントサイズが18px、スマホ表示は16pxとなっています。

今のサイズを基準に大きくしたり小さくしたり、お好みで変更してみてください。

なお、全体設定では、他にも以下の項目が設定できます。

気になる箇所があれば、こちらも合わせて設定しておきましょう。

Cocoonの行間の変更方法

Cocoonの行間は『Cocoon設定 ⇒ 本文』で変更します。

『行の高さ』と『行の余白』の２つがありますので、それぞれ解説していきます。

行の高さ

行の高さはデフォルトで『1.8』になっています。単位はありません。

これはフォントサイズ(フォントの高さ)を『1』として、上下にいくつスペースを空けるか設定します。

ですから、デフォルトの『1.8』の場合、『(1.8－1)÷2』で上下に『0.4』ずつスペースを空ける設定になっています。

厳密に言うと、この『行の高さ』が行間になります。

『Shiftキー+Enter』で改行したときは、行と行の間が『0.4＋0.4＝0.8』となります。

行の余白

行の余白はデフォルトで『1.4em』になっています。（1emがフォントサイズと同じ高さ）

Enterキーで改行したときの行間部分が『行の余白』になりますので、こちらは厳密に言うと『段落の間隔』の調整となります。

『Shiftキー+Enter』で改行したときは段落ができませんので、行の余白分のスペースも反映されません。

Enterキーで段落を作ったときのみ、行の余白分のスペースが発生すると覚えておきましょう。

まとめ

今回は『Cocoonのフォントサイズと行間の変更方法』について解説してきました。

また、『行の高さ』と『行の余白』についてまとめると、以下の図のようになります。

行間の設定は考え方がちょっと分かりにくいですが、何度か変更してみると理解できますので、試しながら徐々に慣れていきましょう。