WordPressの人気無料テーマ「Cocoon」。かゆいところに手が届く素晴らしいテーマですが、ヘッダーのカスタマイズ中に「設定を変えたのに、なぜかサイズが全く変わらない…」という壁にぶつかったことはありませんか？
さらに、無理やり高さを変えようとCSSをいじったら、「スクロールした瞬間にヘッダーが画面全体に広がって崩れてしまった！」という二次災害が起きることも……。
今回は、Cocoonのヘッダーレイアウトを「トップメニュー（右寄せ）」にしている時に発生するこの問題の原因と、スクロール追従（固定）にも完璧に対応できる解決CSSを詳しく解説します！
1. Cocoon設定の数値が反映されない原因
まずは原因から見ていきましょう。Cocoon設定の「ヘッダー」タブには、高さを変更する項目や、ロゴサイズを指定する項目がちゃんと用意されています。
しかし、それぞれの項目の下にある注意書きをよく見ると、実はこう書かれています。
- 高さの注記：
※「ヘッダーレイアウト」が「センターロゴ」の時のみに適用されます。 - ロゴサイズの注記：
「ヘッダーレイアウト」が「センターロゴ」でないと、ロゴサイズの変更までは行われません。
そうなんです。ヘッダーのレイアウトで「トップメニュー（右寄せ）」などを選択している場合、設定画面の数値はシステム的に完全に無視される仕様になっています。これが、いくら数値をいじっても見た目が変わらなかった原因です。
2. スクロール時にヘッダーが画面を覆い尽くしてしまう理由
「設定画面がダメならCSSで！」と、単純に .header の高さだけを上書きすると、今度はスクロールした時に大崩れを起こします。
Cocoonは、画面をスクロールしてヘッダーが上にピタッと張り付く（追従する）瞬間に、裏側で fixed-header という別のクラス（目印）を自動的に付与する仕組みになっています。
通常時の高さだけをCSSで固定してしまうと、スクロールして fixed-header に切り替わった時に内部の高さ計算のバグが起き、画面全体がヘッダーの色で埋め尽くされるような表示崩れが起きてしまうのです。
3. 【コピペOK】スクロール追従にも対応した完全版解決CSS
この「Cocoonの仕様」と「スクロール時のクラス切り替え」の２つをクリアし、通常時もスクロール時もスマートな高さをキープするためのCSSコードがこちらです。
子テーマの style.css や、WPCodeなどのコードスニペットツールに以下のコードを貼り付けてください。
CSS
/* ==========================================
* ヘッダー：高さとロゴサイズの強制調整CSS（スクロール追従対応版）
* ========================================== */
/* 1. 通常時とスクロール時（fixed-header）の両方の高さを100pxにロック */
.header,
#header-container.fixed-header {
height: 100px !important;
min-height: 100px !important;
}
/* 2. ロゴ画像自体のサイズを調整 */
.header-container .logo-header img,
#header-container.fixed-header .logo-header img {
width: 180px !important; /* ロゴの横幅（お好みで調整） */
height: auto !important; /* 縦横比を綺麗にキープ */
max-height: 80px !important; /* ヘッダー(100px)より少し小さくして上下に余白を作る */
}
/* 3. 通常時とスクロール時、両方のロゴとメニューの上下中央配置を整える */
.header-container,
#header-container.fixed-header .header-container-in {
display: flex !important;
align-items: center !important;
height: 100% !important;
}
💡 自分好みに微調整するポイント
コードを貼り付けたあと、以下の数値を書き換えるだけで自由自在にサイズをコントロールできます。
- ヘッダー全体の高さを変えたい：
.header部分の100pxを120pxや80pxに変更します。 - ロゴの大きさを変えたい：
width: 180pxの部分をお好みのサイズ（200pxなど）に変更します。 - ロゴの上下のゆとりを変えたい：
max-height: 80pxの数値を小さくすると、ロゴが少し小さくなり、上下の余白（隙間）が広がってより洗練された印象になります。
4. まとめ：CSSの優先順位（カスケード）を意識しよう
Cocoonの設定画面で制御できないデザインも、適切なクラスに対して !important を使ってCSSを書けば、綺麗に上書きカスタマイズが可能です。
また、WordPressのテーマは「スクロール時」「スマホ表示時」などで裏側のHTMLクラスが切り替わることが多いため、デザインが崩れたときはブラウザの「デベロッパーツール（検証画面）」を開いて、今どんなクラスが当たっているのかを確認する癖をつけると、一気に原因究飾が楽になりますよ！
ヘッダーのサイズでお悩みの方は、ぜひ試してみてください。
