【Cocoon】見出しをおしゃれにカスタマイズ！CSSなしで設定する方法を“初心者”向けに解説

「見出しの色やサイズを変更したい」

「CSSを使わず見出しをカスタマイズできる？」

「そもそも見出しの正しい使い方は？」

この記事では、そんな方に向けて、CocoonでCSS編集せずに見出しをカスタマイズする方法をお話しします。

どこよりも分かりやすく書いている自信がありますので、ぜひ最後まで読んでマスターしてください！

また以下の記事では、Cocoonの使い方や設定方法をブログ運営歴・公開した記事数別でまとめて紹介しています。

さっそく本題に入りましょう。

Cocoon見出しの設定方法

Cocoonで見出しの設定方法は、下記の通りです。

見出しはH1~H6の6種類あり、

です。

見出しのレベルを変更する方法

見出しのレベル(H2~H6)を変更する方法は、下記の通りです。

見出しの機能を変更する方法

見出しの機能を変更する方法は、下記の通りです。

Cocoon見出しをカスタマイズする方法

Cocoonの見出しでカスタマイズできる機能は、大きく分けて2つあります。

それぞれ詳しく解説します。

色

見出しの色をカスタマイズできるところは、

• テキスト
• 背景

の２つです。

見出しの色は、変更したい項目(テキストor背景)をクリックして変更します。

他の素材で使われている色を抽出し、同じ色を使って統一感を出したい場合は、その色のカラーコードを入力すると同じ色を使うこともできます。

色の抽出方法やカラーコードの調べ方は、下の記事を参考にしてください。

タイポグラフィ

見出しのタイポグラフィをカスタマイズできるところは、

• サイズ
• 外観
• 行の高さ
• 文字間隔
• テキスト装飾
• 大文字小文字

の6つです。

タイポグラフィに表示されない項目は、タイポグラフィオプションをクリックし、表示したい項目をチェックすると、設定変更できるようになります。

見出しのサイズは、4種類あります。

見出しの外観は、19種類あります。

見出しの行の高さは、0から自由に設定できます。

見出しの文字間隔は、0から自由に設定できます。

見出しの装飾は、3種類あります。

見出しの大文字小文字は、4種類あります。

Cocoon見出しの正しい使い方

Cocoonで見出しを使うときに注意した方がいいポイントは、3つあります。

それぞれ解説します。

H1見出しの使用は1回のみ

WordPressでは、H1見出しは記事のタイトルでのみ使い、本文中で使うことはありません。

本文中で使う見出しはH2~H6を使いましょう。

見出しの階層を守る

見出しは基本的に、H2→H3→H4→H5→H6の順に使います。

H2見出しをより詳細に説明したい場合にH3見出しを使い、

H3見出しをより詳細に説明したい場合にH4見出しを使います。

例えば、H2見出しの中に、H3見出しを飛ばしてH4見出しやH5見出しを使わないようにしましょう。

見出しの使いすぎや階層が深くなりすぎは避ける

見出しを使いすぎたり、見出しの階層が深くなりすぎたりすると、

文章が読みづらくなったり、分かりづらい記事になってしまいます。

また、目次に表示される見出しの数も増えるので、ユーザーが読みたい見出しを探すのに手間もかかります。

ですので、見出しの数は必要最低限に抑えましょう。

見出しを使う3つのメリット

見出しを使うメリットを、私なりにざっと書いてみました。

それぞれ解説します。

見やすく、読みやすくなる！

見出しがなく、ダラダラと書かれている文章は、見づらいし内容が頭に入ってこなくなります。

見出しを使うと、その見出しに書かれている大まかな内容が分かるようになり、スラスラと頭に入りやすくなります。

目次に表示され、内容が一目で分かる！

見出しがないと目次が表示されず、何が書かれているか分からなくなります。

ユーザーが読みたい文章がページの最後の方にあっても、途中でページから離脱されることもあります。

見出しを使うと、目次が表示され、ページ全体に何が書かれているか大まかに分かるようになったり、読みたい見出しにジャンプして読むことができます。

見出しを設定しても目次が表示されない場合は、下の記事を参考にしてください。

SEO対策になる！

見出しがないと、Googleの検索エンジンに記事の内容がうまく伝わらなくなります。

見出しの中に狙ったキーワードを入れると、記事の検索順位が上がり、SEO対策も期待できます。

当ブログ使用「SWELL」は見出しがオシャレ！

当ブログでは、2024年4月からWordPressテーマ「SWELL」を使っています。

Cocoonでは、スキンを変更しなければ見出しのデザインを変更できません。

ただ、SWELLでは見出しのレベルごとにデザインを変更できます。

もちろん、見出しの色も自由に変更できます。

おしゃれな見出しを使いたい人は、SWELLもおすすめですよ。

まとめ

今回は、CocoonでCSS編集せずに見出しをカスタマイズする方法を紹介しました。

以下の記事では、見出し以外のカスタマイズ方法も紹介しています。

また当ブログでは、Cocoonに関する記事をいくつか書いてます。

下のカテゴリーページにまとめていますので、のぞいてみてください。