Cocoonでブログを始めたものの、
そんなふうに感じたことがあると思います。
そこで作ったのが、できるだけコードを使わず、ブロック操作中心で作るサイト型トップページの手順です。
実際にこの方法で、多くの読者さんがCocoonでサイト型トップページを完成させています。
この記事では、「まずはちゃんと形になるトップページを作りたい」という方向けに、完成までの流れをスクリーンショット付きでまとめました。
- コード最小限＆ブロック操作中心の作成手順
- 完成イメージ（デモ）と実例サイト
- フルワイドや背景色変更などのデザインの調整方法
HTML/CSSが苦手、短時間で作りたい方におすすめです。
完成イメージ｜Cocoonブロック機能で作るサイト型トップページ
サイト型トップページにすることで、
- 読んでほしい記事を目立たせやすくなる
- カテゴリーごとに整理しやすくなる
- サイト全体の世界観を伝えやすくなる
といったメリットがあります。
ブログの記事一覧だけでは伝わりにくい情報も、トップページを整えることで見てもらいやすくなります。
概要｜Cocoonブロックで作るサイト型トップページ
作業時間の目安は60〜90分ほどです。
ネットで情報を探しながら一から作ろうとすると、
- 固定ページ設定
- カラムレイアウト
- 記事一覧表示
- フルワイド化
- 余白調整
などを個別に調べる必要があります。
この記事では、それらを実際の作成順にまとめているため、迷いながら検索する時間を大幅に減らせます。
「何から始めればいいか分からない」
という状態からでも、そのまま順番に進めるだけで形になる構成です。
作業の流れはざっくり次の3ステップです。
- メインビジュアル作成
- 新着記事・カテゴリー記事作成
- フルワイド・デザイン調整
HTMLやCSSを一から書く必要はありません。Cocoonのブロック機能を中心に作成し、コードを使うのは最後の仕上げ部分だけです。
サイト型トップページの仕組みや、ブログ型との違いを先に知りたい方は、こちらのガイド記事をご覧ください。
この記事では「理解編」ではなく、実際に作るための実践手順に絞って解説しています。
実例｜読者が作ったCocoonトップページ
この記事を参考に作成された読者様の実例サイトを紹介します。（掲載許可をいただいた方のみ）
実は、この記事を購入された方の中には、「HTMLやCSSはほとんど触ったことがない」という方も少なくありません。
配色を変えたり、イラストを入れたり、カテゴリー構成を工夫したり、同じ手順でもサイトごとの個性がしっかり出ています。
読者さんの完成報告をいただくたびに思うのですが、同じ手順でも本当にそれぞれ違うトップページになります。私が作ったサンプルより素敵だなと思うことも多く、「こんな使い方もあるんだ」と逆に勉強させてもらっています。
- サイト名：MakalikaMalama
- 運営：みにりか さん
- 素敵な素材と優しい配色で「好き」を発信。
- サイト名：ちあログ
- 運営： ちあき さん
- ちょっと良い宿で癒しと潤いを…ご自身で撮影された素敵な画像も見どころのサイトです。
- サイト名：手帳とiPadで、好きを綴る。
- 運営： まにっき さん
- 優しい配色で工夫されたデザイン、可愛い自作イラストがトップページを彩ります。
- サイト名：Bibroom-ビブルーム
- 運営： びぶーん さん
- トップページだけなく、記事の隅々まで綺麗に整ったとても見やすいサイトです。
- サイト名：Chaleur
- 運営：maiさん
- 余白の使い方や配色バランスが絶妙。Cocoonでも洗練されたフルスクリーンデザインに。
作成前の準備｜スムーズに作成するためのチェックリスト
トップページ作成をスムーズに進めるために、事前に以下だけ確認しておきましょう。
準備ができたら、そのまま作成手順へ進めます。
素材サイトの活用
トップページで使用する画像がまだ決まっていない場合は、無料素材サイトを活用すると効率よく準備できます。
特にサイト型トップページでは、カテゴリー紹介やアイキャッチ画像など複数の素材を使用するため、事前にまとめて用意しておくと作業がスムーズです。
サイト幅（Cocoon設定）
トップページを横幅いっぱいに表示するため、設定を確認します。
Cocoon設定 → 全体 → サイト幅の均一化
→ 「サイト幅を揃える」のチェックを外す
固定ページ作成（必須）
トップページは固定ページで作成します。
- 管理画面 →「固定ページ」→「新規追加」
- タイトルを「トップページ」等に設定
- ページ設定 → ページタイプ：1カラム（広い）を選択
- 一旦「下書き保存」しておく
→ このページをこのあと編集していきます
作成手順｜ブロックで作るCocoonサイト型トップページ
実際には、トップページ作りでつまずく方の多くが、
- どのブロックを使えばいいかわからない
- ブロックを追加したらレイアウトが崩れた
- 記事一覧が思ったように表示されない
- フルワイド設定で余白が消えない
といった部分で手が止まってしまいます。
私自身も最初は何度も作り直しました。
この記事では、そうした試行錯誤を省けるように、実際に完成したトップページを作る順番で手順を整理しています。
スクリーンショット通りに進めれば、迷わず同じ形まで再現できる内容です。
この記事では30枚以上のスクリーンショットを使いながら、トップページ完成までの流れを順番に解説しています。
作業を進める上でもし疑問点がありましたら、お問い合わせページからお気軽にご連絡ください。（記事の範囲内で対応いたします）
販売者情報は 「特定商取引法に基づく表記」をご確認ください。
Comment 記事の感想を書き込んでいただけると幸いです
はじめまして、きみこと申します。教えていただきたいです。
見出しを例えば1段目に「Category」2段目に「カテゴリー」と作るとどうしても１段目と２段目に余白ができてしまします。Newsのように外枠となるカラムブロックの外に２段目のサブ見出しを入れると余白はないのですが、それは間違っていますよね？
外枠となるカラムブロックの中で余白がにように作るにはどうしたらいいのか教えてください。
> きみこさん
はじめまして。
見出しの１行目と２行目については、「行の高さ」で調整できます。
・１行目「Category」を選択
サイドバーの「タイポグラフィ」→「行の高さ」をクリック
→1.2くらいにするとバランスはどうでしょうか？
さっそくの回答ありがとうございました。調節してみようと思います。
昨日の問題は解決しました。
ありがとうございます。
もう一点ですが、佐々木様の問い合わせと同様です。
New Post(新着記事)の2カラムの余白が全くない状態です。
カスタムCSSを入力していますが、解決しません。
よろしくお願いいたします。
> 筋トレ太郎 さん
原因：
New Post(新着記事)を囲むカラムの余白調整
左右の内側余白（パディング）が0に設定されているため
修正：
サイドバーにて、New Post(新着記事)を囲むカラムを選択
パディングの右と左をリセットしてみてください（画像参照）
サイドバーで設定しているパディングをすべて削除して、再度上下のみ設定をおこなうとうまくいくかと思います。
左右の内側余白（パディング）はCSSで調整しているため、サイドバーで0と設定してしまうとHTMLが優先されてCSSが効かなくなってしまいます。
よろしくお願いします。
こんにちは、はじめまして！
こちらの記事でサイト型トップページを作りましたが、ヘッダー画像が残ってしまいます。
どのように対処したらよろしいでしょうか？
よろしくお願いいたします。
> 筋トレ太郎 さん
初めまして。
ヘッダー画像について。
Cocoon設定→ヘッダー→ヘッダーレイアウト
「トップメニュー」にするとどうでしょうか？（画像参照）
お忙しいところ、すみません。DEMOサイトのProfileのブロックにあります、記事に戻るボタンの背景を透明にされていますが、どのようにすればできますでしょうか？
> ガッキーさん
DEMOサイトの「記事に戻るボタン」は自分でカスタムして作っています。
作り方は「テキストリンクをおしゃれに装飾」の記事。矢印風の4に近い形です。
https://turicco.com/link-button/
カテゴリーごとの記事を表示するブロックを3カラム構成の左右の余白の入れ方についてどのようにされていますでしょうか。
1カラムの左側と3カラムの右側に余白を入れないと、カテゴリーのブロックが横幅いっぱいに表示されてしまいます。こちらを解消したいと思っています。
こちらは余白用に5カラムにして1カラムと5カラムを余白用のブロックとして10%づつ割り当て、2カラムから4カラムを26%づつにすることで、新着記事と同じ余白を割り当てることができますでしょうか。
> 佐々木 さん
こんにちは。
フルワイドブロック／セクションを画面幅いっぱいにする方法
https://turicco.com/block-toppage/#toc27
をご覧いただければと思います。
【具体的な手順】
①ひとつのセクションの外側のカラムを選択
②サイドバー：高度な設定→追加CSSクラスに「full-wide」と入力
③記載のCSSをコピペ（記事編集画面下方にある「カスタムCSS」）
marginで幅をいっぱいに、
paddingで左右の余白をあけるように調整しています。
paddingを入れているため、カテゴリーのセクションも横幅いっぱいに表示されることはありません。現在、HTMLに直接入力されているスタイル（padding:0)は影響が出るので削除お願いします。
お試しくださいね。
> 佐々木 さん
こんにちは。
サイトを拝見しましたところ、full-wideの設定はきちんとされております。
あとはHTMLのstyleに直接指定されている余白（padding:0）が優先度が高くCSSが効いていないため、HTMLで設定しているスタイルをすべて削除いただければと思います。
結果、削除しただけで画面左右にはCSSで設定した余白（padding）が反映され検証上は綺麗に表示されました^^
参考画像を添付いたします。