ワードプレスのテーマ「Cocoon」では、記事数がある程度たまってくると、いつの間にか立派なトップページ（←固定ページ）が自動で出来上がります。
さらにヘッダーメニューにカテゴリーを表示できるので、サイト全体の使い勝手もぐっと向上。ところが、メインエリアに並ぶ新着記事を見てみると、記事のカテゴリーが入り混じって表示されてしまうんです。
そこで、以前から気になっていた「トップページの自作」に本格的に挑戦することにしました。流れとしてはシンプルで、まずは１）固定ページ（←自作トップページ）を作成し、２）その固定ページをサイトのトップページとして設定するだけ。
「どうせなら基本スタイルシートをいじらずに、おしゃれな雰囲気に仕上げたい」と考えていたとき、ちょうど目にとまったのが、かめコンパスさんのブログ記事「【Cocoon】カスタマイズ方法｜おしゃれなブログに様変わり【CSS不要】」でした。
サイト型トップページとは、目的や好みに合わせて記事やコンテンツを配置したり、おしゃれにデザインしたトップページのことです。
Cocoonでは、ブログ型トップページがデフォルトですが、サイト型トップページへかんたんにカスタマイズできます。
かめコンパスさんのブログ 【Cocoon】カスタマイズ方法｜おしゃれなブログに様変わり【CSS不要】 より
そこで今回参考にしたのが、かめコンパスさんのブログ「Cocoonサイト型トップページの作り方｜おしゃれなデザイン設計でモチベUP！」です。記事の流れに沿って作業を進めると、トップページがぐっと見やすく、そして「サイト型」らしい雰囲気に仕上がりました。
具体的には――
- H2見出しブロックを挿入：「カテゴリー」と記入（H2：Headerの大きさ）
- 3カラムブロックを挿入：「新着記事」「人気記事」「新着記事（→更新日順に変更）」のブロックを設置
- ボタンブロックを導入：カテゴリー「作り方」ページへリンクを設置
- ピックアップ記事（おすすめカード）を設定
「おすすめカード」については、かめコンパスさんの解説（「Cocoonサイト型トップページの作り方｜おしゃれなデザイン設計でモチベUP！」）に従って設定しました。結果として、シンプルながらもおしゃれで整理されたトップページが完成し、ブログ更新のモチベーションも高まります。
トップページは 上から順に「おすすめカード → カルーセル（人気記事） → 見出し → ３カラム → ボタン」 という流れで表示されるようになりました。シンプルながらも視線を誘導しやすく、訪問者にとっても分かりやすい構成になったと思います。
これで「８月のウェブサイトを作るシリーズ」はひと区切りです。まだまだ暑さが続く2025年の夏ですが、すがすがしい９月を気持ちよく迎えられますように！
