Cocoonサイト型トップページの作り方ガイド｜ブロック版とHTMLカスタマイズを解説【初心者向け】

Cocoonのトップページは、ブログ型だけでなくWebサイトのような 「サイト型トップページ」 にカスタマイズできます。

サイト型トップページにすると、人気記事やカテゴリー記事を整理して表示できるためブログを見やすく分かりやすい構成になります。

この記事では、Cocoonでサイト型トップページを作る方法をまとめて解説します。

初心者向けのブロック機能の方法と、自由にデザインできる HTML＋CSSカスタマイズの方法の両方を紹介します。

Cocoonで作るサイト型トップページとは

通常のブログ型トップページは、新着記事が時系列で並ぶシンプルな構成が基本です。記事中心の構造で、読者は最新記事から順に閲覧することになります。

一方、サイト型トップページでは、固定ページを使ってコンテンツを配置し、デザインされたセクションを組み合わせて表示できます。

例えば、次のような構成が可能です。

このように、サイト全体を整理して見せるトップページを作ることができます。

サイト型とブログ型の違い

項目	ブログ型トップページ	サイト型トップページ
表示内容	新着記事が中心	固定ページ＋記事セクション
デザイン自由度	限定的	高い
読者導線	記事中心	記事＋サービス・情報誘導
利用シーン	ブログ・日記	情報サイト・ポートフォリオ

サイト型トップページのメリット

サイト型トップページには次のようなメリットがあります。

• 見た目が整ってプロっぽく見える
• 読者の行動を誘導しやすい
• 自由なデザインで差別化できる
• 複数のコンテンツを整理して表示できる
  

ブログの記事数が増えてくると、トップページを整理することで読者が目的の記事を見つけやすくなります。

サイト型トップページにするタイミング

ブログを始めたばかりの段階では無理に作る必要はありません。

記事数が少ないうちは、トップページをカスタマイズするよりもまずはコンテンツ（記事）を増やすことの方が重要です。

記事が増えてくると

• 人気記事
• カテゴリー記事
• 特集記事

など、トップページに配置できるコンテンツが増えてきます。

そのタイミングでサイト型トップページを作ると、サイト全体を整理して見せやすくなります。

30記事にほど増えてきた頃が目安です。

Cocoonトップページの作り方は2種類

Cocoonでサイト型トップページを作る方法は、大きく分けて次の2つです。

• ブロック機能を使って作る方法
• HTML＋CSSでカスタマイズして作る方法

初心者でも簡単に作れる方法から、自由度の高いカスタマイズ方法まで用意されているのがCocoonの特徴です。

それぞれの方法の特徴とおすすめの人を解説します。

① ブロック機能で作る方法（初心者向け）

WordPressのブロックエディターを使ってトップページを作る方法です。コードを書く必要がほとんどないため、初心者でも比較的簡単にサイト型トップページを作れます。

特徴

• コード入力がほとんど不要
• ブロック操作だけでレイアウトを作れる
• WordPress初心者でも作りやすい

ブロック機能を使った具体的な手順は、次の記事で詳しく解説しています。

→ Cocoonブロック機能でサイト型トップページを作る方法

② HTML＋CSSで作る方法（カスタマイズ向け）

HTMLとCSSを使ってトップページを自由にデザインする方法です。
レイアウトやデザインの自由度が高く、より本格的なサイト型トップページを作れます。

特徴

• デザインの自由度が高い
• タブ切替などの高度なカスタマイズが可能
• CSSでデザインを自由に調整できる

HTML＋CSSで作る具体的な手順は、次の記事で解説しています。

→ Cocoonサイト型トップページの作り方

どちらがおすすめ？（比較）

ブロック機能とHTMLカスタマイズには、それぞれ特徴があります。

方法	難易度	自由度	おすすめ
ブロック	★	★★	初心者
HTML＋CSS	★★	★★★★	カスタマイズ重視

初心者の場合は「ブロック機能」で作る方法がおすすめです。

ブロックエディターの操作だけでトップページを作れるため、コードの知識がなくてもサイト型トップページを作れます。

デザインの自由度を重視したい場合は HTML＋CSSでカスタマイズする方法 が向いています。

また、WordPressの操作に慣れてきたら ブロックとHTMLカスタマイズを組み合わせてトップページを作れます。

このように、サイトの成長やスキルに合わせてカスタマイズ方法を広げていけます。

サイト型トップページの基本構成

サイト型トップページは、いくつかのコンテンツを組み合わせて構成するのが一般的です。

ブログや情報サイトでは、次のようなセクションを組み合わせてトップページを作ることが多くなっています。

メインビジュアル

トップページの最上部に配置するエリアです。

サイトのコンセプトや特徴を伝えるキャッチコピーや画像を配置することで、訪問したユーザーにサイトの内容を分かりやすく伝えることができます。

Cocoonではアピールエリアを使うと簡単に、またカスタムHTMLを使うと柔軟に実装できます。

ピックアップ記事（おすすめ記事）

サイトの中でも特に読んでほしい記事をまとめて表示するエリアです。

初心者向けの解説記事や、サイトの代表的なコンテンツを配置することで、初めて訪れた読者でも重要な記事を見つけやすくなります。

Cocoonでは new_listショートコードの ordered_postsやナビカード 機能を使うことで、特定の記事だけをピックアップ表示できます。

記事一覧（新着・カテゴリー・人気記事）

サイト型トップページでは、記事一覧を表示することで、読者が興味のある記事を見つけやすくなります。

記事一覧の表示方法には、次のようなパターンがあります。

人気記事

アクセス数の多い記事や、よく読まれている記事を表示する方法です。人気記事をトップページに配置すると、初めて訪れた読者でもおすすめの記事を見つけやすくなります。

Cocoonでは 人気記事ランキング機能 を使うことで、ランキング形式で記事を表示できます。

→ Cocoon人気記事ランキングの設置方法

プロフィール

サイト運営者のプロフィールを掲載するセクションです。

どんな人が運営しているサイトなのかを伝えることで、サイトの信頼性を高めることができます。

プロフィールページへのリンクやSNSリンクを設置することも多い部分です。

トップページのレイアウトを広げるカスタマイズ

トップページのデザインは、レイアウトを調整することでさらに見やすくできます。

フルワイド（全幅）デザイン

トップページを画面いっぱいに広げて表示するデザインです。

→ Cocoonで全幅（フルワイド）デザインにする方法

カードデザイン

記事一覧をカード型にすると、視覚的に見やすいトップページを作れます。

→ Cocoonカードデザイン（列数調整）のカスタマイズ

投稿日・更新日の表示

投稿日や更新日を表示すると、記事の新しさを読者に伝えることができます。

→ Cocoon投稿日・更新日の表示方法

トップページのデザインを整えるCSS

CSSを使うと、トップページのデザインをさらに整えることができます。

例えば次のようなカスタマイズがあります。

これらを組み合わせることで、オリジナルデザインのトップページを作れます。

まとめ｜Cocoonサイト型トップページの作成手順

最後に、サイト型トップページを作る基本的な流れを紹介します。

1. トップページの構成を決める
2. 固定ページでトップページを作る
3. 記事を配置（新着・カテゴリー・人気・ピックアップ）
4. CSS等でデザインを整える

トップページのレイアウトを整えることで、ブログ全体の回遊率や読者の見やすさも大きく改善できます。

初心者は ブロック機能で作る方法、デザインを重視する場合は HTMLカスタマイズ が向いています。具体的な作り方は、次の記事で詳しく解説しています。