【コードなし】CocoonのトップページをGutenbergで作る方法｜実際にトップページ作る時に踏んだ手順を例に解説

ブログ運営

【コードなし】CocoonのトップページをGutenbergで作る方法｜実際の手順を画像つきで解説

導入

「Cocoonのトップページをおしゃれにしたいけど、HTMLやCSSはよくわからない…」

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

結論から言うと、コードを一行も書かずにトップページをカスタマイズできます。 使うのは「Cocoon設定」と「Gutenbergブロックエディタ」の2つだけです。

この記事では、当ブログ「Puglightyear」のトップページを作るときに実際に踏んだ手順を、スクショつきで順番に説明していきます。

HTMLやCSSで自由度高くカスタマイズしたい方はこちら→ 【Cocoon】トップページをHTML/CSSでカスタマイズする方法【コード編】

この記事でできること

  • Cocoon設定でサイト全体のデザインを整える
  • Gutenbergブロックでトップページのレイアウトを組む
  • Puglightyearと同じような構成のトップページを作る

所要時間の目安：30〜60分（初回）

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

まず完成形を確認しておきましょう。当ブログPuglightyearのトップページは、上から順に以下の構成になっています。

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

この4つのセクションをGutenbergブロックで作っていきます。

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

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

Step1｜Cocoon設定でサイト全体のデザインを整える

まずトップページを作る前に、サイト全体のデザインの土台を整えます。

ここで設定した色やフォントはサイト全体に反映されるので、最初にやっておくのがおすすめです。

1-1 スキンを選ぶ

Cocoonには「スキン」という見た目のテンプレートが用意されています。まずはスキンを選んで、デザインのベースを決めましょう。

手順：

  1. WordPress管理画面 →「Cocoon設定」をクリック

  2. 「スキン」タブを選択

  3. 一覧からイメージに合うスキンを選んでクリック

  4. 「変更をまとめて保存」をクリック

Cocoon設定のスキンタブ画面。スキン設定の説明と変更をまとめて保存ボタンが見える

スキン一覧。モノクロが青いラジオボタンで選択されている

スキンはあとから変更できるので、まずは「これかな」と思うものを選んでOKです。

Puglightyearでは「モノクロ」スキンをベースに使っています。

1-2 サイトのカラーを設定する

スキンを選んだあと、メインカラーを調整します。

手順：

1.「Cocoon設定」→「全体」タブをクリック

  1. 「サイトキーカラー」の「色を選択」ボタンをクリック

  2. カラーピッカーからブログのイメージカラーを選択

  3. 「変更をまとめて保存」をクリック

サイトキーカラーのカラーピッカーが開いた状態。色を選択ボタンとカラーパレットが表示されている

最初はあまり奇抜な色より、白・グレー・ネイビーなど落ち着いた配色がおすすめです。

1-3 フォントを設定する

読みやすいフォントを選ぶだけで、ブログの印象がかなり変わります。

手順：

1.「Cocoon設定」→「全体」タブをクリック

  1. 「ベースフォント」から好みのフォントを選択

  2. 「変更をまとめて保存」をクリック

日本語ブログには「Noto Sans JP」が読みやすくておすすめです。

1-4 ヘッダー画像を設定する（任意）

ヘッダーにロゴやタイトル画像を入れる場合はここで設定します。

手順：

1.「Cocoon設定」→「ヘッダー」タブをクリック

  1. ヘッダー背景画像をアップロード、またはヘッダーロゴを設定

  2. 「変更をまとめて保存」をクリック

画像なしでテキストだけのシンプルなヘッダーでも十分です。

Step2｜固定ページをトップページに設定する

Cocoonのトップページをカスタマイズするには、専用の「固定ページ」を作る必要があります。

① 固定ページを新規作成する

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

  2. タイトル欄に「TOP」と入力（この名前はサイト上には表示されません。管理用の名前です）

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

Gutenbergエディタで固定ページ「TOP」を作成した画面。タイトルにTOPと入力され右上に公開ボタンが見える

② 作った固定ページをトップページに設定する

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

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

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

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

表示設定画面。固定ページのラジオボタンが選択され、ホームページのドロップダウンにTOPが設定されている

これでトップページの「器」ができました。次からこの固定ページにコンテンツを追加していきます。

Step3｜Gutenbergブロックでトップページを組む

先ほど作った固定ページをGutenbergエディタで開き、上から順番にセクションを作っていきましょう。

GutenbergでTOP固定ページを開いた直後の画面。「ブロックを選択するには/を入力」というプレースホルダーと右端の＋ボタンが見える

この空白のページに、4つのセクションを積み上げていきます。

3-1 ヒーローセクションを作る（カバーブロック）

ページの一番上に表示される「顔」部分です。キャッチコピーとブログ紹介文を入れます。

手順：

  1. 左上の青い「＋」ボタンをクリック

  2. 検索欄に「カバー」と入力して選択

  3. 背景に使いたい画像または色をクリックして選択

  4. 「タイトルを入力…」の部分にキャッチコピーを入力

  5. ブロック内に「段落」ブロックを追加して紹介文を入力

左パネルでカバーブロックが選択されており、中央にカバーブロックの初期画面（アップロード・色選択）が表示されている

画像を設定すると右パネルに「オーバーレイ」と「不透明度」が表示されます。文字が背景に溶け込んで見えにくい場合は不透明度を上げると改善されます。

カバーブロックに画像が設定された状態。右パネルにオーバーレイと不透明度50のスライダーが表示されている

補足：ボタンも追加できます

カバーブロック内に「ボタン」ブロックを追加すると、プロフィールページや人気記事へのリンクを設置できます。

【ボタン設定例】テキスト：「Puglightyearについて」リンク先：https://af8-puglightyear.blog/329-2/

3-2 カテゴリーナビを作る（カラムブロック）

訪問者がどのカテゴリの記事を読みたいかすぐ選べるよう、カテゴリー一覧を並べます。

Puglightyearには以下の5カテゴリがあります。

  • 副業の始め方
  • ブログ運営
  • 副業収益化
  • お金・税金
  • 体験談

手順：

  1. 「＋」ボタン →「カラム」と検索して選択

  2. カラム数を選択（Puglightyearでは3カラム「33/33/33」を使用）

カラムブロックのレイアウト選択画面。100・50/50・33/66・66/33・33/33/33・25/50/25の選択肢が並んでいる

  1. 各カラムに「ボタン」ブロックを追加してカテゴリー名を入力

  2. リンク先に各カテゴリーのアーカイブページURLを設定

カテゴリーURLの確認方法：

管理画面 →「投稿」→「カテゴリー」→ 各カテゴリーの「表示」をクリックするとURLが確認できます。

3-3 最新記事一覧を表示する（最新の投稿ブロック）

記事を増やすたびに自動更新されるので、一度設定したら放置でOKの便利なブロックです。

手順：

  1. 「＋」ボタン →「最新の投稿」と検索して選択

  2. 右側の設定パネルで「項目数」を調整（おすすめは6件）

  3. 上部ツールバーのアイコンでグリッド表示に切り替え

  4. 「アイキャッチ画像を表示」をオンにする

最新の投稿ブロックが3カラムグリッドで記事を表示している。右パネルに項目数5・カラム3・並び順などの設定が見える

3-4 プロフィールセクションを作る（メディアとテキストブロック）

ページの最後に運営者の自己紹介を入れます。読者との信頼関係を築く大切なセクションです。

手順：

  1. 「＋」ボタン →「メディアとテキスト」と検索して選択

  2. 左側の画像エリアに顔写真やアイコン画像をアップロード

  3. 右側のテキストエリアにプロフィール文を入力

  4. 「ボタン」ブロックを追加してSNSリンクを設置

メディアとテキストブロックの初期状態。左に画像アップロードエリア、右にコンテンツ入力エリアが横並びになっている。右パネルにモバイルでは縦に並べる設定がオンになっている

右パネルの「モバイルでは縦に並べる」は必ずオンにしておきましょう。

Puglightyearのプロフィール設定例：

【テキスト】りょうた｜副業ブロガー会社員をしながら副業収入を目指してブログを運営中。実体験をもとに情報を発信しています。【ボタン】「詳しいプロフィールはこちら」→ https://af8-puglightyear.blog/329-2/「X（旧Twitter）」→ https://x.com/Puglightyear「Threads」→ https://threads.net/@Puglightyear

よくある失敗と解決策

❌ ブロックを追加したのにトップページに反映されない

「更新」ボタンを押したあと、ブラウザのキャッシュをクリアしてみてください。

  • Mac：Command＋Shift＋R
  • Windows：Ctrl＋Shift＋R

❌ カバーブロックの文字が背景に溶け込んで見えない

右パネル「オーバーレイ」の不透明度を上げると文字が見やすくなります。

❌ スマホで見るとレイアウトが崩れる

エディタ右上のプレビューボタンから「モバイル」を選択して確認しましょう。カラムブロックはカラム数を増やしすぎないことがポイントです。

Gutenbergのプレビューメニュー。モバイルにチェックが入っており、記事が縦1列に並んだモバイル表示が見える

❌ カテゴリーボタンを押してもページが見つからない

管理画面 →「投稿」→「カテゴリー」から実際のURLをコピーして貼り付けるのが確実です。

コードで自由にカスタマイズしたい方へ

Gutenbergブロックでは対応できない細かいデザインにこだわりたい場合は、HTML/CSSで直接書く方法があります。難易度は上がりますが、自由度は格段に高くなります。

→ 【Cocoon】トップページをHTML/CSSでカスタマイズする方法【コード編】

まとめ

Cocoonのトップページをコードなしでカスタマイズする手順をまとめます。

  1. Cocoon設定でスキン・カラー・フォントを整える

  2. 固定ページを作ってトップページに設定する

  3. Gutenbergブロックで4つのセクションを作る

  4. ヒーローセクション（カバーブロック）
  5. カテゴリーナビ（カラムブロック）
  6. 最新記事一覧（最新の投稿ブロック）
  7. プロフィールセクション（メディアとテキストブロック）

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

@Puglightyear（X）@Puglightyear（Threads）

関連記事

最終更新：2026年5月

コメント