Cocoonのデザインをカスタマイズする前に、初期のレイアウト構造と基本設定 をしっかり把握しておくことが大切です。どの部分がどのような役割を持っているのかを理解しておけば、デザインやレイアウトの変更がスムーズに行えます。
この記事では、Cocoonの header から footer までの基本的な構造を解説しながら、見た目を調整するための Cocoon設定のポイント も紹介していきます。初期状態のレイアウトを確認しつつ、自分のサイトに合ったカスタマイズをしていきましょう！
スキン、構造
Cocoonでは、スキンを変更することで サイトのデザインを手軽にカスタマイズ できます。スキンを適用するだけで、色やフォント、レイアウトが変わるため、CSSの知識がなくても 簡単にサイトの見た目を変更 できます。
Cocoonのデフォルト状態では、スキンが 「なし」 になっています。これにより、Cocoonの標準デザインが適用されています。もしカスタマイズしたい場合は、スキンを設定することで 見た目を簡単に変えることが可能 です。
スキン
スキンの設定手順
スキンの適用は、WordPressの管理画面から簡単に行えます。
Cocoon設定画面を開く
- WordPressのダッシュボードで 「Cocoon設定」 をクリック
- 「スキン」 タブを選択
スキンを選択する
- 好きなスキンを選択
- 「変更をまとめて保存」 をクリック
- サイトを確認してデザインが変わったかチェック
スキンを適用しても、独自のCSSを追加してカスタマイズ可能！
構造
下記のコードは、Cocoonの 初期レイアウトの基本的な構造 を示しています。各部分の役割を簡単に説明すると。
<!-- ページ全体を囲むコンテナ -->
<div id="container" class="container cf">
<!-- ヘッダー部分を囲むコンテナ -->
<div id="header-container" class="header-container">
<div id="header-container-in" class="header-container-in hlt-center-logo">
<!-- ヘッダー -->
<header id="header" class="header cf">
<div id="header-in" class="header-in wrap cf">
</div>
</header>
<!-- ナビゲーション -->
<nav id="navi" class="navi cf">
<div id="navi-in" class="navi-in wrap cf">
<!-- ナビゲーションメニュー -->
</div>
</nav>
</div>
</div>
<!-- メインコンテンツを囲むコンテナ -->
<div id="content" class="content cf">
<div id="content-in" class="content-in wrap">
<!-- メインコンテンツ -->
<main id="main" class="main">
</main>
<!-- サイドバー -->
<div id="sidebar" class="sidebar nwa cf" role="complementary">
</div>
</div>
</div>
<!-- フッター -->
<footer id="footer" class="footer footer-container nwa">
</footer>
</div>- container（全体を囲むコンテナ）
- ページ全体を包む大枠。
- header-container（ヘッダーを囲む）
- ロゴ・ナビゲーションメニュー などが含まれるヘッダー部分。
- content（メインコンテンツエリア）
- 記事や投稿の内容を表示する部分（main）。
- サイドバー（ウィジェットなど） も含まれる。
- footer（フッター）
- コピーライトやサイト情報が入るページの一番下の部分。
この画像を見ると、Cocoonの各コンテナがどの部分を担当しているのかが分かります。ヘッダー・メインコンテンツ・サイドバー・フッターといった基本的な構造を理解しておくと、サイトのデザインやレイアウトを調整する際に役立ちます。
Cocoon設定では、スキンやフォント、色の変更などでデザインを手軽にカスタマイズできますが、より細かいカスタマイズ（レイアウトの変更やCSSの調整など）を行う場合 は、このような基本構造を把握しておくとスムーズに作業が進められます。
まずは、Cocoonのレイアウト構造を確認しながら、それぞれの役割を見ていきましょう。
子テーマ
Cocoonをカスタマイズする際、子テーマを使うことが重要 です。基本的には、Cocoon設定でデザインや機能を変更できるため、直接ファイルを編集する必要はほとんどありません。しかし、どうしてもスタイル（CSS）やテンプレートファイルを編集したい場合、親テーマを直接編集すると アップデート時に上書きされてしまう ため、子テーマを利用するのが一般的です。
※Cocoon設定だけでカスタマイズする場合は、この部分はスキップしても問題ありません！
子テーマのダウンロードとインストール
ダウンロード
Cocoonの公式サイトから子テーマをダウンロードします。
➡ Cocoon公式ダウンロードページ へアクセス。
「Cocoon子テーマ」をダウンロードするボタン をクリックし、ZIPファイルを保存します。
WordPressにインストール
- WordPress管理画面へログイン
- 「外観」→「テーマ」 を開く
- 「新規追加」→「テーマのアップロード」
- ダウンロードした ZIPファイル（cocoon-child.zip） をアップロード
- テーマページへ移動
- 「有効化」を選択。
💡 子テーマは「有効化」するだけでOK！ 親テーマ（Cocoon本体）もインストールされている必要がありますが、親テーマは有効化せずに残しておけば大丈夫 です。
まとめ
✅ 親テーマを直接編集すると、アップデートで変更が消えるリスクあり！
✅ 子テーマを使えば、カスタマイズ部分を保持しつつ、親テーマを更新できる
✅ ダウンロード後、WordPressにインストールし、有効化するだけで使える
Cocoonを自分好みにカスタマイズするなら、必ず子テーマを導入しておくのがおすすめ！
ヘッダー部分
Cocoonのヘッダー部分は、サイトの第一印象を決定づける重要な要素です。多くのユーザーがヘッダーのカスタマイズを行っており、主な変更箇所やカスタマイズ方法を以下にまとめました。
ヘッダーレイアウトの変更
Cocoonでは、ヘッダーのレイアウトを複数のパターンから選択できます。サイトのデザインや目的に合わせて、以下のようなレイアウトを設定できます。
- センターロゴ：ロゴが中央に配置され、メニューが上下に表示されるレイアウト。
- トップメニュー：ロゴが左に配置され、メニューが右に表示されるレイアウト。
これらの設定は、WordPressの管理画面から「Cocoon設定」→「ヘッダー」タブ内の「ヘッダーレイアウト」から選択できます。
センターロゴタイプ
ロゴがメニューの下に配置される、センターロゴ（トップメニュー）の場合は、headerの親要素に下記のスタイルがつきます。flex-direction: column-reverse;。CSSを編集する必要はないのですがご参考に。cocoon設定から適用できます。
.header-container-in.hlt-center-logo-top-menu {
display: flex;
flex-direction: column-reverse;
}
トップメニュータイプ
メニューの調整は、スタイルで見ると下記のコードが当てはまるかと思います。ヘッダーレイアウトを変更すると多少下記のコードと変わりますが、justify-content: center;のcenterをrightやstart、space-betweenに変えてみるとメニューの位置が調整できます。ロゴの位置は変わりません。
.navi-in > ul {
padding: 0;
margin: 0;
list-style: none;
display: flex;
flex-wrap: wrap;
justify-content: center;
text-align: center;
}これらのカスタマイズを活用して、Cocoonのヘッダー部分を自分好みにアレンジしてみてください。
ヘッダーロゴのカスタマイズ
サイトのロゴはブランドイメージを伝える重要な要素です。Cocoonでは、ロゴの設定やカスタマイズが簡単に行えます。
- ロゴ画像の設定：「Cocoon設定」→「ヘッダー」タブ内の「ヘッダーロゴ」↠「選択」から、任意の画像をアップロードしてロゴとして設定できます。
「タイトル」と「キャッチフレーズ」を消す
WordPressのデフォルトでは「サイトタイトル」と「キャッチフレーズ」がヘッダーに表示されますが、以下の理由で非表示にしたい方も多いのではないでしょうか？
✔ ヘッダー画像を際立たせたい
✔ デザインをスッキリさせたい
✔ ロゴ画像やヘッダー背景画像を使用しているのでテキストは不要
Cocoonなら、設定で簡単に非表示にできるほか、CSSでのカスタマイズも可能です。この記事では、目的に応じた非表示方法を解説します。
例えば、以下のように背景画像と重なって見づらい場合、適切な設定で改善できます。
Cocoonの設定で、キャッチフレーズを非表示にできます。
- WordPress管理画面 →「Cocoon設定」
- 「ヘッダー」タブを開く
- 「キャッチフレーズの配置」→ 表示しない↠チェック
- 「変更をまとめて保存」 をクリック
これで、キャッチフレーズが非表示になります。
サイトタイトルはCSSで非表示にします。
.site-name-text {
display: none;
}これで、デザインがスッキリしました。念のため記載致しますが、サイトタイトルをヘッダーロゴとして表示している場合にも、この設定を適用するとロゴも非表示になります。
ヘッダー背景画像
ヘッダーの背景に画像を設定することで、サイトの雰囲気を大きく変えることができます。
- 背景画像の設定：「Cocoon設定」→「ヘッダー」タブ内の「ヘッダー背景画像」から、任意の画像をアップロードして背景として設定できます。
しかし、良く分からないヘッダー画像になりました。改善していきます。
ヘッダーの高さを調整
原因
- Cocoonのデフォルトでは、ヘッダーの高さが固定されている可能性があります。
- 画像の縦のサイズが足りないと、自動的にトリミングされることがあります。
解決策
- Cocoon設定でヘッダーの高さを調整する
- 「Cocoon設定」→「ヘッダー」タブ に移動
- 「高さ」 を適切な値に設定（例：250pxや300pxなど）
- CSSで手動調整する
- style.css に以下を追加
.header .header-in {
min-height: 300px;
}サイトタイトルも非表示にし、ヘッダーの高さを 300px に調整しました。余白が少なくなり、デザインがスッキリとまとまりました。
適用後のヘッダー画像も バランスよく表示 され、より洗練された印象になりました。
これらの設定を活用することで、ヘッダー部分のデザインを自由にカスタマイズ できます。
ヘッダー背景画像の大きさ
画像の横幅はサイトの幅に合わせる
- サイトの横幅（一般的に 1200px〜1920px 程度）に合わせると、余白や縮小によるぼやけを防げる。
- フルスクリーンで表示する場合は 1920px 以上が理想的。
縦幅はデザインに応じて適切に
- 低すぎると画像が圧縮され、内容が見えづらくなる。
- 高すぎるとスクロール時に邪魔になる可能性がある。
- 一般的には 300px〜600px 程度がバランスが良い
例：1920×600サイズの背景画像
サイトのヘッダー画像と、元画像はほぼ同じ大きさで表示されている。
元画像の幅とディスプレイの幅、元画像の高さとヘッダーの高さが一緒だと同じ感じになります。
モバイルヘッダー背景画像のサイズ
先程の大きさで見た場合、モバイル表示だと少しずれた表示になります。
下記のコードを子テーマの、style.cssに記載してあげると、いい具合に表示されます。
/*480px以下*/
@media screen and (max-width: 480px){
/*必要ならばここにコードを書く*/
.header {
background-size: contain; /* 画像全体が表示されるようにする */
background-position: center top; /* 中央寄せ */
height: auto; /* 高さを自動調整 */
}
}
モバイル専用の背景画像を用意する
比率のズレや要素の外側の余白（マージン）が気になる場合 は、（例：900×1200px の縦長画像）を別途用意する方法もあります。
横長の画像でも対応できますが、モバイルは機種ごとに画面サイズが異なるため、480px以下の幅で用意するのが理想的 です。タブレットの場合は 1024px以下 を基準にすると良いでしょう。
3種類（PC・タブレット・モバイル）を用意するのも一つの方法 です。画像作成時には「この部分が切れてほしくない」など、個別のデザイン要件があるため、厳密なルールはありません。結果を表示テストで確認し、見た目や比率が適切であれば問題ありません。
スマホ用画像 (900×1600) の高さを比率で指定する方法
スマホで 高さを vh（ビューポートの高さ）で指定 し、比率を維持したまま画像を表示する方法 を解説します。
💡 height: 50vh; を設定すると、高さが画面の50%になる
@media (max-width: 768px) {
.header-container {
background-image: url("header-mobile.jpg");
background-size: cover;
background-position: center;
height: 50vh; /* 画面の50%の高さ */
width: 100%; /* 横幅いっぱい */
}
}📌 計算例（スマホの一般的な解像度 1080×1920px の場合）
- height: 50vh; → 1920px × 50% = 960px
- 画像の比率は 900×1600 → 幅を 450px で計算
- 実際のデバイス幅に応じて background-size でカバーする
完璧に比率を維持して調整する
padding-top を使って高さを比率で決める。
💡 900×1600 の比率（9:16）を維持するには padding-top: 177.78% を使う
@media (max-width: 768px) {
.header-container {
background-image: url("header-mobile.jpg");
background-size: cover;
background-position: center;
width: 100%; /* 横幅いっぱい */
position: relative; /* 相対位置 */
}
.header-container::before {
content: "";
display: block;
padding-top: 177.78%; /* (1600 ÷ 900) × 100% = 177.78% */
}
}真四角
/* PCでは通常のサイズ*/
.square-container {
width: 100%;
max-width: 500px; /* 必要なら最大幅を制限 */
height: auto;
}
/* スマホ（768px以下）で真四角にする */
@media (max-width: 768px) {
.square-container {
width: 100vw; /* ビューポート幅いっぱい */
height: 100vw; /* 幅と同じ高さ（真四角） */
}
}フルスクリーンデザインの場合
- ヘッダーを画面全体に広げる（フルスクリーン表示） する場合、画像の高さを固定するのではなく、ビューポート（画面サイズ）に合わせる方が適切。
- 例えば、以下のCSSで ヘッダー全体を画面いっぱいに表示 できる。
.header-container {
height: 100vh; /* 画面の高さいっぱいにする */
background-size: cover;
}ヘッダー背景を装飾として使う場合
- ヘッダー画像が メインビジュアルではなく、デザインのアクセントとして使われる場合、高さを厳密に合わせる必要はない。
- 例えば、背景の一部にグラデーションをかけたり、ロゴの周りに装飾として配置する場合は、多少のズレがあっても問題なし。
コンテナやコンテンツの幅
1カラムで表示
Cocoonでは、Cocoon設定から簡単に1カラムに変更 することができます。
以下の手順で、サイドバーを非表示にして1カラムのレイアウトに変更しましょう。
- ［Cocoon設定］ をクリック
- 「全体」タブを選択
- 「全てのページで非表示」に変更
- 画面の一番下にある ［変更をまとめて保存］ をクリック
- サイトを開いて、1カラムになっているか確認
用途（どんな時に使うのか？）
- ランディングページ（LP）
→ 商品やサービスの申し込みページでは、余計なナビゲーションをなくして訪問者の集中を促す。 - シングルページサイト（1ページ完結のサイト）
→ 企業や個人のポートフォリオ、自己紹介ページなど、1ページで完結するサイトでは、サイドバーやフッターが不要な場合が多い。 - 問い合わせフォーム・予約サイト
→ ユーザーが迷わず入力できるように、余計なメニューやリンクを削除することで、離脱を防ぐ。
2カラムで表示（デフォルト）
「デフォルト（default）」設定は、Cocoonが標準で用意しているレイアウトやサイト幅をそのまま使う設定 です。
特にカスタマイズせず、Cocoonの設計に沿ったデザインで運用する形になります。スキンや他の設定の兼ね合いもあり、1カラムになっている可能性もあるので、調整しながら変更して見てください。
- ［Cocoon設定］ をクリック
- 「全体」タブを選択
- 「全てのページで表示」に変更
用途（どんな時に使うのか？）
- 個人ブログ（初心者向け）
→ 初めてWordPressを使う人や、特にデザインを調整しなくても問題ない人向け。 - シンプルなアフィリエイトサイト
→ 特別なレイアウト変更をせず、Cocoonの標準機能だけで運営したいときに使う。 - 情報サイト・FAQサイト
→ 標準のレイアウトで十分見やすいため、特にカスタマイズが不要な場合に適している。
サイト幅をそろえる
「サイト幅をそろえる」設定は、トップページ、記事ページ、固定ページなど、サイト全体のコンテンツエリアの幅を統一するものです。
Cocoonでは、ページごとに異なるレイアウトが適用されることがあるため、見た目の統一感を出したいときに使用します。
- ［Cocoon設定］ をクリック
- 「全体」タブを選択
- 「サイト幅の均一化」で 「サイト幅を揃える」 にチェックを入れる
親要素の、ページ全体を囲むコンテナに、デフォルトで wrap クラス（幅 1256px）が適用されます。そのため、直下の子要素（ヘッダー部分を囲むコンテナ、メインコンテンツを囲むコンテナ、フッター）は、親要素の幅に合わせて調整されます。
ただし、ヘッダーとフッターのコンテナは、ブロック要素なので横幅は自動で100%、また、背景色が設定されているため、ページ全体に広がって見えます。一方、メインコンテンツを囲むコンテナは背景が透明で、子要素のmain要素に背景色が設定されているため、一見すると幅が狭くなっているように見えますが、実際には他の要素と同じ 1256px に制限されています。
用途（どんな時に使うのか？）
- 企業サイトやコーポレートサイト
→ 企業の公式サイトでは、どのページを開いても統一感がある方が信頼性が高まる。 - ニュース・オウンドメディアサイト
→ 記事ページとトップページのレイアウトが異なると、読者が混乱するので統一する。 - 個人ブログ・情報サイト
→ どのページでも読みやすいデザインにするため、統一したサイト幅を設定するのが良い。
「サイト幅を全体にする（フルワイド表示）」
サイトの幅をブラウザの横幅いっぱいに広げる設定（フルワイド表示）です。通常の中央寄せレイアウトではなく、画面いっぱいにコンテンツを表示する 形になります。
.wrap {
width: 100%;
}サイドバーの表示状態→表示
サイドバーの表示状態→非表示
マージン（margin）とパディング（padding）を調整して、デザインのバランスを整えつつ、より自然にフルワイドのレイアウトが活きるよう最適化することもお勧めします。ちなみに灰色の部分は、body要素です。
用途（どんな時に使うのか？）
- 写真・ビジュアル重視のサイト
→ カメラマン・デザイナー・イラストレーターのポートフォリオサイトでは、写真を大きく見せるためにフルワイドが適している。 - 飲食店・ホテル・観光系サイト
→ 店舗やホテルの魅力を大きな画像で伝えたい場合に有効。 - スタートアップやクリエイティブ企業のサイト
→ ダイナミックなデザインで、最新のウェブデザインを採用したい場合に適している。
フルワイドhttps://narazu.net/cocoon-full-width/フルワイド
本文
投稿日、更新日、投稿者名、非表示
非表示にするケースとしては、デザインをスッキリさせるため、情報の鮮度を気にせず長く読まれる記事にしたり、企業サイトや公式ページなどで運営者情報を目立たせたくない場合などが考えられます。
手順
- WordPressの管理画面にログイン
- 「Cocoon 設定」 を開く
- 「本文」タブ をクリック
- 「投稿関連情報」の項目で、以下のチェックを外す
- 投稿日の表示
- 更新日の表示
- 投稿者名の表示
- 画面下部の「変更を保存」ボタンをクリック
これで投稿・固定ページの「投稿日・更新日・投稿者名」が非表示になります。
シェアボタン非表示、フォローボタン非表示
シェア・フォローボタンを非表示にする理由は、デザインをスッキリさせるため、SNS拡散を目的としないサイト運営のため、読者の集中力を削がないため、不要なクリックを防ぐため、ページ速度を向上させるためなどが考えられます。こちらも非表示にしたい方は最初に非表示にすることをお勧めします。
トップ、ボトムシェアボタンの非表示
- 「Cocoon 設定」 → 「SNSシェア」タブ を開く
- 「トップシェアボタンの表示」 のチェックを外す
- 「ボトムシェアボタンの表示」 のチェックを外す
- 「変更を保存」 をクリック
フォローボタンの非表示
- 「Cocoon 設定」 → 「SNSフォロー」タブ を開く
- 「フォローボタンの表示」 のチェックを外す
- 「変更を保存」 をクリック
固定ページのカスタマイズ
WordPress では、特定の固定ページに対して独自のテンプレートファイル（page-xxxx.php）を作成すると、そのテンプレートが適用されます。ここでは、その手順を解説します。
固定ページを作成する
- WordPress 管理画面にログインします。
- 「固定ページ」 → 「新規追加」 をクリックします。
- 任意のタイトルを入力し、スラッグ（URLの最後の部分）を設定します。
- 例：「お問い合わせ」というページを作成し、スラッグを contact に設定する。
- 「公開」ボタンを押してページを公開します。
テーマフォルダにテンプレートファイルを作成する
- page-スラッグ名.php のファイルを作成する
- wp-content/themes/使用中のテーマ フォルダ内に移動します。
- page-contact.php というファイルを作成します。
この方法を使えば、特定の固定ページに独自のデザインやレイアウトを適用できるため、より自由に HTML のコードを編集しやすくなります。ファイルから直接編集できるため、柔軟にカスタマイズしたい方には特におすすめです。LP（ランディングページ）やカスタムページの作成にも適しており、今すぐ使用しない場合でも、構造を理解しておくことで将来的に役立つでしょう。
まとめ
WordPress の初期設定をしっかりしておけば、Cocoon を使って見た目を簡単にカスタマイズできる。デザインやレイアウトは、サイトの印象を大きく左右するから、少し手を加えるだけでもグッと良くなると思います。
今回紹介した設定を活用すれば、初心者でもスムーズにサイトを整えられるはずです。Cocoon のカスタマイズ機能を試しながら、自分のサイトに合ったデザインを見つけてみてください。コンテンツを増やしていけば、もっと魅力的なサイトになっていくので、楽しみながら作っていきましょう！
コメント