《WordPress》Cocoonのフォント変更

テーマCocoonではサイトのフォントを簡単に変更できます。ただし、自由自在にフォントの種類を選べるわけではなく、12種類のセットから選ぶ形式になっています。

とはいえ、どんな端末でも同じように見えるようにするのはWeb制作の基本中の基本です。他人がサイトを見る時、そのフォントがインストールされていなかったら、結局はブラウザのデフォルト設定になるため、凝ったフォントを使用しても意味がありません。

それに変に凝ったフォントを本文にすると、とても読みづらくなってしまいます。

Cocoonの全体設定から変更する

ダッシュボードの［Cocoon設定］→［Cocoon設定］をクリックします。上部の［全体］タブをクリックして全体の設定画面を開きます。

下にスクロールすると、［サイトフォント］の項目があります。ここでフォントの種類・サイズ・色を選択します。フォントの種類は以下の12種類から選びます。

ヒラギノ角ゴはMacintoshの標準フォント、メイリオはWindows8系の標準フォントです。

游ゴシックとMS PゴシックはWindows10の標準フォントです。現状は游ゴシックのセットがおすすめです。

NotoフォントはGoogleが無償で公開しているフォントです。Webフォントはその端末にインストールされていなくても、ブラウザ上で表示できるメリットがあります。

現在ではよほど重たい作りをしているサイトでなければ、Webフォントを多用しても問題ないくらい高速化されています。

M PLUS 1pフォントもGoogleの無償フォントで、こちらはメイリオに近いゴシック系のフォントです。Roundedは丸ゴシックになります。

小杉ゴシック・丸ゴシックもGoogleの無償フォントです。

さわらびゴシック・明朝もGoogleの無償フォントです。

上記のフォントはGoogle Fontsからダウンロードできますので、気に入ったものがあればダウンロードしてブラウザのデフォルトフォントにしてもよいでしょう。

サイトフォントの設定をしていきましょう。

［フォント］では上記のフォントから自分の気に入ったものを選択します。

［文字サイズ］は本文の文字サイズで、このサイズを基準に見出しなどのサイズも決定されます。以前は16pxが標準でしたが、ディスプレイの解像度が高くなってきている現在は18pxぐらいが主流になっています。

［文字色］は本文の文字色を決めます。通常はデフォルトでかまいません。

以上を決めたら、上の方にある［変更をまとめて保存］をクリックして保存・決定します。

これでCocoonの記事本文のフォントの変更ができました。