Cocoonでトップページを「自作」してみた話
ワードプレスの人気テーマ「Cocoon」は、記事が増えてくると自動的に“それらしいトップページ”が出来上がっていきます。
さらに、ヘッダーメニューにカテゴリーを表示できるので、サイト全体の回遊性も自然と上がっていきます。
…ところが。
メインエリアの新着記事を見てみると、カテゴリーが混在して並んでしまい、情報が散らかって見えるんですよね💦
「ここ、ずっと気になってた…」
ということで、今回は思い切って トップページを自作 することにしました！
トップページ自作の流れ
流れはとてもシンプル。
1）固定ページを作る（＝自作のトップページ）
2）その固定ページをサイトのホームとして設定する
「どうせなら基本スタイルシートをいじらずに、おしゃれな雰囲気に仕上げたい」と考えていたとき、ちょうど目にとまったのが、かめコンパスさんのブログ記事「【Cocoon】カスタマイズ方法｜おしゃれなブログに様変わり【CSS不要】」でした。
サイト型トップページとは、目的や好みに合わせて記事やコンテンツを配置したり、おしゃれにデザインしたトップページのことです。
Cocoonでは、ブログ型トップページがデフォルトですが、サイト型トップページへかんたんにカスタマイズできます。
かめコンパスさんのブログ 【Cocoon】カスタマイズ方法｜おしゃれなブログに様変わり【CSS不要】 より
CSSをガッツリ触るほどではなく、できれば“おしゃれ見え”する構造だけ作りたかったので、今回参考にしたのがこちら：
かめコンパスさん
「Cocoonサイト型トップページの作り方｜おしゃれなデザイン設計でモチベUP！」
この記事が本当にわかりやすかった。
これに沿って進めたら、驚くほど“サイト型”のトップページに変わりました。
実際に行った設定のポイント
- 「カテゴリー」というH2見出しを追加
- 3カラムブロックで
「新着記事」「人気記事」「新着（更新日順）」を設置 - ボタンブロックを設置（カテゴリー「作り方」へ遷移）
- ピックアップ記事（おすすめカード）を設定
これだけでも、トップページ全体に整理された動線が生まれます。
最終的なトップページの構成はこんな感じ：
おすすめカード → カルーセル（人気記事） → 見出し → ３カラム → ボタン
視線の流れが自然で、訪問者にもわかりやすい構成になりました。
「おすすめカード」については、かめコンパスさんの解説（「Cocoonサイト型トップページの作り方｜おしゃれなデザイン設計でモチベUP！」）に従って設定しました。
８月のまとめ
これで「８月のウェブサイトを作るシリーズ」はひと区切り。
まだまだ暑い2025年の夏ですが、９月はもっとスッキリした気持ちで迎えられそうです☀️
次は、どの部分を改善しようかな…？
