《WordPress》Cocoonのフォント変更

Cocoonフォント変更 WordPress

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

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

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

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

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

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

Cocoonで使用できるフォントの種類

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

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

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

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

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

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

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

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

フォントの設定

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

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

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

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

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

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

コメント

モバイルバージョンを終了
タイトルとURLをコピーしました