これまで、Cocoonでのサイト型トップページの作り方を紹介してきました。
１回でコピペ、ポン！を最優先してあえてコード記述にしているのですが、今回はコードの記述をできる限り減らし、ブロックエディタ機能をメインに使って再現したトップページの作り方をご紹介します。
作成手順・解説は有料公開になります。有料部分を見る
- ワードプレスのテーマ「Cocoon」と「ブロックエディタ」を使っている
- サイト型トップページにしたい
- HTML、CSSはよくわからない
- コードは少なく、視覚的に分かりやすいブロックで操作したい
- ブロック機能で作るCocoonサイト型トップページの完成イメージ
- Cocoonサイト型トップページにブロックエディタ機能を使い、コードを減らす工夫
- Cocoonサイト型トップページのカスタマイズ事例
- Cocoonサイト型トップページの構成
- Cocoonサイト型トップページを作る事前準備
- ここから先は有料公開です／Cocoonサイト型トップページ作成手順
- Cocoonサイト型トップページ／新着記事
- 次のブロックへ移動する方法（親ブロックの選択）
- Cocoonサイト型トップページ／カテゴリー記事
- Cocoonサイト型トップページ／人気記事
- Cocoonサイト型トップページ／カバーブロックを利用したプロフィールボックス
- メインビジュアルに効果的！カバーブロックには動画も設定できる
- ブロックエディタ／セクションに背景色をつける方法
- フルワイドブロック／セクションを画面幅いっぱいにする方法
- 不要な要素を非表示にして、余白を消す方法／CSS追加
- ブロックエディタで余白を調節する方法
- ブロックエディタ／セクションカラムの上下移動も簡単
- 仕上げ／トップページに適用する
- まとめ／Cocoonサイト型トップページを手軽に作ってみましょう
- ブログ好きな40代主婦
- CocoonサイトをCSSでカスタマイズ
- JavaScriptを勉強中
- ドメインパワー43
- 有料記事、累計190件購入いただいています、感謝！
です
ブロック機能で作る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ではブロック機能がなくMTML／CSSでの実装が必要なため当記事では使用していません。
タブ切り替えを使いたい方は「カスタムHTML」を使って追加できるので、こちらの記事をご覧ください。
New 2024.4月、Cocoon 2.7.3でタブブロックが追加されました。
このようなタブが簡単に設置できるのでとても便利ですよ。
- Tab 1
- Tab 2
- Tab 3
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サイト型トップページ作成手順
それでは、ひとつずつ手順を解説していきますね。
コード記述を減らした分細かいブロック操作がメインになるので、各手順にスクリーンショットを添付し実際の画面を見ながら作業できるようにしています。
当記事では画像をたくさん準備することに重点を置きました。（40枚以上）
作業を進める上でもし疑問点がありましたら、お問い合わせページからお気軽にご連絡ください。
| 特定商取引法に基づく表記 | |
|---|---|
| サイト名 | Turicco |
| サイトURL | https://turicco.com/ |
| お問い合わせ | https://turicco.com/contact/ |
| 購入方法 | コンテンツ販売サービス、codoc(コードク)を利用しています。 詳しくは購入者向けFAQをご覧ください。 |
| 納品方法 | 記事公開 |
| 販売価格 | 900円 |
| お支払い 方法 | クレジットカード、デビットカード、プリペイド型クレジットカード、Apple Pay、Google Pay、コンビニ決済 |
| ※クレジットカード情報はSSLで暗号化され、決済システムサービスを提供するStripe社に直接送信されます。管理人が知ることはありませんのでご安心ください。 | |
| 返金・キャンセルについて | codoc株式会社利用規約 第10条（返金）に基づき、原則として購入いただいた記事のキャンセル、返金等を受けられないことを了承ください。 |
Comment コメントはこちらへ