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

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

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

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

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

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

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

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

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

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

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

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

1-1 スキンを選ぶ

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

手順：

1. WordPress管理画面 →「Cocoon設定」をクリック
2. 「スキン」タブを選択
3. 一覧からイメージに合うスキンを選んでクリック
4. 「変更をまとめて保存」をクリック

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

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

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

手順：

1. 「Cocoon設定」→「全体」タブをクリック
2. 「サイトキーカラー」の「色を選択」ボタンをクリック
3. カラーピッカーからブログのイメージカラーを選択
4. 「変更をまとめて保存」をクリック

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

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

手順：

1. 「Cocoon設定」→「全体」タブをクリック
2. 「ベースフォント」から好みのフォントを選択
3. 「変更をまとめて保存」をクリック

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

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

手順：

1. 「Cocoon設定」→「ヘッダー」タブをクリック
2. ヘッダー背景画像をアップロード、またはヘッダーロゴを設定
3. 「変更をまとめて保存」をクリック

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

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

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

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

1. 管理画面 →「固定ページ」→「新規追加」をクリック
2. タイトル欄に「TOP」と入力（この名前はサイト上には表示されません。管理用の名前です）
3. 右上の「公開」をクリック

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

1. 管理画面 →「設定」→「表示設定」をクリック
2. 「ホームページの表示」で「固定ページ」を選択
3. 「ホームページ」のドロップダウンで「TOP」を選択
4. 「変更を保存」をクリック

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

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

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

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

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

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

手順：

1. 左上の青い「＋」ボタンをクリック
2. 検索欄に「カバー」と入力して選択
3. 背景に使いたい画像または色をクリックして選択
4. 「タイトルを入力…」の部分にキャッチコピーを入力
5. ブロック内に「段落」ブロックを追加して紹介文を入力

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

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

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

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

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

手順：

1. 「＋」ボタン →「カラム」と検索して選択
2. カラム数を選択（Puglightyearでは3カラム「33/33/33」を使用）

3. 各カラムに「ボタン」ブロックを追加してカテゴリー名を入力
4. リンク先に各カテゴリーのアーカイブページURLを設定

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

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

手順：

1. 「＋」ボタン →「最新の投稿」と検索して選択
2. 右側の設定パネルで「項目数」を調整（おすすめは6件）
3. 上部ツールバーのアイコンでグリッド表示に切り替え
4. 「アイキャッチ画像を表示」をオンにする

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

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

手順：

1. 「＋」ボタン →「メディアとテキスト」と検索して選択
2. 左側の画像エリアに顔写真やアイコン画像をアップロード
3. 右側のテキストエリアにプロフィール文を入力
4. 「ボタン」ブロックを追加してSNSリンクを設置

よくある失敗と解決策

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

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

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

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

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

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

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

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

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

まとめ

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

1. Cocoon設定でスキン・カラー・フォントを整える
2. 固定ページを作ってトップページに設定する
3. Gutenbergブロックで4つのセクションを作る
   • ヒーローセクション（カバーブロック）
   • カテゴリーナビ（カラムブロック）
   • 最新記事一覧（最新の投稿ブロック）
   • プロフィールセクション（メディアとテキストブロック）

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

@Puglightyear（X）　@Puglightyear（Threads）