Cocoonでは、ブログ型だけでなくサイト型トップページを作ることができます。
しかし、
- トップページはどう作るの？
- 固定ページで作るの？
- ブロックとHTMLどっちがいい？
と迷う方も多いのではないでしょうか。
結論、Cocoonのサイト型トップページは「ブロック」または「HTML＋CSS」で作成できます。
この記事では、
- サイト型トップページの仕組み
- 2つの作成方法の違い
- 基本構成と導線設計
- おすすめの作成手順
まで、初心者でも理解できるようにわかりやすく解説します。
- Cocoonでトップページを自分で作りたい人
- HTML／CSSがまだ苦手だけど導入手順を知りたい人
- 「ブログ型」から「サイト型」にアップデートしたい人
Cocoonトップページの作り方は2種類
Cocoonでトップページを作る方法は主に2種類あります。
初心者でも簡単に作れる方法から、自由度の高いカスタマイズ方法まで選べるのがCocoonの特徴です。
それぞれの方法の特徴とおすすめの人を解説します。
① ブロック機能で作る方法（初心者向け）
WordPressのブロックエディターを使ってトップページを作る方法です。コードを書く必要がほとんどないため、初心者でも比較的簡単にサイト型トップページを作れます。
- コード入力がほとんど不要
- ブロック操作でレイアウトを作れる
- WordPress初心者でも作りやすい
ブロック機能を使った具体的な手順は、次の記事で詳しく解説しています。
→ Cocoonブロック機能でサイト型トップページを作る方法
② HTML＋CSSで作る方法（カスタマイズ向け）
HTMLとCSSを使ってトップページを自由にデザインする方法です。レイアウトやデザインの自由度が高く、より本格的なサイト型トップページを作れます。
- デザインの自由度が高い
- CSSでデザインを自由に調整できる
HTML＋CSSで作る具体的な手順は、次の記事で解説しています。
どちらがおすすめ？（比較）
ブロック機能とHTMLカスタマイズには、それぞれ特徴があります。
| 方法 | 難易度 | 自由度 | おすすめ |
|---|---|---|---|
| ブロック | ★ | ★★ | 初心者 |
| HTML＋CSS | ★★ | ★★★ | カスタマイズ重視 |
初心者の場合は「ブロック機能」で作る方法がおすすめです。
ブロックエディターの操作だけでトップページを作れるため、コードの知識がなくてもサイト型トップページを作れます。
デザインの自由度を重視したい場合は HTML＋CSSでカスタマイズする方法 が向いています。
また、WordPressの操作に慣れてきたら ブロックとHTMLカスタマイズを組み合わせてトップページを作れます。
例えば、基本のレイアウトはブロック機能で作り、細かいデザインや装飾をHTML＋CSSで調整するといった使い方も便利！
このように、サイトの成長やスキルに合わせてカスタマイズ方法を広げていけます。
Cocoonで作るサイト型トップページとは
通常のブログ型トップページは、新着記事が時系列で並ぶシンプルな構成が基本です。記事中心の構造で、読者は最新記事から順に閲覧することになります。
一方、サイト型トップページでは、固定ページを使ってコンテンツを配置し、デザインされたセクションを組み合わせて表示できます。
例えば、次のような構成が可能です。
- サイトのコンセプトや特徴を紹介
- カテゴリー別の最新記事をタブ切替で表示
- 人気記事やおすすめ記事を横並びで配置
- お問い合わせやサービス紹介への導線を設置
| 項目 | ブログ型トップページ | サイト型トップページ |
|---|---|---|
| 表示内容 | 新着記事が中心 | 固定ページ＋記事セクション |
| デザイン自由度 | 限定的 | 高い |
| 読者導線 | 記事中心 | 記事＋サービス・情報誘導 |
| 利用シーン | ブログ・日記 | 情報サイト・ポートフォリオ |
このように、サイト全体を整理して見せるトップページを作ることができます。
サイト型トップページのメリット・注意点
サイト型トップページには次のようなメリットと注意点があります。
メリット
注意点
ただし、一度作れば長期間使えるため、記事数が増えてきたサイトには非常に有効です。
ブログの記事数が増えてくると、トップページを整理することで読者が目的の記事を見つけやすくなります。
サイト型トップページにするタイミング
ブログを始めたばかりの段階では無理に作る必要はありません。
記事数が少ないうちは、トップページをカスタマイズするよりもまずはコンテンツ（記事）を増やすことの方が重要です。
記事が増えてくると
- 人気記事
- カテゴリー記事
- おすすめ・特集記事
など、トップページに配置できるコンテンツが増えてきます。
そのタイミングでサイト型トップページを作ると、サイト全体を整理して見せやすくなります。
30記事にほど増えてきた頃が目安です。
Cocoonサイト型トップページの作成手順
Cocoonでサイト型トップページを作る流れは、次の4ステップです。
- ラベルトップページの構成を考える
まずは、どのようなトップページにするのか構成を決めます。おすすめ記事、カテゴリー一覧、新着記事、プロフィール、CTAなどを事前に考えておくと後の作業がスムーズになります。
- ラベルトップページ用レイアウトを作る（固定ページ）
次に、メインビジュアルやおすすめ記事、カテゴリー記事などを配置してトップページの構成を作ります。ブロック機能またはHTML＋CSSを使ってレイアウトを作成します。
- ラベルデザインを整える
CSSやCocoonの設定を使って、レイアウトやデザインを整えます。フルワイドやカードデザインなどを調整すると見やすいトップページになります。
- ラベルトップページに設定する
作成した固定ページを表示設定でトップページに指定します。これでサイトを開いたときに作成したページがトップページとして表示されます。
この流れを理解しておけば、初心者でもスムーズにトップページを作れます。
サイト型トップページの基本構成
ここからは、実際にトップページを設計する際の具体的な構成を解説します。
ブログや情報サイトでは、次のようなセクションを組み合わせてトップページを作ることが多くなっています。
メインビジュアル
トップページの最上部に配置するエリアです。
サイトのコンセプトや特徴を伝えるキャッチコピーや画像を配置することで、訪問したユーザーにサイトの内容を分かりやすく伝えることができます。
Cocoonではアピールエリアを使うと簡単に、またカスタムHTMLを使うと柔軟に実装できます。
- 設定できる画像：１枚
- 画面いっぱいのフルスクリーン
- スクロール誘導（矢印）
- 拡大縮小アニメーション追加可能
- 設定できる画像：複数枚
- 自然なフェードで画像切り替え
（CSSアニメーション使用） - 別途CSS追加でフルスクリーンOK
ピックアップ記事（おすすめ記事）
サイトの中でも特に読んでほしい記事をまとめて表示するエリアです。
初心者向けの解説記事や、サイトの代表的なコンテンツを配置することで、初めて訪れた読者でも重要な記事を見つけやすくなります。
Cocoonでは new_listショートコードの ordered_postsやナビカード 機能を使うことで、特定の記事だけをピックアップ表示できます。
記事一覧（新着・カテゴリー・人気記事）
サイト型トップページでは、記事一覧を表示することで、読者が興味のある記事を見つけやすくなります。
記事一覧の表示方法には、次のようなパターンがあります。
新着記事
最新の記事を表示する方法です。
ブログ型サイトでは、新着記事の表示はトップページの基本コンテンツです。サイトが更新されていることを読者に伝えることができます。
カテゴリー記事
特定のカテゴリーの記事をまとめて表示する方法です。
ジャンルごとに記事を表示することで、読者が興味のあるテーマの記事を探しやすくなります。
人気記事
アクセス数の多い記事を表示する方法です。人気記事をトップページに配置すると、初めて訪れた読者でもおすすめの記事を見つけやすくなります。
Cocoonでは人気記事ランキング機能を使うことで、ランキング形式で記事を表示できます。
プロフィール
サイト運営者のプロフィールを掲載するセクションです。
どんな人が運営しているサイトなのかを伝えることで、サイトの信頼性を高めることができます。
プロフィールページへのリンクやSNSリンクを設置することも多い部分です。
トップページのレイアウトを広げるカスタマイズ
トップページのデザインは、レイアウトを調整することでさらに見やすくできます。
フルワイド（全幅）デザイン
トップページを画面いっぱいに広げて表示するデザインです。
カードデザイン
記事一覧をカード型にすると、視覚的に見やすいトップページを作れます。
投稿日・更新日の表示
投稿日や更新日を表示すると、記事の新しさを読者に伝えることができます。
トップページのデザインを整えるCSS
CSSを使うと、トップページのデザインをさらに整えることができます。
例えば次のようなカスタマイズがあります。
- ボックスデザイン
これらを組み合わせることで、オリジナルデザインのトップページを作れます。
まとめ
トップページのレイアウトを整えることで、ブログ全体の回遊率や読者の見やすさも大きく改善できます。
サイト型トップページが作れたら、次はデザインや機能を調整していきましょう。
ブロックを使ってレイアウトを整えたり、CSSでデザインを細かく調整したりすることで、より見やすく使いやすいサイトに仕上がります。
→ CSSでデザインを調整したい方
→ ブロックの種類・使い方・カスタマイズを詳しく知りたい方
また、WordPressの基本設定を整えておくと、表示や動作も安定します。
→ サイトの基本設定を見直したい方
Comment 記事の感想を書き込んでいただけると幸いです