【Cocoon】トップページをHTML/CSSでカスタマイズする方法｜初心者がハマった失敗談も紹介

「Cocoonのトップページ、もっと自由にデザインしたい。でもどこにコードを書けばいいかわからない…」

そう感じている方に向けた記事です。

この記事では、クラシックエディタの「コード」タブを使ってトップページをHTML/CSSでカスタマイズする方法を、実際の手順と失敗談を交えて解説します。

当ブログPuglightyearのトップページも、この方法で作っています。コードを自分で書くぶん自由度が高く、思い通りのデザインに仕上げられるのが最大のメリットです。

ビジュアル編との違い

	コード編（この記事）	ビジュアル編
難易度	★★★ 中級者向け	★☆☆ 初心者向け
自由度	高（何でも作れる）	中（Gutenbergの範囲内）
所要時間	2時間〜	30〜60分
必要な知識	HTML・CSSの基礎	不要
おすすめの人	デザインにこだわりたい人	まず動かしたい人

完成イメージ：Puglightyearのトップページ構成

当ブログPuglightyearのトップページは、上から順に以下の構成になっています。

1. ヒーローセクション：キャッチコピー＋ブログの紹介文
2. カテゴリーナビ：副業の始め方・ブログ運営・副業収益化・お金・税金・体験談
3. 最新記事一覧：直近の投稿を自動表示
4. プロフィールセクション：運営者の自己紹介とSNSリンク

この構成をHTML/CSSで作っていきます。

Step1｜Cocoon設定の下準備

コードでカスタマイズする前に、最低限の設定を整えておきます。

1-1 子テーマを有効にする（必須）

子テーマを使わずに直接Cocoonを編集すると、テーマ更新のたびにカスタマイズが消えます。必ず子テーマを有効にしてから作業してください。

確認方法：

1. 管理画面 →「外観」→「テーマ」をクリック
2. 「Cocoon Child」が有効になっているか確認
3. 有効になっていない場合は「Cocoon Child」をクリックして「有効化」

1-2 固定ページをトップページに設定する

1. 管理画面 →「固定ページ」→「新規追加」をクリック
2. タイトル欄に「TOP」と入力
3. 右上の「公開」をクリック
4. 管理画面 →「設定」→「表示設定」をクリック
5. 「ホームページの表示」で「固定ページ」を選択
6. 「ホームページ」のドロップダウンで「TOP」を選択
7. 「変更を保存」をクリック

Step2｜クラシックエディタのコードタブを使う

ここがこの記事で最も重要なポイントです。

コードタブとビジュアルタブの違い

固定ページの編集画面を開くと、右上に「ビジュアル」と「コード」という2つのタブがあります。

必ず「コード」タブを使ってください。

ビジュアルタブでHTMLを書くと、WordPressが勝手にタグを変換・削除してしまいます。たとえば：

• <div>タグが<span>に変換されることがある
• 改行が<br>タグに変換される
• 意図しない<p>タグが自動挿入される

コードタブはHTMLをそのままの状態で保存してくれるので、レイアウトが崩れません。

コードタブの開き方

1. 管理画面 →「固定ページ」→「TOP」の「編集」をクリック
2. エディタ右上の「コード」タブをクリック
3. テキストエリアにHTMLを入力できる状態になる
4. 入力後は「更新」をクリックして保存

Step3｜HTMLでトップページの構造を作る

コードタブを開いたら、HTMLを書いていきます。

基本構造

まず全体の骨格となるHTMLを書きます。

<!-- ヒーローセクション -->
<div class="top-hero">
  <p class="top-catch">副業・ブログ運営の「リアル」を発信するメディア</p>
  <a class="top-btn" href="https://af8-puglightyear.blog/329-2/">Puglightyearについて</a>
</div>

<!-- カテゴリーナビ -->
<div class="top-category">
  <a class="top-cat-btn" href="/category/how-to-start">副業の始め方</a>
  <a class="top-cat-btn" href="/category/blog">ブログ運営</a>
  <a class="top-cat-btn" href="/category/monetize">副業収益化</a>
  <a class="top-cat-btn" href="/category/money">お金・税金</a>
  <a class="top-cat-btn" href="/category/experience">体験談</a>
</div>

<!-- プロフィールセクション -->
<div class="top-profile">
  <img src="アイコン画像のURL" alt="りょうた">
  <div class="top-profile-text">
    <p><strong>りょうた｜副業ブロガー</strong></p>
    <p>会社員をしながら副業収入を目指してブログを運営中。</p>
    <a href="https://x.com/Puglightyear">X（旧Twitter）</a>
    <a href="https://threads.net/@Puglightyear">Threads</a>
  </div>
</div>

HTMLを一行にミニファイしてから貼る

HTMLを書いたら、改行をすべて取り除いた「一行の状態」にしてから貼り付けます。

クラシックエディタのコードタブで保存すると、改行が<br>タグなどに変換されてしまうことがあるためです。

ミニファイの手順：

1. HTML Minifier にアクセス
2. 書いたHTMLを左のボックスに貼り付ける
3. 右側に一行化されたHTMLが出力される
4. それをコピーしてコードタブに貼り付ける

Step4｜CSSでデザインを整える

HTMLの構造ができたら、CSSでデザインを整えます。CSSはコードタブに書くのではなく、WordPressのカスタマイザー「追加CSS」に書きます。

カスタムCSSの開き方

1. 管理画面 →「外観」→「カスタマイズ」をクリック
2. 左メニューの「追加CSS」をクリック
3. テキストエリアにCSSを入力（右側にリアルタイムでプレビューが反映される）
4. 「公開済み」をクリックして保存

CSSの例

/* ヒーローセクション */
.top-hero {
  text-align: center;
  padding: 60px 20px;
  background-color: #1a2a4a;
  color: #fff;
}
.top-catch {
  font-size: 1.4em;
  font-weight: bold;
  margin-bottom: 20px;
}
.top-btn {
  display: inline-block;
  padding: 12px 30px;
  background-color: #fff;
  color: #1a2a4a;
  border-radius: 4px;
  text-decoration: none;
  font-weight: bold;
}

/* カテゴリーナビ */
.top-category {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
  padding: 40px 20px;
}
.top-cat-btn {
  display: inline-block;
  padding: 10px 20px;
  background-color: #f0f0f0;
  color: #333;
  border-radius: 4px;
  text-decoration: none;
  font-weight: bold;
}

/* プロフィールセクション */
.top-profile {
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 40px 20px;
  max-width: 800px;
  margin: 0 auto;
}
.top-profile img {
  width: 100px;
  height: 100px;
  border-radius: 50%;
}

私がハマった失敗談3つ

① <div>が<span>に変わってレイアウトが崩れた

原因：<span>はインライン要素なので、ブロックレベルのスタイルが正しく効かないことがあります。

解決策：display: inline-block;を明示することで対処できます。

② !importantを使わないとCSSが反映されなかった

原因：Cocoon本体のスタイルが強く当たっていて、自分で書いたCSSが上書きできていなかったためです。

解決策：どうしても効かないときだけ!importantを使いましょう。乱用するとあとで管理が大変になります。

③ 100vwで横スクロールが出た → marginマイナス値で解決

原因：100vwはスクロールバーの幅も含んだ画面幅です。コンテンツ幅を超えてはみ出すため横スクロールが発生します。

解決策：margin: 0 -20px;のようにマイナス値を使うと解決できます。

よくある質問

Q. HTMLの知識がまったくなくても大丈夫？

完全な初心者の方はまずビジュアル編でトップページを公開してから、少しずつコードに挑戦するのがおすすめです。

まとめ

CocoonのトップページをHTML/CSSでカスタマイズする手順をまとめます。

1. 子テーマを有効化して作業環境を整える
2. 固定ページ「TOP」を作ってフロントページに設定する
3. クラシックエディタのコードタブにHTMLをミニファイして貼り付ける
4. カスタマイザーの追加CSSにスタイルを書く
5. ハマったら!important・inline-block・marginマイナス値を試す

この記事の内容で詰まった部分があれば、XまたはThreadsで気軽に声をかけてください。

@Puglightyear（X）　@Puglightyear（Threads）