これまで、Cocoonでのサイト型トップページの作り方を紹介してきました。
しかし今回は、「もっと手軽に作りたい！」という方に向けて、コードの記述をできる限り減らし、Cocoonの「ブロックエディタ」を活用したサイト型トップページの作り方をお届けします。視覚的に操作しやすいブロックエディタを使えば初心者でも本格的なデザインが実現できます！
- ワードプレスのテーマ「Cocoon」と「ブロックエディタ」を使っている
- サイト型トップページにしたい
- HTML、CSSはよくわからない
- コードは少なく、視覚的に分かりやすいブロックで操作したい
- 画面いっぱいに幅を使いたい（フルワイド対応）
- 完成イメージ／ブロックで作るCocoonサイト型トップページ
- ブロックを使いコードを減らす工夫／Cocoonサイト型トップページ
- カスタマイズ事例／ブロックで作るCocoonサイト型トップページ
- 構成／ブロックで作るCocoonサイト型トップページ
- 事前準備／ブロックで作るCocoonサイト型トップページ
- 実装手順／Cocoonサイト型トップページ
- カバーブロックで作るメインビジュアルの作り方
- 更新情報／ブロックで作るCocoonサイト型トップページ
- 次のブロックへ移動する方法（親ブロックの選択）
- 新着記事／ブロックで作るCocoonサイト型トップページ
- カテゴリー記事／ブロックで作るCocoonサイト型トップページ
- 人気記事／ブロックで作るCocoonサイト型トップページ
- プロフィールボックス／ブロックで作るCocoonサイト型トップページ
- ブロックエディタで余白を調節する方法
- セクションに背景色をつける方法／ブロックで作るCocoonサイト型トップページ
- セクションを画面幅いっぱい（フルワイド）にする方法／ブロックで作るCocoonサイト型トップページ
- 不要な要素を非表示にして、余白を消す方法／ブロックで作るCocoonサイト型トップページ
- 仕上げ／トップページに適用する
- まとめ／Cocoonサイト型トップページを手軽に作ってみましょう
- ブログ好きな40代主婦
- CocoonサイトをCSSでカスタマイズ
- 2020年1月1日ブログ開設
- ドメインパワー40
- 2023年～有料記事公開
- →累計280件（月間約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 |
- セクションの枠
- 通常、セクションごとの枠組みを作る際はHTML/CSSでレイアウトを構築しますが、ワードプレスのカラムやカバーブロックを利用することで、コードを書く手間を省けます。カラムブロックで複数のカラムを設定し、レイアウトが簡単に整います。
- セクション背景色
- 背景色の設定はHTML/CSSでおこなうのが一般的ですが、Cocoonではエディタのカラーパレットから簡単に選択できます。サイドバーで背景色を設定でき、コード不要で見やすいデザインに調整可能です。
- 新着記事・人気記事
- Cocoonの新着記事ブロックや人気記事ブロックを使うと、自動的にデザインが適用され手間なく表示できます。コーディング不要で簡単に導入できます。
- リンクボタン
- ボタンリンクをデザインする場合も、HTML/CSSでのコーディングを省略しCocoonのボタン機能を利用するだけで済みます。エディタ上でテキストや色を調整するだけで統一感あるボタンが作成できます。
- フルワイド幅
- カラムブロックやカバーブロックにCSSで幅を広げる微調整を加えることで、簡単にフルワイド幅が実現可能です。一層洗練されたデザインに仕上げられます。
- 余白調整・不要な要素の非表示
- 細かい余白の調整や不要な要素の非表示もサイドバーの設定やCSSを使って調整可能です。
ブロック機能をフル活用し、HTMLはノーコードで充実したトップページを作ります。
カスタマイズ事例／ブロックで作るCocoonサイト型トップページ
当記事「とにかく簡単！Cocoonサイト型トップページをブロック機能で作ってみる」を参考に、トップページを作成されたサイトを紹介します。
ふじこLIFE
URL：https://fujicolife.com/
運営：ふじこ さん Post
HTML・CSSの知識は初心者レベルからのスタートだったというふじこさん。可愛いイラストと配色、アニメーションの動きなど、オリジナルの工夫が盛りだくさんのトップページに仕上がっています。一見、Cocoonとは思えないっ！！
Chaleur
運営：mai さん
素材、配色が綺麗で思わず素敵～と見とれてしまうようなブログ。カスタマイズする人のセンスでCocoonはオシャレに変わりますね^^
また、「HTML／CSSを使ったサイト型トップページ」の事例集については、カスタマイズ記事内に掲載しております。オシャレサイトがたくさんありますのでご覧になってくださいね。
構成／ブロックで作るCocoonサイト型トップページ
サイト型トップページの作り方は多種多様ありますが、デモページでは下記の構成にしています。
セクション 1 メインビジュアル
セクション 2 更新情報
セクション 3 新着記事（左１記事、右３記事）
セクション 4 カテゴリー記事（３カテゴリ）
セクション 5 人気記事（横スライド）
セクション 6 プロフィールボックス
プロフィールボックス背景固定は、当サイトのトップページでも採用しています。
以下は、デモページで使っている配色（カラーコード）です。
News
更新情報
背景色：#f4f3f1（ベージュ）
文字色：#b2aba1（薄い茶色）
New Post
新着記事
背景色：#fff（白）
文字・ボタン色：#b2aba1（薄い茶色）
Category
カテゴリー記事
背景色：#f4f3f1（ベージュ）
文字・ボタン色：#b2aba1（薄い茶色）
Popular
人気記事
背景色：#fff（白）
文字色：#b2aba1（薄い茶色）
ブロックを使うとレイアウトの追加・変更がしやすいです。配色についてはサイトイメージに合わせ、カテゴリー数の増減、サイトコンセプトやピックアップ記事を追加する等、トップページに表示するコンテンツをお好みで自由にアレンジしてくださいね。
【便利】記事のカラム数を簡単切り替え
ブロックで表示する「新着記事」「人気記事」を横並びにしてカラム数をサイドバーで切り替えるカスタマイズを紹介しています。デモページの人気記事を横スライドから２カラム、３カラムに変更できます。
サイドバー切り替えしなくてもよい場合はCSSを追加することで横並びにできます。
- デフォルト（縦並びになっています）
- 2カラム（モバイルでも2カラム）
- 2カラム（モバイルで1カラム）
- 3カラム（モバイルで1カラム）
- 3カラム（モバイルで2カラム）
記事をピックアップ表示する【ナビカード】
アピールしたい特定の記事をピックアップ表示するならCocoonのナビカードが便利です。
イラスト・画像・動画素材を探すなら
イラスト・画像・動画素材を探すなら下記サイトが素材豊富で選びやすいです。
ワードプレスにアップロードする際はダウンロードしたままだと重いため、圧縮して軽量化することをおすすめします。
- 画像：形式は「jpeg」
- イラスト：形式は「png」
- 当サイトは、画像・イラストについてはできるだけ50KB程度まで軽くしています。
- 動画：形式は「mp4」を推奨
- 当サイトは、ダウンロードした画像を4MB→1MB程度まで圧縮しています。
事前準備／ブロックで作るCocoonサイト型トップページ
あらかじめ次の準備をしておくと、スムーズに作業を進めることができます。
- トップページの構成を考える（どのカテゴリを表示するか等）
- 素材を準備する（プロフィール背景と、各カテゴリーのイメージ画像）
- 表示するプロフィールを登録しておく（未登録の場合）
- 固定ページの準備
- 管理画面→「固定ページ」→「新規固定ページを追加」
- 固定ページタイトルは「トップページ」等にしておきます（あとでCSSで非表示にします）
- サイドバー／固定ページタブ「ページ設定」→ページタイプで「１カラム（広い）」を選択して「下書き保存」（編集するときはこのページを使用します）
- ボタンの色、背景色の設定はCSSを使わずにエディタのカラーパレットから選択します。標準色以外に使いたい色があるときは、Cocoon設定でパレットに登録しておきましょう。
実装手順／Cocoonサイト型トップページ
それでは、ひとつずつ手順を解説していきますね。
有料エリアの目次
コード記述を減らした分細かいブロック操作がメインになるので、各手順にスクリーンショットを添付し実際の画面を見ながら作業できるようにしています。
当記事では画像をたくさん準備することに重点を置きました。（50枚以上）
作業を進める上でもし疑問点がありましたら、お問い合わせページからお気軽にご連絡ください。（当記事の範囲内で対応いたします）
| 特定商取引法に基づく表記 | |
|---|---|
| サイト名 | 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）が反映され検証上は綺麗に表示されました^^
参考画像を添付いたします。