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

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

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

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

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

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

 

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

スポンサーリンク

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

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

Cocoon設定の全体

 

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

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

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

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

 

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

  • キーカラー(サイト全体の配色)
  • フォントの種類
  • 文字色
  • 文字の太さ
  • サイトアイコンフォント
  • サイト背景色
  • サイト背景画像
  • サイト幅の均一化
  • サイトリンク色
  • サイト選択文字色
  • サイト選択背景色
  • サイドバーの位置
  • サイドバーの表示状態
  • サムネイル表示
  • 日付フォーマット

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

スポンサーリンク

Cocoonの行間の変更方法

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

Cocoon設定の本文

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

行の高さ

行の高さ

行の高さはデフォルトで『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のフォントサイズと行間の変更方法』について解説してきました。

  • フォントサイズ:『Cocoon設定 ⇒ 全体』内の『サイトフォント』と『モバイルフォント』
  • 行間:『Cocoon設定 ⇒ 本文』内の『行の高さ』と『行の余白』

 

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

『行の高さ』と『行の余白』のまとめ

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

タイトルとURLをコピーしました