Cocoonでブログを作っていると、
- 「トップページがなんだか普通…」
- 「もっとサイトっぽくしたい」
- 「おしゃれなトップページに憧れる」
と感じることがあるかと思います。
実はCocoonでも、固定ページやブロック機能を使うことで、ブログ型ではなく「サイト型トップページ」を作れます。
しかも、思っているほど難しくありません。最初はブロック機能だけでも十分ですし、慣れてきたらHTML＋CSSを使って少しずつデザインを広げていくこともできます。
トップページを整えるだけでも、サイト全体の印象や「記事の見つけやすさ」は変わってきます。
この記事では、
- サイト型トップページの仕組み
- 2つの作成方法の違い
- 基本構成と導線設計
- おすすめの作成手順
まで、初心者の方にもわかりやすく解説していきます。
Cocoonトップページの作り方（サイト型・固定ページ対応）
トップページの作り方は目的によって変わります。
- とにかく簡単に作りたい → ブロックで作る
- デザインを自由に作りたい → HTML＋CSS
↓それぞれの具体的な作り方はこちら
① ブロック機能で作る方法（初心者向け）
WordPressのブロック機能（ブロックエディタ）を使ってトップページを作る方法です。
最初からHTML＋CSSで全部作ろうとするとちょっと大変。実際、最初は「どこを触ればいいの？」となりやすいので、まずはブロック機能で土台を作る方法がおすすめです。
- コード入力がほとんど不要
- ブロック操作でレイアウトを作れる
- WordPress初心者でも作りやすい
基本的なブロックが使えればとても簡単です。
ブロック機能を使った具体的な手順は、次の記事で詳しく解説しています。
→ Cocoonブロック機能でサイト型トップページを作る方法
② HTML＋CSSで作る方法（カスタマイズ向け）
HTMLとCSSを使ってトップページを自由にデザインする方法です。レイアウトやデザインの自由度が高く、より本格的なサイト型トップページを作れます。
- デザインの自由度が高い
- CSSでデザインを自由に調整できる
CSSを触ったことがあるとより理解しやすいですが、初めての方でもコピペで完成できるようにしています。
HTML＋CSSで作る具体的な手順は、次の記事で解説しています。
どちらがおすすめ？（比較）
ブロック機能とHTMLカスタマイズには、それぞれ特徴があります。
| 方法 | 難易度 | 自由度 | おすすめ |
|---|---|---|---|
| ブロック | ★ | ★★ | 初心者 |
| HTML＋CSS | ★★ | ★★★ | カスタマイズ重視 |
初心者の場合は「ブロック機能」で作る方法がおすすめです。
ブロックエディタの操作だけでトップページを作れるため、コードの知識がなくてもサイト型トップページを作れます。
デザインの自由度を重視したい場合はHTML＋CSSでカスタマイズする方法が向いています。
また、WordPressの操作に慣れてきたら ブロックと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 記事の感想を書き込んでいただけると幸いです