Cocoonのフォント変更方法!おすすめのフォントも解説

スポンサーリンク
cocoonのフォント変更方法Cocoon
こまるちゃん
こまるちゃん

ブログの雰囲気と文字の雰囲気があわないんだよね。

わかるちゃん
わかるちゃん

簡単な設定でフォント(字体)を変えることができるよ!

本日はCocoonでフォント(字体)を変更する方法をお話しします。

この記事を読んでくださっているあなたはすでにフォントを変えたい!という意志を持っている方だと思います。

ふくち
ふくち

そう、フォントは読み手に与える印象も左右する大切な要素です

この記事では以下をお話します。

  • ブログにおけるフォントの重要性
  • Cocoon で利用できるフォントの紹介
  • Cocoon のフォントの変更方法

変更方法だけ知りたい!という方は目次の3番へジャンプしてくださいね↓↓

スポンサーリンク

ブログにおけるフォントの重要性

重要性

ブログで大切なのは内容だからフォントは関係ないと思われる方もいるかもしれません。

確かに内容に比べれば優先度は低めですが、フォントはブログの印象を左右する重要なポイントです。

なぜなら、人は文字から言葉の意味だけでなく、印象も受け取っているからです。

ふくち
ふくち

手紙なども字によって相手の性格が感じられたり、話をする場合も、相手の声のトーンや話し方によって受け手の印象が全然違いますよね!

PCの文章でいうと、この部分がフォントと言えそうですね。

少し例を見てみましょう。

同じ言葉でも「知的」「繊細」「元気」「おしゃれ」など、印象が違ってきますね。

さまざまな字体の比較

デザインの世界でもフォントはデザインのイメージを大きく左右するため、重要視されています。

ブログでも人を惹きつけ、読んでもらうためにフォントにもこだわりましょう!

Cocoon で利用できるフォントとおすすめフォントの紹介

ABCの文字の上に人々が立ったり座ったりしているイラスト

ここでは、Cocoon で利用できるフォントを画像で確認していきましょう。

その上でブログの特色に合わせたおすすめのフォントを紹介します!

Cocoon で利用できるフォント一覧

最初にCocoon で利用できるフォントにはどんなものがあるのか見ていきましょう!

Cocoon に装備されているフォントは全部で12種類あります。

正直、ほとんど見栄えが変わらないものもあるのですが^^;

ふくち
ふくち

ちなみにこのブログのフォントは12の「小杉丸ゴシック」だよ!

文字サイズはPCで16px、モバイルで14pxです!

Cocoon のフォント一覧

1.ヒラギノ角ゴ,メイリオ 
(初期設定で適用)

ヒラギノ角ゴ,メイリオのプレビュー

3.游ゴシック体,ヒラギノ角ゴ

游ゴシック体,ヒラギノ角ゴのプレビュー

5.Noto Sans JP(WEBフォント)

Noto Sans JP(WEBフォント)のプレビュー

7.Mplus 1p (WEBフォント)

Mplus 1p (WEBフォント)のプレビュー

9.小杉ゴシック(WEBフォント)

小杉ゴシック(WEBフォント)のプレビュー

11.さわらびゴシック(WEBフォント)

さわらびゴシック(WEBフォント)プレビュー

2.メイリオ,ヒラギノ角ゴ

メイリオ,ヒラギノ角ゴのプレビュー

4.MS Pゴシック,ヒラギノ角ゴ

MS Pゴシック,ヒラギノ角ゴのプレビュー

6.Noto Serif JP(WEBフォント)

Noto Serif  JP(WEBフォント)のプレビュー

8.Rounded Mpuls 1c(WEBフォント)

Rounded Mpuls 1c(WEBフォント)のプレビュー

10.小杉丸ゴシック(WEBフォント)
※当ブログで利用しているフォント

小杉丸ゴシック(WEBフォント)プレビュー

12.さわらび明朝(WEBフォント)

さわらび明朝(WEBフォント)プレビュー

わかるちゃん
わかるちゃん

WEBフォントはインターネット上で配布されているフォントのことだよ!

ブログジャンル別おすすめフォント紹介

顔文字のマークを持った人々のイラスト

ブログのジャンル別でおすすめのフォントを紹介します。

ビジネス系ブログ

角ゴシック系の書体がおすすめです。(上記で言うと1〜4)

名前に「角ゴ(角ゴシックの略)」とついているものですね!

ですので、初期設定の「ヒラギノ角ゴ,メイリオ」のままでもOKです。

角ばっており、直線的なゴシック体は「信頼感」を与えます。

そのため、ビジネスマン向けのブログや、比較的堅めの内容のブログに適しています。

高級商品の紹介ブログ・文学的なエッセンスのあるブログ

このようなブログには 6のNoto Serif JPまたは12のさわらび明朝がおすすめです。

明朝体は「繊細さ」や「高級感」などが感じられる書体です。

小説などにも使われているのも目にすること思います。

例えば、高級商品で言うと高級エステやジュエリー、高級ホテルなど。

文学的なエッセンスというところでは芸術作品を紹介するブログであったり、小説調のブログであったりというイメージです。

育児ブログ・やわらかい見た目のブログ

やわらかな雰囲気のブログにはこんな書体がおすすめです。

8のRounded Mpuls 1cや10の小杉丸ゴシックなど丸みのある文字が適しています。

なぜなら、「丸み=かわいらしい」という印象があるためです。

一例としては、赤ちゃんや小さなお子さんの子育てのブログや、可愛いキャラクター紹介のブログなど。

ふくち
ふくち

利用したいフォントは決まったかな?

Cocoon のフォント変更3ステップ

女性が階段をのぼっているイラスト

フォントが決まったら変更作業に入りましょう!

変更はとっても簡単。3分あればできます。

Cocoon 設定の「全体」を開く

WordPressの画面で、「①Cocoon 設定」→「②全体タブ」をクリック

フォントを選択する

下方にスクロールするとすぐに「サイトフォント」という項目がありますので、その中のフォントのプルダウンから好きなフォントを選択しましょう。

保存していない段階では右側のプレービューに反映されないことがあります。

変更を保存する

一番下までスクロールすると「変更をまとめて保存する」というボタンがありますので、クリックしましょう。

これで作業は完了です。

「変更をまとめて保存」を押した際に以下の表示になった場合はサーバーのWAFの設定が問題が考えられます。(WAFを一時的にOFFにすると変更が可能になるほとんどです。)

設定変更すると閲覧できませんという画面が出てくる

利用のサーバーによりWAFの設定方法は異なります。主要なサーバーの公式ページのリンクを「ブログカード」で貼っておきますのでご確認下さい。

変更を保存した後は必ず再度WAFをONにしてください

※WAF(ウェブアプリケーションファイアウォール)は不正アクセス等外部の脅威を防ぐ仕組みです。

主要サーバーのWAFの解除方法を確認する

ConoHa WING WAFのOFFにする方法

エックスサーバー WAFをOFFにする方法

ロリポップ! WAFをOFFにする方法

まとめ:Cocoon のフォントをブログに合わせて変更しよう!

本日はCocoon のフォント変更方法を見てきました。

ポイントはこちら

  • フォント(書体)はブログの印象を左右する
  • ブログのジャンルや雰囲気に合わせたフォントを選ぶ
  • 書体の変更はCocoon 設定の「全体」から行う
ふくち
ふくち

とっても簡単にブログの印象を変えられる方法なので、ぜひ試してみてくださいね!

\ボックスメニューをオリジナルにカスタマイズしてみよう/

\2022年7月リリースの最新著書/

ダイヤモンド社
¥1,760 (2022/08/09 13:34時点 | Amazon調べ)
わかるちゃん
わかるちゃん

ブロガー1家に1冊!初級者〜中級者までしっかり使えるブログの教科書的な本だよ♪

記事がよかったらクリックで応援お願いします

コメント

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