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

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

導入

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

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

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

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

コードを書かずにまずトップページを作りたい方はこちら→ 【コードなし】CocoonのトップページをGutenbergで作る方法【ビジュアル編】

この記事でできること

  • クラシックエディタのコードタブの正しい使い方を理解する
  • HTML/CSSでトップページのレイアウトを作れるようになる
  • Cocoon特有のハマりポイントと解決策を知る

所要時間の目安：2〜3時間（初回）

ビジュアル編との違い

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

まずコードなしで始めたい方はこちら→ 【コードなし】CocoonのトップページをGutenbergで作る方法【ビジュアル編】

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

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

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

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

なお、WordPressブログの開設がまだの方はこちらから先に読んでください。

→ WordPressブログの始め方【2026年版】｜35歳会社員が費用・手順をスクショ付きで公開

Step1｜Cocoon設定の下準備

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

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

子テーマを使わずに直接Cocoonを編集すると、テーマ更新のたびにカスタマイズが消えます。

必ず子テーマを有効にしてから作業してください。

確認方法：

  1. 管理画面 →「外観」→「テーマ」をクリック

  2. 「Cocoon Child」が有効になっているか確認

  3. 有効になっていない場合は「Cocoon Child」をクリックして「有効化」

テーマ一覧画面。左にCocoon（有効）、中央にCocoon Childが並んでいる。子テーマが別に存在することが確認できる

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

  1. 管理画面 →「固定ページ」→「新規追加」をクリック

  2. タイトル欄に「TOP」と入力

  3. 右上の「公開」をクリック

  4. 管理画面 →「設定」→「表示設定」をクリック

  5. 「ホームページの表示」で「固定ページ」を選択

  6. 「ホームページ」のドロップダウンで「TOP」を選択

  7. 「変更を保存」をクリック

表示設定の画面はビジュアル編でスクショつきで詳しく解説しています→ 【コードなし】CocoonのトップページをGutenbergで作る方法【ビジュアル編】

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

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

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

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

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

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

たとえば：

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

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

コードタブの開き方

  1. 管理画面 →「固定ページ」→「TOP」の「編集」をクリック

  2. エディタ右上の「コード」タブをクリック

  3. テキストエリアにHTMLを入力できる状態になる

  4. 入力後は「更新」をクリックして保存

クラシックエディタで固定ページTOPを編集している画面。右上にビジュアルとコードの2つのタブが見える

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>

クラス名は自分でわかりやすいものを付けてOKです。

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. 「公開済み」をクリックして保存

WordPressカスタマイザーのメニュー。サイト基本情報・背景画像・メニュー・ウィジェット・ホームページ設定・追加CSSの項目が並んでいる

カスタマイザーの追加CSS画面。左にCSSコード、右にPuglightyearのトップページがリアルタイムでプレビューされている

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>はインライン要素なので、ブロックレベルのスタイルが正しく効かないことがあります。

解決策：

.top-btn { display: inline-block; /* これを明示する */ padding: 12px 30px;}

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

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

解決策：

.top-btn { background-color: #fff !important; color: #1a2a4a !important;}

乱用するとあとで管理が大変になるので、どうしても効かないときだけ使うのがおすすめです。

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

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

解決策：

.full-width-section { margin: 0 -20px; padding: 40px 20px; background-color: #f9f9f9;}

よくある質問

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

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

→ 【コードなし】CocoonのトップページをGutenbergで作る方法【ビジュアル編】

Q. ブログ収益化の次のステップは？

トップページが整ったら、次はアフィリエイトの仕組みを理解して収益化に動くのがおすすめです。

→ 副業ブログのアフィリエイトの始め方｜初心者向けに解説

まとめ

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

  1. 子テーマを有効化して作業環境を整える

  2. 固定ページ「TOP」を作ってフロントページに設定する

  3. クラシックエディタのコードタブにHTMLをミニファイして貼り付ける

  4. カスタマイザーの追加CSSにスタイルを書く

  5. ハマったら!important・inline-block・marginマイナス値を試す

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

@Puglightyear（X）@Puglightyear（Threads）

関連記事

最終更新：2026年5月

コメント