テーマCocoonではサイトのフォントを簡単に変更できます。ただし、自由自在にフォントの種類を選べるわけではなく、12種類のセットから選ぶ形式になっています。
とはいえ、どんな端末でも同じように見えるようにするのはWeb制作の基本中の基本です。他人がサイトを見る時、そのフォントがインストールされていなかったら、結局はブラウザのデフォルト設定になるため、凝ったフォントを使用しても意味がありません。
それに変に凝ったフォントを本文にすると、とても読みづらくなってしまいます。
Cocoonの全体設定から変更する
ダッシュボードの[Cocoon設定]→[Cocoon設定]をクリックします。上部の[全体]タブをクリックして全体の設定画面を開きます。
![Cocoon全体設定](https://butaoji-pcblog.com/wp-content/uploads/2021/01/0bad8c8b60012c5bac38b5c3373d82d7.png)
下にスクロールすると、[サイトフォント]の項目があります。ここでフォントの種類・サイズ・色を選択します。フォントの種類は以下の12種類から選びます。
Cocoonで使用できるフォントの種類
![メイリオとヒラギノ](https://butaoji-pcblog.com/wp-content/uploads/2021/01/e44be5c633fee7c76303730a75c2ade2.jpg)
ヒラギノ角ゴはMacintoshの標準フォント、メイリオはWindows8系の標準フォントです。
![游ゴシック、MSPゴシック](https://butaoji-pcblog.com/wp-content/uploads/2021/01/0fc8a6f84e5878977a42deae7c2f82f9.jpg)
游ゴシックとMS PゴシックはWindows10の標準フォントです。現状は游ゴシックのセットがおすすめです。
![Notoフォント](https://butaoji-pcblog.com/wp-content/uploads/2021/01/252776c593b990c069e737c6955b257a.jpg)
NotoフォントはGoogleが無償で公開しているフォントです。Webフォントはその端末にインストールされていなくても、ブラウザ上で表示できるメリットがあります。
現在ではよほど重たい作りをしているサイトでなければ、Webフォントを多用しても問題ないくらい高速化されています。
![M PLUSE 1pフォント](https://butaoji-pcblog.com/wp-content/uploads/2021/01/c80b20bb4c323bdcc09e4a433eacd418.jpg)
M PLUS 1pフォントもGoogleの無償フォントで、こちらはメイリオに近いゴシック系のフォントです。Roundedは丸ゴシックになります。
![小杉フォント](https://butaoji-pcblog.com/wp-content/uploads/2021/01/ae2a126f11909d17faa0d11f68b1ee8c.jpg)
小杉ゴシック・丸ゴシックもGoogleの無償フォントです。
![さわらびフォント](https://butaoji-pcblog.com/wp-content/uploads/2021/01/60393d7dd8922de8139022a04879731d.jpg)
さわらびゴシック・明朝もGoogleの無償フォントです。
上記のフォントはGoogle Fontsからダウンロードできますので、気に入ったものがあればダウンロードしてブラウザのデフォルトフォントにしてもよいでしょう。
フォントの設定
サイトフォントの設定をしていきましょう。
![フォント設定項目](https://butaoji-pcblog.com/wp-content/uploads/2021/01/5ebf3e56c192a3f613b4bc791f1aea1a.png)
[フォント]では上記のフォントから自分の気に入ったものを選択します。
[文字サイズ]は本文の文字サイズで、このサイズを基準に見出しなどのサイズも決定されます。以前は16pxが標準でしたが、ディスプレイの解像度が高くなってきている現在は18pxぐらいが主流になっています。
[文字色]は本文の文字色を決めます。通常はデフォルトでかまいません。
以上を決めたら、上の方にある[変更をまとめて保存]をクリックして保存・決定します。
これでCocoonの記事本文のフォントの変更ができました。
コメント