これまで、Cocoonでのサイト型トップページの作り方を紹介してきました。
１回でコピペ、ポン！を最優先してあえてコード記述にしているのですが、今回はコードの記述をできる限り減らし、ブロックエディタ機能をメインに使って再現したトップページの作り方をご紹介します。
- ワードプレスのテーマ「Cocoon」と「ブロックエディタ」を使っている
- サイト型トップページにしたい
- HTML、CSSはよくわからない
- コードは少なく、視覚的に分かりやすいブロックで操作したい
- 完成イメージ／ブロックで作るCocoonサイト型トップページ
- ブロックを使いコードを減らす工夫／Cocoonサイト型トップページ
- カスタマイズ事例／ブロックで作るCocoonサイト型トップページ
- 構成／ブロックで作るCocoonサイト型トップページ
- 事前準備／ブロックで作るCocoonサイト型トップページ
- ここから先は有料公開です／Cocoonサイト型トップページ作成手順
- 新着記事／ブロックで作るCocoonサイト型トップページ
- 次のブロックへ移動する方法（親ブロックの選択）
- カテゴリー記事／ブロックで作るCocoonサイト型トップページ
- 人気記事／ブロックで作るCocoonサイト型トップページ
- プロフィールボックス／ブロックで作るCocoonサイト型トップページ
- メインビジュアルに効果的！カバーブロックには動画も設定できる
- セクションに背景色をつける方法／ブロックで作るCocoonサイト型トップページ
- セクションを画面幅いっぱい（フルワイド）にする方法／ブロックで作るCocoonサイト型トップページ
- 不要な要素を非表示にして、余白を消す方法／ブロックで作るCocoonサイト型トップページ
- ブロックエディタで余白を調節する方法
- ブロックエディタならセクションカラムの上下移動も簡単
- 仕上げ／トップページに適用する
- まとめ／Cocoonサイト型トップページを手軽に作ってみましょう
- ブログ好きな40代主婦
- CocoonサイトをCSSでカスタマイズ
- 2020年1月1日ブログ開設
- ドメインパワー40
- 2023年～有料記事公開
- →累計250件（月間約20件）購入いただいています
です
完成イメージ／ブロックで作るCocoonサイト型トップページ
このようにカラムブロックとカバーブロックをひとつのセクション枠として使います。中にブロックで要素を重ねていくイメージ。ブロックエディタで普段の記事を書く感覚でトップページを作っていきます。
セクション枠となる親ブロック（カラムブロック）を選択する作業がとても多いです。ブロックの使い方ができればあとは簡単！
当カスタマイズで作るトップページのサンプルをご覧ください。
正直、ノーコードでここまで作れるってすごくないですか？？
テーマCocoonといえば「コードがいっぱい必要」というイメージがあるかもしれません。ところが、ブロック機能で新着記事、人気記事が表示できたり、最近のアップデート（Cocoon2.6.8）ではブロック下の余白調整も追加され、ぐーんと有料テーマ並の柔軟なカスタマイズに対応できるようになりました。
もともと優秀なCocoonの進化がとまらないっ
ワードプレス機能のカラムやカバーブロックと組み合わせることで自由自在に、サンプルのようなトップページがブロック機能と最小限のCSS追加で作れますよ。
画像や表示するカテゴリーを決めておく等の事前準備が終わっていれば、作業時間の目安は５０分ほどです。普段カラムを使ってブロック操作に慣れている人であればもっと短縮できるかもしれません。
とにかく簡単！！
Cocoon 2.7.2で公開されたスキン「メイド・イン・ヘブン」のサイトで、当記事を紹介していただきました。
ブロックを使いコードを減らす工夫／Cocoonサイト型トップページ
コードを減らす工夫
| 要素 | コード記述 | ブロック機能 |
|---|---|---|
| セクションの枠 | HTML/CSS | ワードプレスのカラム＆カバーブロック機能 |
| セクション背景色 | HTML/CSS | エディタのカラーパレットから選択 |
| 新着記事、人気記事 | HTML/CSS | Cocoonブロック機能で表示 |
| リンクボタン | HTML/CSS | Cocoonのボタン機能を使用 |
| フルワイド幅 | HTML/CSS | カラム、カバーブロック+CSS |
| 余白調整 | CSS | CSS |
| 不要な要素を非表示にする | CSS | CSS |
POINT
コード記述を大幅に減らし、誰にでも分かりやすくしました！
カスタマイズ事例／ブロックで作るCocoonサイト型トップページ
当記事「とにかく簡単！Cocoonサイト型トップページをブロック機能で作ってみる」を参考に、トップページを作成されたサイトを紹介します。
ふじこLIFE
URL：https://fujicolife.com/
運営：ふじこ さん Post
HTML・CSSの知識は初心者レベルからのスタートだったというふじこさん。可愛いイラストと配色、アニメーションの動きなど、オリジナルの工夫が盛りだくさんのトップページに仕上がっています。一見、Cocoonとは思えないっ！！
Chaleur
運営：mai さん
素材、配色が綺麗で思わず素敵～と見とれてしまうようなブログ。カスタマイズする人のセンスでCocoonはオシャレに変わりますね^^
また、「HTML／CSSを使ったサイト型トップページ」の事例集については、カスタマイズ記事内に掲載しております。オシャレサイトがたくさんありますのでご覧になってくださいね。
構成／ブロックで作るCocoonサイト型トップページ
サイト型トップページの作り方は多種多様ありますが、サンプルでは下記の構成にしています。
セクション１ 新着記事（左１記事、右３記事）
セクション２ カテゴリー記事（３カテゴリ）
セクション３ 人気記事（横スライド）
セクション４ プロフィールボックス（背景画像固定）
プロフィールボックス背景固定は、当サイトのトップページでも採用しています。
ブロックを使うとレイアウト変更がしやすいので、カテゴリー数の増減、サイトコンセプトやピックアップ記事を追加する等、お好みで自由にアレンジしてくださいね。
ピックアップ記事を追加するなら【ナビカード】
特定の記事をピックアップ表示するならCocoonのナビカードが便利です。
イラスト・画像・動画素材を探すなら
イラスト・画像・動画素材を探すなら下記サイトが素材豊富で選びやすいです。
ワードプレスにアップロードする際はダウンロードしたままだと重いため、圧縮して軽量化することをおすすめします。
- 画像：形式は「jpeg」
- イラスト：形式は「png」
- 当サイトは、画像・イラストについてはできるだけ50KB程度まで軽くしています。
- 動画：形式は「mp4」を推奨
- 当サイトは、ダウンロードした画像を4MB→1MB程度まで圧縮しています。
事前準備／ブロックで作るCocoonサイト型トップページ
あらかじめ次の準備をしておくと、スムーズに作業を進めることができます。
- トップページの構成を考える（どのカテゴリを表示するか等）
- 素材を準備する（プロフィール背景と、各カテゴリーのイメージ画像）
- 表示するプロフィールを登録しておく（未登録の場合）
- 固定ページの準備
- 管理画面→「固定ページ」→「新規固定ページを追加」
- 固定ページタイトルは「トップページ」等にしておきます（あとでCSSで非表示にします）
- 右側サイドバー／固定ページタブ「ページ設定」→ページタイプで「１カラム（広い）」を選択して「下書き保存」（編集するときはこのページを使用します）
- ボタンの色、背景色の設定はCSSを使わずにエディタのカラーパレットから選択します。標準色以外に使いたい色があるときは、Cocoon設定でパレットに登録しておきましょう。
ここから先は有料公開です／Cocoonサイト型トップページ作成手順
それでは、ひとつずつ手順を解説していきますね。
コード記述を減らした分細かいブロック操作がメインになるので、各手順にスクリーンショットを添付し実際の画面を見ながら作業できるようにしています。
当記事では画像をたくさん準備することに重点を置きました。（50枚以上）
作業を進める上でもし疑問点がありましたら、お問い合わせページからお気軽にご連絡ください。
有料エリアの目次
- Cocoonサイト型トップページ／新着記事
- 次のブロックへ移動する方法（親ブロックの選択）
- Cocoonサイト型トップページ／カテゴリー記事
- Cocoonサイト型トップページ／人気記事
- Cocoonサイト型トップページ／カバーブロックを利用したプロフィールボックス
- メインビジュアルに効果的！カバーブロックには動画も設定できる
- ブロックエディタ／セクションに背景色をつける方法
- フルワイドブロック／セクションを画面幅いっぱいにする方法
- 不要な要素を非表示にして、余白を消す方法／CSS追加
- ブロックエディタで余白を調節する方法
- ブロックエディタ／セクションカラムの上下移動も簡単
- 仕上げ／トップページに適用する
- まとめ／Cocoonサイト型トップページを手軽に作ってみましょう
| 特定商取引法に基づく表記 | |
|---|---|
| サイト名 | Turicco |
| サイトURL | https://turicco.com/ |
| お問い合わせ | https://turicco.com/contact/ |
| 購入方法 | コンテンツ販売サービス、codoc(コードク)を利用しています。 詳しくは購入者向けFAQをご覧ください。 |
| 納品方法 | 記事公開 |
| 販売価格 | 980円 |
| お支払い 方法 | クレジットカード、デビットカード、プリペイド型クレジットカード、Apple Pay、Google Pay、コンビニ決済 |
| ※クレジットカード情報はSSLで暗号化され、決済システムサービスを提供するStripe社に直接送信されます。管理人が知ることはありませんのでご安心ください。 | |
| 返金・キャンセルについて | codoc株式会社利用規約 第10条（返金）に基づき、原則として購入いただいた記事のキャンセル、返金等を受けられないことを了承ください。 |
Comment コメントはこちらへ
カテゴリーごとの記事を表示するブロックを3カラム構成の左右の余白の入れ方についてどのようにされていますでしょうか。
1カラムの左側と3カラムの右側に余白を入れないと、カテゴリーのブロックが横幅いっぱいに表示されてしまいます。こちらを解消したいと思っています。
こちらは余白用に5カラムにして1カラムと5カラムを余白用のブロックとして10%づつ割り当て、2カラムから4カラムを26%づつにすることで、新着記事と同じ余白を割り当てることができますでしょうか。
> 佐々木 様
こんにちは。
フルワイドブロック／セクションを画面幅いっぱいにする方法
をご覧いただければと思います。
【具体的な手順】
①ひとつのセクションの外側のカラムを選択
②サイドバー：高度な設定→追加CSSクラスに「full-wide」と入力
③記載のCSSをコピペ（記事編集画面下方にある「カスタムCSS」）
marginで幅をいっぱいに、
paddingで左右の余白をあけるように調整しています。
paddingを入れているため、カテゴリーのセクションも横幅いっぱいに表示されることはありません。現在、HTMLに直接入力されているスタイル（padding:0)は影響が出るので削除お願いします。
お試しくださいね。
> 佐々木様
こんにちは。
サイトを拝見しましたところ、full-wideの設定はきちんとされております。
あとはHTMLのstyleに直接指定されている余白（padding:0）が優先度が高くCSSが効いていないため、HTMLで設定しているスタイルをすべて削除いただければと思います。
結果、削除しただけで画面左右にはCSSで設定した余白（padding）が反映され検証上は綺麗に表示されました^^
参考画像を添付いたします。