Cocoonでオリジナルのトップページを作りたいけど、どこから始めればいいの？
そんなふうに迷っている方も多いのではないでしょうか。
この記事では、WordPressテーマ「Cocoon」とブロックエディタを使って、初心者でも簡単に「サイト型トップページ」を作る方法を解説します。コードは最小限に抑えつつ、 ブロック操作で進められる内容になっています。
- コード最小限＆ブロック操作中心
HTMLやCSSが苦手でも安心 - 必要な要素を段階的に追加
新着記事・人気記事・プロフィールなどを順に配置 - 完成形をイメージできるデモページ付き
デモページを見る
読者が作成した実例サイトを見る - デザインの微調整方法も丁寧に解説
フルワイド・背景色変更にも対応 - 作成手順・解説は有料公開しています
「ブログ型」から「Webサイト型」へデザインをアップデートしたい方、オリジナルな見た目に仕上げたいけどコードは最小限にしたい方 にぴったりです。
一緒に、Cocoonで素敵なオリジナルトップページを作っていきましょう！
About meこの記事を書いた人
ブログ好きな40代主婦です。
2020年1月1日にWordPressを始め、
Cocoonをスキンなしでカスタマイズ。
- ドメインパワー : 40（2025年8月時点）
- 2023年より有料記事公開
累計460件（月間約20件）のご購入実績 - カスタマイズを丁寧にサポート
概要｜ブロックで作るCocoonサイト型トップページとは
「Cocoonってコードを書かないとデザイン調整が難しいのでは？」そう思っている方も多いかもしれません。しかし、Cocoon 2.6.8以降では、ブロックエディタと最小限のCSSで有料テーマ並みのデザインが可能です
- 新着記事・人気記事のブロック表示に対応
- ブロックごとの余白調整機能が追加
- カラムブロックやカバーブロックとの組み合わせで柔軟なレイアウトが可能
事前に使用する画像やカテゴリーを決めておけば、作業時間の目安は1時間ほど。Cocoonのカスタマイズが初めての方でも、ブロック操作の基本さえ分かれば十分対応できます。
完成イメージ
「本当にCocoon？」と思える仕上がりをご覧ください。
作業の流れ
- セクション構成を作る
WordPressの「カラム」や「カバー」ブロックでレイアウトの土台を作成。 - 背景色を追加する
各セクションに色をつけ、情報の区切りをわかりやすく。CSS不要。 - フルワイドで横幅を広げる
画面いっぱいに広がるスタイリッシュなデザインに。 - 不要な余白を調整
セクションごとの余白を調整し、バランスの良いレイアウトに。
コードを最小限に抑える工夫
| 要素 | 従来 | 今回の方法 |
|---|---|---|
| セクション構成 | HTML＋CSS | カラム＆カバーブロック |
| 背景色 | HTML＋CSS | エディタ設定 |
| 記事表示 | HTML＋CSS | Cocoon独自ブロック |
| ボタン装飾 | HTML＋CSS | ボタンブロック |
| 横幅フルワイド | CSS | ブロック設定＋補助CSS |
| 余白調整 | CSS | 一部のみCSS |
| 不要要素非表示 | CSS | 最小限CSS |
実例｜読者が作ったトップページ
この記事を参考に作成された読者の実例サイトを紹介します。
実例を見ることで完成後のイメージがより具体的になります。多様なデザインが実現できるCocoonの可能性をご覧ください。
- Bibroom-ビブルーム
- 運営： びぶーん さん
- トップページだけなく、記事の隅々まで綺麗に整ったとても見やすいサイトです。
- Chaleur
- 運営：maiさん
- 余白の使い方や配色バランスが絶妙。Cocoonでも洗練されたフルスクリーンデザインに。
「HTML／CSSを使ったサイト型トップページ」の事例集については、カスタマイズ記事内に掲載しております。
準備と計画｜スムーズに作成するためのチェックリスト
トップページ作成をスムーズにするための準備を以下にまとめました。
トップページの構成を考える
- 表示したいカテゴリー（例：新着記事、カテゴリー記事、人気記事）
- 見せたい順番（例：メインビジュアル→新着記事→プロフィール→フッター）
- セクション分け（カラム構成）を計画
素材準備
| 用途 | 推奨サイズ | 形式 |
|---|---|---|
| プロフィール背景画像 | 横長 1200px以上 | JPEG / PNG |
| 各カテゴリーのイメージ画像 | 正方形〜横長 | JPEG / PNG |
| メインビジュアル用画像 | 横長 1920px程度 | JPEG 推奨 |
- 画像は軽量化（TinyPNGなどを使用）で表示速度を改善。
プロフィール設定
- 表示名、説明文、プロフィール画像（300x300px推奨）を登録
- 管理画面 → ユーザー → プロフィール
トップページ用の固定ページ作成
サイト型トップページは、固定ページとして作成＆カスタマイズしていきます。
- 管理画面 →「固定ページ」→「新規追加」
- タイトルを「トップページ」等に設定
- ページ設定 → ページタイプ：1カラム（広い）を選択
- 一旦「下書き保存」しておく
便利機能紹介｜Cocoonブロックを活用した効率化
- 新着記事・人気記事・ナビカードを横並び表示
- PC/スマホのカラム数をワンクリックで調整。
豊富な無料素材サイト
作成手順｜ブロックで作るCocoonサイト型トップページ
ここまでで「全体像」と「準備の流れ」が分かったと思います。実際にブロックを組み立てていく具体的な手順（スクリーンショット付き）は、有料コンテンツで詳しく解説しています。
作業を進める上でもし疑問点がありましたら、お問い合わせページからお気軽にご連絡ください。（記事の範囲内で対応いたします）
■ サイト名
Turicco
■ サイトURL
https://turicco.com/
■ 運営者情報
運営責任者：はるみ
お問い合わせ先：https://turicco.com/contact/
■ 購入方法
コンテンツ販売サービス「codoc（コードク）」を利用しています。
詳しくは codoc購入者向けFAQ をご覧ください。
■ 納品方法
購入完了後、対象の記事が閲覧可能になります。
■ お支払い方法
・クレジットカード
・デビットカード
・プリペイド型クレジットカード
・Apple Pay
・Google Pay
・コンビニ決済
※クレジットカード情報はSSLで暗号化され、決済サービス「Stripe」に直接送信されます。管理人がカード情報を取得・保管することはありません。
■ 返金・キャンセルについて
codoc株式会社の利用規約第10条（返金）に基づき、原則としてご購入後のキャンセル・返金はできません。あらかじめご了承ください。
■ 販売価格
980円（税込）
Comment 記事の感想を書き込んでいただけると幸いです
はじめまして、きみこと申します。教えていただきたいです。
見出しを例えば1段目に「Category」2段目に「カテゴリー」と作るとどうしても１段目と２段目に余白ができてしまします。Newsのように外枠となるカラムブロックの外に２段目のサブ見出しを入れると余白はないのですが、それは間違っていますよね？
外枠となるカラムブロックの中で余白がにように作るにはどうしたらいいのか教えてください。
> きみこさん
はじめまして。
見出しの１行目と２行目については、「行の高さ」で調整できます。
・１行目「Category」を選択
サイドバーの「タイポグラフィ」→「行の高さ」をクリック
→1.2くらいにするとバランスはどうでしょうか？
さっそくの回答ありがとうございました。調節してみようと思います。
昨日の問題は解決しました。
ありがとうございます。
もう一点ですが、佐々木様の問い合わせと同様です。
New Post(新着記事)の2カラムの余白が全くない状態です。
カスタムCSSを入力していますが、解決しません。
よろしくお願いいたします。
> 筋トレ太郎 さん
原因：
New Post(新着記事)を囲むカラムの余白調整
左右の内側余白（パディング）が0に設定されているため
修正：
サイドバーにて、New Post(新着記事)を囲むカラムを選択
パディングの右と左をリセットしてみてください（画像参照）
サイドバーで設定しているパディングをすべて削除して、再度上下のみ設定をおこなうとうまくいくかと思います。
左右の内側余白（パディング）はCSSで調整しているため、サイドバーで0と設定してしまうとHTMLが優先されてCSSが効かなくなってしまいます。
よろしくお願いします。
こんにちは、はじめまして！
こちらの記事でサイト型トップページを作りましたが、ヘッダー画像が残ってしまいます。
どのように対処したらよろしいでしょうか？
よろしくお願いいたします。
> 筋トレ太郎 さん
初めまして。
ヘッダー画像について。
Cocoon設定→ヘッダー→ヘッダーレイアウト
「トップメニュー」にするとどうでしょうか？（画像参照）
お忙しいところ、すみません。DEMOサイトのProfileのブロックにあります、記事に戻るボタンの背景を透明にされていますが、どのようにすればできますでしょうか？
> ガッキーさん
DEMOサイトの「記事に戻るボタン」は自分でカスタムして作っています。
作り方は「テキストリンクをおしゃれに装飾」の記事。矢印風の4に近い形です。
カテゴリーごとの記事を表示するブロックを3カラム構成の左右の余白の入れ方についてどのようにされていますでしょうか。
1カラムの左側と3カラムの右側に余白を入れないと、カテゴリーのブロックが横幅いっぱいに表示されてしまいます。こちらを解消したいと思っています。
こちらは余白用に5カラムにして1カラムと5カラムを余白用のブロックとして10%づつ割り当て、2カラムから4カラムを26%づつにすることで、新着記事と同じ余白を割り当てることができますでしょうか。
> 佐々木 さん
こんにちは。
フルワイドブロック／セクションを画面幅いっぱいにする方法
をご覧いただければと思います。
【具体的な手順】
①ひとつのセクションの外側のカラムを選択
②サイドバー：高度な設定→追加CSSクラスに「full-wide」と入力
③記載のCSSをコピペ（記事編集画面下方にある「カスタムCSS」）
marginで幅をいっぱいに、
paddingで左右の余白をあけるように調整しています。
paddingを入れているため、カテゴリーのセクションも横幅いっぱいに表示されることはありません。現在、HTMLに直接入力されているスタイル（padding:0)は影響が出るので削除お願いします。
お試しくださいね。
> 佐々木 さん
こんにちは。
サイトを拝見しましたところ、full-wideの設定はきちんとされております。
あとはHTMLのstyleに直接指定されている余白（padding:0）が優先度が高くCSSが効いていないため、HTMLで設定しているスタイルをすべて削除いただければと思います。
結果、削除しただけで画面左右にはCSSで設定した余白（padding）が反映され検証上は綺麗に表示されました^^
参考画像を添付いたします。