Cocoonの見出しデザインをカスタマイズ！初心者向け7つの手順

この記事では、Cocoon見出しのデザインをカスタマイズする簡単な方法をご紹介します。

この記事を読むと分かること

Cocoonの見出しデザインを変えると何が良くなるのか
コードを書かずにできるCocoon見出しカスタマイズの方法
CSSでh2・h3をおしゃれに整えるための具体的なステップ
サイドバー見出しまで含めたトータルデザインの整え方

先に結論を一言でまとめると、Cocoonの見出しは「スキンの選び方＋色の設定＋少しのCSS」さえ押さえれば、初心者でも十分おしゃれにカスタマイズできます。

Cocoonの見出しデザインを変えるメリット
Cocoon見出しカスタマイズの基本ルール（H2〜H4）
コードなしでできるCocoon見出しデザインの変え方
CSSでCocoonの見出しをカスタマイズする手順
おしゃれなCocoon見出しデザイン例と考え方
サイドバーやボックスの見出しもCocoonでカスタマイズ
Cocoon見出しカスタマイズのよくある質問
まとめ：Cocoon見出しカスタマイズの第一歩

Cocoonの見出しデザインを変えるメリット

ごとう

ここでは、Cocoonの見出しをカスタマイズすると何が変わるのか、まずはイメージをそろえていきます。

Cocoonデフォルト見出しデザインの特徴

Cocoonテーマは、導入した段階から見出しに背景色やボーダー、角丸などの装飾が入っており、そのままでも読みやすいデザインになっています。ただ、多くの人が使っているテーマだからこそ、「どこかで見たことがある見た目」になりやすいのも事実です。

項目	内容
見た目	シンプルで見やすいが、やや無難な印象
メリット	何もしなくてもレイアウトが整う、設定がほぼ不要
デメリット	他のCocoonサイトと差別化しづらく、世界観を出しにくい
よくある悩み	「もう少しおしゃれにしたい」「ジャンルに合う色に変えたい」

私も最初は、他のブロガーさんの記事と自分のブログを見比べて、「なんだか同じような雰囲気だな」と感じていました。見出しは本文中で何度も目に入るパーツなので、少し手を加えるだけでも印象が一気に変わります。

見出しカスタマイズがブログに与える効果

Cocoonの見出しデザインを変えると、単におしゃれになるだけでなく、読みやすさや信頼感にも影響します。例えば次のような効果が期待できます。

どこからどこまでが一つの話なのか、読者に直感的に伝わりやすくなる
スマホでスクロールしても、情報の区切りがパッと分かる
「ちゃんとデザインされたブログだな」という安心感が出る
目次と実際の見出しの対応が分かりやすくなり、読み進めやすい

特にスマホユーザーは、見出しだけざっと眺めて「読むか閉じるか」を判断することが多いです。だからこそ、見出しデザインを整えることは、ブログ全体の読みやすさの底上げにつながります。

【深呼吸タイム】

稼ぐために必要な3つのポイントを知っていますか？

稼げる広告
稼げるキーワード
稼げるライティング

これら全部を暴露します。

⇒まずはあっさり10万稼ぐためのメルマガ

Cocoon見出しカスタマイズの基本ルール（H2〜H4）

ごとう

ここからは、実際にCocoonの見出しをいじる前に、最低限知っておきたいルールを整理します。ルールを押さえておくと、デザインを変えても読みづらくなる心配が減ります。

Hタグごとの役割をざっくり整理しよう

まずは、h2・h3・h4の役割をざっくり整理しておきましょう。Cocoonに限らず、WordPressの見出しは「階層」を意識して使うのが基本です。

見出しタグ	役割	使う場面の例
h1	記事タイトル（テーマが自動で出力）	投稿タイトル部分に使われる
h2	記事の大きな章タイトル	「結論」「手順」「まとめ」などの大きな区切り
h3	h2の中の小見出し	手順1〜3、ポイントの分解など
h4	h3をさらに細かく説明したいとき	補足情報や注意書きなど

本文中では、基本的にh1は使わず、h2からスタートするのがおすすめです。「h2が章」「h3がその中の項目」というイメージを持っておくと、見出しデザインも決めやすくなります。

デザインを決める前に考えておきたいこと

見出しのカスタマイズというと、つい「どのCSSをコピペしようかな」と考えがちですが、その前に少しだけ整理しておきたいことがあります。先に次の3つを決めておくと、Cocoon見出しカスタマイズがぶれにくくなります。

ブログ全体のメインカラーは何色にするか
どの見出しレベル（多くはh2）を一番目立たせたいか
ターゲット読者の雰囲気（ビジネス寄り、かわいい系、日記系など）

たとえばビジネス寄りのブログなのに、見出しだけポップな原色でキラキラしていると、読者は少し違和感を覚えます。逆に、日記や子育てブログなら、角丸のボックス見出しや、やさしい色合いの帯見出しがよく合います。先に「どんな空気感にしたいか」をざっくり決めておくのがポイントです。

【ちょっと一息♪】

私の妻がどうやって7日で初報酬を得て5万円の不労所得を得られるようになったか？
その全貌を知りたくありませんか？

⇒今すぐ秘密を見る

コードなしでできるCocoon見出しデザインの変え方

ごとう

「できればCSSは触りたくない…」という人も多いと思います。ここでは、コードを書かなくてもできるCocoon見出しのデザイン変更の方法を紹介します。スキンや色設定だけでも、見た目の印象はかなり変えられます。

スキン変更で見出しデザインを一括で変える

Cocoonには「スキン」という機能があり、選ぶだけで見出しやボタン、細かい装飾の雰囲気をまとめて切り替えられます。管理画面のCocoon設定からスキンを変えるだけで、Cocoonの見出しデザインもガラッと変わります。

スキンのタイプ	見出しの印象	向いているブログ
シンプル系	線と文字が中心でスッキリ	雑記ブログ、解説系ブログ
ポップ系	はっきりした色で目立ちやすい	グルメ、子育て、ライフスタイル系
クール系	モノトーン寄りでシャープな印象	ビジネス、副業、ガジェット系

いくつかスキンを切り替えて、実際の記事ページで見出しの雰囲気を見比べてみてください。そこで「この感じ好きだな」と思えたスキンをベースに、細かい調整に進んでいくと失敗しにくいです。

サイトキーカラーで世界観をそろえる

スキンだけではしっくりこないときは、「サイトキーカラー」の設定も見直してみましょう。キーカラーは、リンクやボタンなど、サイトのアクセントになる色を決める場所です。

ロゴやアイキャッチでよく使う色を、キーカラーとして統一する
濃い色を選んだときは、見出しの背景色を少し薄めにして目が疲れないようにする
サブカラー（グレーや淡い色）をh3やh4の線色に使い、メリハリを付ける

スキンとキーカラーの方向性がそろうと、「なんとなくバラバラ」という印象が消えて、「このブログっぽい見出し」に見えてきます。Cocoonの見出しカスタマイズは、色の整理だけでもかなり変わります。

ブロックエディターの装飾で「見出し風」ボックスを作る

CSSを書かなくても、WordPressのブロックエディター機能を使えば、「見出しのすぐ下に見出し風のボックスを置く」といったデザインも作れます。たとえば、h2の直後に枠付きのボックスを配置して、その中に要点だけまとめる使い方です。

よく使うブロックの役割をまとめると、次のようなイメージになります。

ブロックの種類	役割	向いている使い方
見出しブロック	記事の構造を作る本体	h2〜h4で章立てする
グループブロック	複数ブロックをひとまとめにする箱	見出し＋ボックスをセットで扱う
ボックス系ブロック	枠や背景付きの装飾ボックス	コラムや注意書きを見出し風に強調する

CSSが苦手な場合でも、「重要な部分だけボックスで囲って、見出しとセットで使う」だけで、読みやすさとデザイン性を両立しやすくなります。

★ちょっとだけ宣伝させてください★

「ブログで10万」と聞くと、

センスが必要
文章力が要る

と思われがちですが、実は「勝ちパターン」を知っているかどうかだけなんです。

⇒ブログで10万稼ぐ勝ちパターンとは

CSSでCocoonの見出しをカスタマイズする手順

ごとう

ここからは、「せっかくならCSSも少し触って、見出しを自分好みに変えたい」という人向けのパートです。順番に進めれば、コピペ中心でもCocoonの見出しデザインをかなり自由に調整できます。

追加CSSと子テーマ、どちらを使うか

【稼げるキーワード教えます】
▼　　▼　　▼

Cocoonで見出しカスタマイズ用のCSSを書く場所は、主に次の2つがあります。

方法	特徴	向いている人
外観 → カスタマイズ → 追加CSS	管理画面からすぐ変更でき、テーマ更新の影響を受けにくい	初心者、まず試してみたい人
子テーマのstyle.css	カスタマイズが増えても整理しやすく、細かい管理に向く	中級者以上、長くブログを育てたい人

最初は追加CSSで十分です。「この見出しデザイン、しばらく固定で使っていきたいな」と思ったタイミングで、子テーマ側にコードを移しても大丈夫です。

Cocoon見出しをリセットする基本の考え方

多くのCocoon向けカスタマイズ例では、まず「デフォルトの見出し装飾を一度軽くリセットしてから、新しいデザインを上書きする」という手順を取っています。最初から背景色やボーダーが入っている状態だと、新しく書いたCSSとぶつかりやすいからです。

.article h2〜h4 などに入っている背景色やボーダーを、一度「なし」にする
そのあとで、自分好みの背景色・線・余白などを追加する

実際のコードは使っているスキンや好みにもよりますが、「不要な装飾を先に引き算してから、欲しいデザインを足していく」という流れだけ覚えておくと、思わぬ崩れを防ぎやすくなります。

セレクタと優先順位の簡単なルール

Cocoonの見出しデザインをCSSで変えるときによく使うのが、「.article h2」「.article h3」といったセレクタです。これは「記事本文の中にあるh2・h3にだけ、このデザインを適用する」という意味になります。

最低限、次のポイントだけ押さえておけば、優先順位で迷いにくくなります。

見出し2を変えたいときは .article h2、見出し3なら .article h3 に対して書く
同じh2に対するCSSが複数あるときは、あとに書いた方が優先される
どうしても効かないプロパティだけ、color: #333 !important; のように !important を付ける

このあたりを理解しておくと、「CSSを貼ったのにCocoonの見出しカスタマイズが反映されない…」というトラブルをかなり減らせます。

おしゃれなCocoon見出しデザイン例と考え方

ごとう

ここからは、Cocoonの見出しデザインを考えるときの具体的なパターンを、いくつかの方向性に分けて紹介します。CSSの数値はあなたのブログに合わせて微調整していけばOKです。

シンプルなCocoon見出しデザイン3パターン

まずは、どんなジャンルでも使いやすい「シンプル系」の見出しデザインからです。雰囲気の違いは、主に「線の位置」と「背景の有無」で決まります。

デザイン名	見た目のイメージ	向いているブログ
下線だけの見出し	文字の下に細い線が引かれる	解説系、マニュアル系
左線だけの見出し	左側に太めのラインが入る	ビジネス系、コラム系
背景帯付き見出し	見出し全体に帯状の背景色が付く	雑記、ライフスタイル系

下線タイプは、強めの色を使っても主張しすぎず、本文とのバランスを取りやすいです。左線タイプは、「ここから新しい話が始まる」というメリハリをつけたいときに便利。背景帯タイプは、記事全体に「雑誌っぽさ」を出したいときに相性がいいです。

目を引くポップな見出しデザインの考え方

もう少し目を引きたいときは、影やアイコンを使ったポップな見出しデザインも検討できます。ただしやりすぎると読者が疲れてしまうので、次のようなポイントを意識してみてください。

影（box-shadow）は薄いグレーで、軽く浮き上がる程度にする
角丸にする場合は、border-radiusをやりすぎないようにして大人っぽさを残す
アイコンや絵文字は、ジャンルやターゲットに合うものだけを厳選する

「派手な見出しは記事の中で1〜2種類だけ」と決めておくと、全体がゴチャゴチャせず、見出しデザインの統一感も保ちやすくなります。

スマホで読みやすい見出しデザインのコツ

Cocoonの見出しデザインを決めるときは、PCよりもスマホでどう見えるかを優先して考えるのがおすすめです。スマホで読みやすい見出しにするためのポイントを挙げます。

行間（line-height）はやや広めにして、2行表示になっても窮屈に見えないようにする
左右の余白（padding-left / padding-right）を取りすぎず、文字が中心に来るようにする
フォントサイズは、本文より一回り大きい程度にしてバランスを取る

特に、h2の背景色を濃くしたときは、文字色を白など明るい色にして、コントラストをしっかり付けることが大事です。スクロールしながらパッと見たときに「ここが見出しだ」と分かるかどうかを意識してみてください。

★ブログでは公開できない裏情報★

私の発行するメルマガではブログでは公開できない秘匿性が高い特別な情報を発信しております。

例えば、

実際に10万稼いだキーワード
今やるべきおススメ広告

などをこっそり暴露しています。ぜひ公開停止する前に受け取ってください。

⇒あっさり10万稼ぐためのメルマガ

サイドバーやボックスの見出しもCocoonでカスタマイズ

ごとう

本文の見出しだけでなく、サイドバーやボックス系の見出しも一緒に整えると、サイト全体の完成度が一段上がります。ここでは、Cocoonでよく使う部分を中心に考え方をまとめます。

サイドバー見出しをCocoonでカスタマイズする

Cocoonのサイドバー見出しは、本文とは別のセレクタでデザインされています。たとえば「.sidebar h3」や「.widget-title」などです。どこを変えたいかによって、狙う場所も変わります。

変えたい場所	セレクタの例	説明
サイドバー全体の見出し	.sidebar h3	サイドバー内のh3にスタイルを当てる
特定ウィジェットの見出し	.widget-title など	プロフィールや人気記事など特定のブロックだけ変える
カスタムHTMLで作った見出し	.任意のクラス名	自分で付けたクラスにだけデザインを適用する