Cocoonヘッダーカスタマイズ完全ガイド｜初心者でもできるおしゃれなサイトの作り方

Cocoonは無料テーマでありながら、WordPressサイトを本格的に作れる非常に優秀なテーマです。

ただ、実際に使い始めると、多くの初心者が最初につまずくのが「ヘッダーの見た目」です。

「ロゴを入れたい」「メニューをきれいに並べたい」「スマホで見やすくしたい」「Cocoonっぽさを消しておしゃれにしたい」

このように感じている方は多いはずです。

ヘッダーは、サイトに訪問したユーザーが最初に見る場所です。つまり、サイトの第一印象を決める非常に重要な部分です。

どれだけ記事内容が良くても、ヘッダーが見づらかったり、メニューが整理されていなかったりすると、ユーザーはすぐに離脱してしまう可能性があります。

この記事では、Cocoonヘッダーカスタマイズの基本から、ロゴ設定、ヘッダー画像、グローバルメニュー、スマホメニュー、CSSでのデザイン調整、初心者が失敗しやすいポイントまで、まとめて解説します。

難しいコードがわからない方でも、順番に進めれば、おしゃれで見やすいCocoonサイトに近づけます。

ヘッダーだけでなく、サイトカラー・吹き出し・ボタン・CSSなどもまとめて整えたい方は、Cocoonカスタマイズ完全ガイドから順番に確認してください。

Cocoonヘッダーカスタマイズで最初に意識すべきこと

Cocoonのヘッダーをカスタマイズするときに、最初から「派手にしたい」「人と違うデザインにしたい」と考える方もいます。

もちろんデザイン性は大切ですが、初心者が最初に意識すべきことは、見た目よりも「わかりやすさ」です。

ヘッダーには、主に次の役割があります。

• サイトの内容を一瞬で伝える
• ユーザーを目的のページへ案内する
• サイト全体の信頼感を作る
• スマホでも迷わず移動できるようにする
• 回遊率を高める

つまり、ヘッダーは単なる飾りではありません。

ユーザーが「このサイトは何のサイトなのか」「どこを見ればいいのか」を判断するための案内板です。

特にブログやアフィリエイトサイトでは、ヘッダーのメニュー設計が内部リンクにも関係します。

大切なカテゴリやハブ記事へ誘導できれば、読者の滞在時間や回遊率の向上にもつながります。

Cocoonヘッダーでカスタマイズできる主な項目

Cocoonでは、管理画面から多くのヘッダー項目を変更できます。

初心者の場合は、いきなりCSSを触るのではなく、まずCocoon設定でできる範囲から整えるのがおすすめです。

項目	内容	重要度
サイトタイトル	サイト名を表示する部分	★★★★★
キャッチフレーズ	サイトの説明文	★★★★☆
ロゴ画像	ブランド感を出す画像	★★★★★
ヘッダー画像	サイト上部に表示する大きな画像	★★★★☆
グローバルメニュー	主要カテゴリへの導線	★★★★★
スマホメニュー	スマートフォン用のナビゲーション	★★★★★
ヘッダーの高さ	画面上部の余白やバランス	★★★★☆
背景色・文字色	デザイン全体の印象	★★★★☆

この中でも、最初に整えるべきなのは、ロゴ、サイトタイトル、グローバルメニュー、スマホメニューです。

ここが整っているだけで、サイト全体の印象は大きく変わります。

Cocoonでロゴ画像を設定する方法

ロゴ画像は、サイトの印象を作る重要な要素です。

文字だけのサイトタイトルでも運営はできますが、ロゴがあるとサイト全体に統一感が出ます。

特に、ブログを長く育てていく場合や、アフィリエイトサイトとして信頼感を出したい場合は、ロゴ画像を設定しておくのがおすすめです。

ロゴ画像の設定手順

1. WordPress管理画面にログインする
2. 「Cocoon設定」をクリックする
3. 「ヘッダー」タブを開く
4. 「ヘッダーロゴ」に画像を設定する
5. 「変更をまとめて保存」をクリックする

ロゴ画像は、横長のデザインにするとヘッダーに収まりやすくなります。

おすすめは、背景透過のPNG画像です。

背景が透明だと、ヘッダーの背景色を変更しても自然に表示できます。

ロゴが大きすぎる場合は、画像そのものを小さくするか、CSSで表示サイズを調整します。

.site-logo-image {
  max-height: 60px;
  width: auto;
}

このCSSを追加すると、ロゴの高さを60px以内に抑えることができます。

ヘッダー画像を設定する方法

ヘッダー画像を使うと、サイトの雰囲気を大きく変えられます。

特に、トップページをサイト型にしたい場合や、コーポレートサイト風に見せたい場合は、ヘッダー画像が効果的です。

ただし、ヘッダー画像は大きすぎると表示速度に影響します。

そのため、画像サイズと容量には注意しましょう。

おすすめのヘッダー画像サイズ

項目	おすすめ
横幅	1200px〜1600px
高さ	300px〜500px
形式	WebPまたはJPEG
容量	できれば300KB以下

ヘッダー画像に文字を入れすぎると、スマホ表示で読みにくくなることがあります。

画像内の文字は少なめにして、サイトタイトルやキャッチコピーはWordPress側で表示させる方が管理しやすいです。

グローバルメニューをカスタマイズする方法

グローバルメニューは、ヘッダーの中でも特に重要な部分です。

ここには、サイト内で読んでほしい主要カテゴリや重要記事へのリンクを配置します。

メニューが整理されていると、ユーザーは目的の記事へ移動しやすくなります。

逆に、メニューが多すぎたり、名前がわかりにくかったりすると、ユーザーは迷ってしまいます。

グローバルメニューの設定手順

1. WordPress管理画面を開く
2. 「外観」→「メニュー」をクリックする
3. 新しいメニューを作成する
4. 固定ページ・投稿・カテゴリーを追加する
5. 表示位置を「ヘッダーメニュー」に設定する
6. 保存する

メニューに入れる項目は、できるだけ6個前後にまとめるのがおすすめです。

多すぎると見づらくなり、スマホ表示でも崩れやすくなります。

ブログ・アフィリエイトサイトにおすすめのメニュー構成

これは、僕の場合も含めてブログを収益化していくには、

結構重要な構成です。。。

• WordPress
• Cocoon設定
• Cocoonカスタマイズ
• SEO対策
• AI活用
• Udemy
• プロフィール
• お問い合わせ

僕の場合もですが一般的にCocoonやWordPressを中心に記事を増やしている場合は、カテゴリを整理してヘッダーに配置することで、サイト全体の専門性も伝わりやすくなります。

スマホメニューを必ず確認する

現在のブログ運営では、スマホ表示の確認は必須です。

パソコンではきれいに見えていても、スマホで見るとメニューが詰まっていたり、ロゴが大きすぎたりすることがあります。

Cocoonはスマホ表示にも対応していますが、設定内容によっては見づらくなることがあります。

スマホで確認すべきポイント

• ロゴが大きすぎないか
• メニューがタップしやすいか
• 文字が小さすぎないか
• ヘッダーが画面を圧迫していないか
• ハンバーガーメニューが使いやすいか
• フッターモバイルボタンが邪魔になっていないか

スマホユーザーは、少しでも使いにくいとすぐに離脱してしまいます。

そのため、ヘッダーは「おしゃれ」よりも「迷わない」ことを優先しましょう。

特に、初心者向けサイトの場合は、シンプルなメニュー構成の方が読者に親切です。

CSSでCocoonヘッダーをおしゃれにする方法

Cocoon設定だけでもヘッダーは整えられますが、さらに見た目を変えたい場合はCSSを使います。

CSSを使うと、背景色、文字色、ホバー色、影、高さ、余白などを細かく調整できます。

ただし、初心者がいきなり複雑なCSSを書く必要はありません。

まずは、コピペで使える基本的なCSSから試していきましょう。

CSSを追加する場所

1. WordPress管理画面を開く
2. 「外観」→「カスタマイズ」をクリックする
3. 「追加CSS」を開く
4. CSSコードを貼り付ける
5. 「公開」をクリックする

本格的に運用する場合は、Cocoon子テーマのstyle.cssに記述する方法もあります。

ヘッダー背景色を変更するCSS

.header-container {
  background-color: #0f172a;
}

濃いネイビー系の背景にすると、落ち着いた印象になります。

メニュー文字を白にするCSS

.navi-in a {
  color: #ffffff;
}

背景色を濃くした場合は、メニュー文字を白にすると読みやすくなります。

ホバー時の文字色を変更するCSS

.navi-in a:hover {
  color: #ffd700;
}

マウスを乗せたときに色が変わると、操作している場所がわかりやすくなります。

ヘッダーに影を付けるCSS

.header-container {
  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}

影を付けることで、ヘッダーが少し浮き上がったように見えます。

ヘッダーの高さを調整するCSS

.header-container {
  max-height: 80px;
}

ヘッダーが大きすぎる場合は、高さを調整すると画面を広く使えます。

メニューの文字間隔を調整するCSS

.navi-in a {
  letter-spacing: 0.05em;
}

文字間隔を少し広げると、メニューが読みやすくなります。

ヘッダー下に境界線を入れるCSS

.header-container {
  border-bottom: 1px solid #e5e7eb;
}

ヘッダーと本文の境目がわかりやすくなります。

子テーマを使って安全にカスタマイズする

Cocoonを本格的にカスタマイズするなら、子テーマを使うことをおすすめします。

親テーマを直接編集すると、Cocoon本体を更新したときに変更内容が消えてしまう可能性があります。

子テーマを使えば、親テーマを更新しても自分で追加したCSSやPHPの変更を残しやすくなります。

子テーマを使うメリット

• テーマ更新でカスタマイズが消えにくい
• CSSを整理しやすい
• functions.phpを安全に編集しやすい
• 元に戻しやすい
• 本格的なサイト運営に向いている

初心者のうちは「追加CSS」でも問題ありません。

ただし、長くサイトを育てていくなら、早い段階で子テーマに慣れておくと安心です。

functions.phpを使うカスタマイズは慎重に行う

Cocoonのカスタマイズでは、functions.phpを編集する場面もあります。

functions.phpを使えば、WordPressに独自の機能を追加できます。

ただし、functions.phpは非常に重要なファイルです。

コードを1文字間違えただけでも、サイトが真っ白になることがあります。

初心者の方は、CSSカスタマイズに慣れてから触るようにしましょう。

functions.phpを編集する前に必ずやること

• バックアップを取る
• 子テーマのfunctions.phpを編集する
• コードを一度に大量追加しない
• エラーが出たらすぐ戻せるようにする
• FFFTPやFileZillaで復旧できる準備をしておく

WordPress管理画面からfunctions.phpを直接編集するのは危険です。

万が一エラーが出ると、管理画面に入れなくなることがあります。

初心者がやりがちなヘッダーカスタマイズの失敗

Cocoonヘッダーをカスタマイズするとき、初心者がよくやってしまう失敗があります。

見た目を良くしようとしても、逆に使いにくいサイトになってしまうことがあるので注意しましょう。

失敗1：メニューを増やしすぎる

ヘッダーメニューにたくさん項目を入れると、ユーザーは迷ってしまいます。

特にスマホでは見づらくなるため、メニューはできるだけ絞りましょう。

失敗2：ロゴが大きすぎる

ロゴが大きすぎると、ヘッダーだけで画面の多くを使ってしまいます。

スマホでは特に圧迫感が出るため、ロゴサイズは必ず確認しましょう。

失敗3：色を使いすぎる

おしゃれに見せようとして色を増やしすぎると、全体の統一感がなくなります。

基本は、メインカラー、サブカラー、アクセントカラーの3色程度にまとめるのがおすすめです。

失敗4：スマホ表示を確認していない

パソコンだけで確認して公開すると、スマホで崩れていることがあります。

記事公開前には必ずスマホ表示を確認しましょう。

失敗5：CSSを入れすぎて管理できなくなる

ネット上のCSSを何度もコピペしていると、どのコードがどこに効いているのかわからなくなります。

CSSを追加するときは、目的ごとにコメントを付けて管理すると安心です。

/* ヘッダー背景色 */
.header-container {
  background-color: #0f172a;
}

SEOに強いCocoonヘッダーとは？

ヘッダーをカスタマイズしたからといって、それだけで検索順位が上がるわけではありません。

しかし、ヘッダーの設計はSEOに間接的な影響を与えます。

なぜなら、ヘッダーは内部リンク、回遊率、ユーザー体験に関係するからです。

SEOで意識したいヘッダー設計

• 重要カテゴリへリンクする
• ハブ記事へ誘導する
• メニュー名をわかりやすくする
• スマホで使いやすくする
• 不要なリンクを増やしすぎない

たとえば、Cocoonカスタマイズの記事を増やしているなら、ヘッダーやメニューから「Cocoonカスタマイズ」カテゴリへ誘導することで、関連ページを見てもらいやすくなります。

これはサイト全体の専門性を伝えるうえでも有効です。

SEOでは、記事単体だけでなく、サイト全体の構造も重要です。

ヘッダーはその入口になるため、重要なページへ自然に誘導できるように設計しましょう。

おしゃれなCocoonヘッダーにするコツ

おしゃれなヘッダーを作るために、必ずしも複雑なCSSは必要ありません。

大切なのは、色、余白、文字、メニュー数を整えることです。

コツ1：色を統一する

サイト全体で使う色を決めておくと、ヘッダーも自然にまとまります。

おすすめは、メインカラーを1色、アクセントカラーを1色に絞ることです。

コツ2：余白を意識する

余白が少ないと、窮屈で読みにくい印象になります。

逆に余白を少し取るだけで、落ち着いたデザインに見えます。

コツ3：メニュー名を短くする

メニュー名が長すぎると、横幅を取りすぎます。

「WordPress初心者教材」よりも「WordPress」、「SEO対策・サイト改善」よりも「SEO対策」のように、短くわかりやすい表記がおすすめです。

コツ4：スマホを基準に考える

今はスマホで見るユーザーが多いため、パソコンよりもスマホを基準に考える方が失敗しにくいです。

スマホで見やすければ、パソコンでも大きく崩れることは少ないです。

コツ5：装飾しすぎない

影、グラデーション、アニメーションなどを入れすぎると、かえって見づらくなります。

初心者のうちは、シンプルで読みやすいヘッダーを目指しましょう。

僕が実際におすすめするCocoonヘッダー設定

初心者がCocoonでヘッダーを整えるなら、最初は次の設定がおすすめです。

• ロゴを設定する
• メニューは6個前後にする
• 重要カテゴリを左から順番に並べる
• 背景色は濃いめ、文字色は白にする
• スマホではメニューを詰め込みすぎない
• CSSは最低限だけ追加する

特に、ブログやアフィリエイトサイトでは、ヘッダーを派手にしすぎるよりも、記事へスムーズに移動できる構造の方が重要です。

読者はデザインを見に来ているのではなく、悩みを解決するために記事を読みに来ています。

そのため、ヘッダーは「かっこよさ」よりも「わかりやすさ」を優先しましょう。

よくある質問

 

 

.site-logo-image {
  max-height: 60px;
  width: auto;
}

 

 

 

 

 

 

 

次に読んでほしいおすすめ記事

Cocoonヘッダーを整えたら、次はメニューやトップページ、見出し、フッターも順番に整えていきましょう。

• Cocoonカスタマイズ実例集｜初心者でもできるおしゃれなサイトの作り方
• Cocoonおすすめ設定まとめ
• WordPress初期設定まとめ
• WordPress初心者教材ならUdemyがおすすめ

まとめ｜Cocoonヘッダーを整えるとサイトの印象は大きく変わる

今回は、Cocoonヘッダーカスタマイズについて解説しました。

ヘッダーは、サイトの第一印象を決める重要な場所です。

ロゴ、サイトタイトル、グローバルメニュー、スマホメニュー、背景色、文字色を整えるだけでも、サイト全体の印象は大きく変わります。

初心者の方は、まず次の順番で進めてください。

1. ロゴ画像を設定する
2. サイトタイトルとキャッチフレーズを整える
3. グローバルメニューを作る
4. スマホ表示を確認する
5. 必要に応じてCSSで調整する

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

1. 子テーマで安全に管理する

Cocoonは無料テーマですが、正しく設定すれば十分おしゃれで使いやすいサイトを作れます。

大切なのは、見た目だけを追いかけることではありません。

読者が迷わず記事を読めること、スマホでも使いやすいこと、サイトの目的が一瞬で伝わることです。

まずはできるところから少しずつ整えて、自分のサイトに合ったヘッダーを作っていきましょう。

僕が実際に行っているCocoonヘッダーカスタマイズ

ここからは、僕が実際に運営しているWordPressサイトで取り入れているヘッダーカスタマイズをご紹介します。

無料テーマのCocoonでも、少し工夫するだけで有料テーマのような見やすく使いやすいデザインに仕上げられます。

僕が意識しているのは、「派手なデザイン」ではなく、「読者が迷わないデザイン」です。

記事を読みに来たユーザーは、ヘッダーを眺めるためにサイトへ来ているわけではありません。

目的の記事へスムーズに移動できることが何より重要です。

僕が実際に設定しているポイント

• ロゴは横長でシンプルなデザイン
• ヘッダーは高さを抑えて記事がすぐ見えるようにする
• グローバルメニューは7個以内にまとめる
• スマホ表示を優先してデザインする
• 背景色は濃い色、文字は白で統一する
• ホバー時だけアクセントカラーを使用する

このような構成にすることで、記事本文までの距離が短くなり、読みやすいサイトになります。

---

CSSカスタマイズ実例集

CocoonはCSSを追加するだけで、サイトの印象を大きく変えられます。

ここでは、初心者でも使いやすいCSSを紹介します。

① 背景色を変更する

.header-container{
background:#0f172a;
}

② メニュー文字を白にする

.navi-in a{
color:#fff;
}

③ ホバー時だけ黄色にする

.navi-in a:hover{
color:#ffd700;
}

④ ヘッダーに影を付ける

.header-container{
box-shadow:0 5px 15px rgba(0,0,0,.15);
}

⑤ ヘッダーを細くする

.header-container{
max-height:70px;
}

⑥ メニュー文字を太くする

.navi-in a{
font-weight:bold;
}

⑦ 文字間隔を広げる

.navi-in a{
letter-spacing:.05em;
}

⑧ 下線を付ける

.header-container{
border-bottom:1px solid #ddd;
}

⑨ メニュー中央寄せ

.navi-in{
justify-content:center;
}

⑩ ロゴサイズ調整

.site-logo-image{
max-height:60px;
}

CSSは一度に大量に追加するのではなく、一つずつ確認しながら追加することをおすすめします。

---

表示速度を落とさないヘッダーカスタマイズ

どれだけおしゃれなヘッダーでも、表示速度が遅くなるとユーザーは離脱してしまいます。

Googleも表示速度を重要な評価項目として考えています。

そのため、デザインだけではなく、軽さも意識しましょう。

おすすめ設定

• 画像はWebP形式にする
• ヘッダー画像は300KB以下
• JavaScriptを増やしすぎない
• 不要なアニメーションを入れない
• CSSは整理して管理する

軽いサイトはユーザー体験も向上し、結果としてSEOにも良い影響を与えます。

---

ユーザーが迷わないヘッダー設計を意識する

ヘッダーは「かっこよさ」よりも「使いやすさ」が重要です。

ユーザーは悩みを解決するためにサイトへ訪れています。

そのため、ヘッダーでは次の3つを意識しましょう。

• 何のサイトかわかる
• どこへ行けばいいかわかる
• スマホでも使いやすい

これだけでユーザーの満足度は大きく変わります。

---

SEOを意識したヘッダーの考え方

ヘッダーを変更しただけで検索順位が上がることはありません。

しかし、ヘッダー設計によって内部リンクや回遊率が改善されると、結果的にSEOへ良い影響を与える可能性があります。

僕がおすすめしているのは、重要カテゴリやハブ記事へ自然に誘導できるメニュー構成です。

読者が迷わず次の記事へ進めるサイトは、Googleからも評価されやすい傾向があります。

---

おしゃれなサイトを作る5つのコツ

1. 色は3色以内にまとめる
2. 余白を十分に取る
3. ロゴをシンプルにする
4. メニューは7個以内
5. スマホ表示を最優先に考える

この5つを意識するだけでも、無料テーマとは思えないほど完成度の高いサイトになります。

難しいCSSやJavaScriptを追加しなくても、十分におしゃれなサイトは作れます。

実際によくあるヘッダーカスタマイズのトラブルと解決方法

Cocoonヘッダーをカスタマイズしていると、「思ったように表示されない」「CSSが反映されない」といったトラブルが発生することがあります。

しかし、多くの場合は簡単な原因であることがほとんどです。

ここでは、初心者がよく経験するトラブルと、その解決方法を紹介します。

CSSを追加したのに変化がない

もっとも多い原因はキャッシュです。

• ブラウザのキャッシュ
• WP Fastest Cacheなどのキャッシュプラグイン
• Cocoonキャッシュ
• サーバーキャッシュ

まずはこれらを削除してから再確認しましょう。

スマホだけレイアウトが崩れる

パソコンだけを見てデザインを作ると、スマホではメニューが折り返されたり、ロゴが大きく表示されたりします。

必ずスマホ表示も確認しながら作業しましょう。

ロゴ画像がぼやける

小さい画像を無理に拡大すると画質が悪くなります。

最初から十分なサイズで作成し、表示だけ縮小する方がきれいになります。

---

僕がCocoonをおすすめする理由

僕はこれまでWordPressサイトを多数制作してきました。

有料テーマも利用してきましたが、初心者にはCocoonをおすすめしています。

理由は、「無料だから」ではありません。

無料にもかかわらず、SEO・表示速度・カスタマイズ性・情報量、この4つのバランスが非常に優れているからです。

さらに利用者が多いため、困ったことがあっても検索すれば解決策を見つけやすいというメリットもあります。

初心者が最初から有料テーマを購入しなくても、Cocoonだけで十分に本格的なサイトを作ることができます。

---

Cocoonヘッダーカスタマイズを成功させるチェックリスト

最後に、ヘッダーカスタマイズが完成したら、次の項目を確認してみましょう。

チェック項目	確認
ロゴ画像を設定した	□
サイトタイトルを見直した	□
キャッチフレーズを設定した	□
グローバルメニューを整理した	□
スマホ表示を確認した	□
ヘッダー画像を最適化した	□
CSSを整理した	□
キャッシュを削除して確認した	□
表示速度を確認した	□
内部リンクを確認した	□

このチェックリストを一つずつ確認するだけでも、完成度の高いヘッダーに仕上げることができます。

---

よくある質問（FAQ）

---

まとめ｜Cocoonヘッダーカスタマイズは読者目線で考えることが成功への近道

今回は、Cocoonヘッダーカスタマイズについて詳しく解説しました。

ロゴ画像やヘッダー画像、グローバルメニュー、スマホ表示、CSSなど、カスタマイズできる項目は数多くあります。

しかし、一番大切なのは「おしゃれにすること」ではありません。

読者が迷わず目的の記事へ進めること、スマホでも使いやすいこと、サイト全体の内容が一瞬で伝わることです。

僕自身もサイト制作では、この考え方を最優先にしています。

ヘッダーを整えるだけで、サイト全体の印象は大きく変わります。

まずはロゴ・メニュー・スマホ表示の3つから見直し、必要に応じてCSSを追加していくと失敗しにくくなります。