Cocoonを使ってオリジナルのトップページを作りたいけど、どこから手を付けたらいいかわからない……
この記事では、ワードプレステーマ「Cocoon」を使用し、初心者でも簡単に作れるトップページのカスタマイズ手順を分かりやすく解説します。特に「ブロックエディタ」を活用し、コードを最小限に抑えた方法を中心に紹介。さらに、完成イメージや具体的なデザイン例、調整のコツも充実しています。
どなたでも簡単にオリジナルのサイト型トップページを作成できるようサポートします。この記事を活用して、効率よく理想のトップページを完成させましょう！
- ワードプレスのテーマ「Cocoon」を使っている
- 簡単にサイト型トップページを作成したい
- HTMLやCSSが苦手でもカスタマイズに挑戦したい
- 視覚的に操作できるブロックエディタを活用したい
About me
この記事を書いた人
- ブログ好きな40代主婦
- CocoonサイトをCSSでカスタマイズ
- 2020年1月1日ブログ開設
- ドメインパワー40
- 2023年～有料記事公開
- →累計310件（月間約20件）購入いただきました
ブロックで作るCocoonサイト型トップページの完成イメージと概要
Cocoonテーマといえば「デザインを調整するにはコードがいっぱい必要」というイメージがあるかもしれません。ところが、ブロック機能で新着記事、人気記事を表示できたり、最近のアップデート（Cocoon2.6.8）ではブロック下の余白調整も追加され、ぐーんと有料テーマ並の柔軟なカスタマイズに対応できるようになりました。
ワードプレス機能のエディタ設定、カラムやカバーブロックと組み合わせることで、デモページのようなトップページがブロック機能と最小限のCSS追加で作れます。
画像や表示するカテゴリーを決めておく等の事前準備が終わっていれば、作業時間の目安は１時間ほどです。普段カラムを使ってブロック操作に慣れている人であればもっと短縮できるかもしれません。
とにかく簡単！！
Cocoon 2.7.2で公開されたスキン「メイド・イン・ヘブン」のサイトで、当記事を紹介していただきました。
完成イメージ｜デモページをチェック
作業の流れと概要
以下は、基本的な作業手順とポイントです。
- セクション構成
セクションの枠組みとしてワードプレスの「カラム」と「カバー」ブロックを使用。複数のブロックを配置するための土台を作ります。 - 背景色を追加する
各カラムブロックに背景色を設定してセクションを引き立てます。ブロックを使うことでCSS不要な点がポイント。 - フルワイド設定で横幅を広げる
ブロックの横幅をフルワイドに広げ、画面いっぱいに広がるスタイリッシュなデザインを採用しています。 - 不要な余白を調整
セクション間の余分なスペースを縮小して、全体的にバランスをとります。
これらのポイントを実践することで完成イメージに近付きます。
コード削減の工夫
コードを少なくするために、本来HTMLとCSSで記述する部分をブロック機能で代用する工夫をしています。
| 要素 | コード記述 | ブロック機能 |
|---|---|---|
| セクションの枠 | HTML/CSS | ワードプレスのカラム＆カバーブロック機能 |
| セクション背景色 | HTML/CSS | エディタのカラーパレットから選択 |
| 新着記事、人気記事 | HTML/CSS | Cocoonブロック機能で表示 |
| リンクボタン | HTML/CSS | Cocoonのボタン機能を使用 |
| フルワイド幅 | HTML/CSS | カラム、カバーブロック+CSS |
| 余白調整 | CSS | CSS |
| 不要な要素を非表示にする | CSS | CSS |
ブロック機能をフル活用し、HTMLについてはノーコードを実現。CSSも必要最低限になっています。
HTML/CSSで作るトップページ作成も紹介しています。
カスタマイズ実例
当記事「とにかく簡単！Cocoonサイト型トップページをブロック機能で作ってみる」を参考に、トップページを作成されたサイトを紹介します。
ふじこLIFE
URL：https://fujicolife.com/
運営：ふじこ さん Post
HTML・CSSの知識は初心者レベルからのスタートだったというふじこさん。可愛いイラストと配色、アニメーションの動きなど、オリジナルの工夫が盛りだくさんのトップページに仕上がっています。一見、Cocoonとは思えないっ！！
Chaleur
運営：mai さん
素材、配色が綺麗で思わず素敵～と見とれてしまうようなブログ。カスタマイズする人のセンスでCocoonはオシャレに変わりますね^^
また、「HTML／CSSを使ったサイト型トップページ」の事例集については、カスタマイズ記事内に掲載しております。オシャレサイトがたくさんありますのでご覧になってくださいね。
便利な機能をチェック｜ブロックで作るCocoonサイト型トップページ
トップページ作成の際に使える便利な機能をご紹介します。
記事カラム数の変更
ブロックで表示する「新着記事」「人気記事」「ナビカード」を横並びにしてカラム数をサイドバーで切り替えるカスタマイズを掲載。表示記事を横スライドではなく２～4カラムに変更できます。
- デフォルト（縦並びになっています）
- 2カラム（モバイル1カラム）
- 2カラム（モバイル2カラム）
- 3カラム（モバイル1カラム）
- 3カラム（モバイル2カラム）
- 4カラム（モバイル1カラム）
- 4カラム（モバイル2カラム）
１度このカスタマイズを設定しておけば、手間のかかるCSSを追加せずにカラム数を切り替えできるのでとても作業が楽になります。固定ページを利用して複数のトップページを作る場合などに重宝します。
ピックアップ記事を目立たせるナビカードの設置
トップページにアピールしたい特定の記事を目立たせたいなら、Cocoonのナビカード機能が便利です。
ナビカードを使えば、新着記事や人気記事などのグループ表示だけでなく特定の記事を「おすすめコンテンツ」としてピックアップして表示できます。視覚的にわかりやすくサイトの個性をアピールするのに最適！
高品質な画像・イラスト・動画素材を探す
デザインやコンテンツ作成に役立つ素材を探すなら以下のサイトがおすすめ。豊富な素材が揃っており、選びやすさも抜群です。
素材を扱う際のポイント
ワードプレスにアップロードする前に、素材を軽量化することをおすすめします。素材が重いままだとサイトの読み込み速度に影響する場合があります。
- 画像形式：JPEG（推奨）
- イラスト形式：PNG（透過が必要な場合におすすめ）
- 動画形式：MP4（軽量で幅広く対応）
推奨する軽量化基準
- 画像・イラスト: 100KB程度を目標に圧縮
- 動画: 1MB以内に圧縮
適切な形式・サイズに調整して、快適なサイト運営を目指しましょう！
カラーパレットの登録
ボタンの色、背景色の設定は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 コメントはこちらへ
お忙しいところ、すみません。DEMOサイトのProfileのブロックにあります、記事に戻るボタンの背景を透明にされていますが、どのようにすればできますでしょうか？
> ガッキーさん
DEMOサイトの「記事に戻るボタン」は自分でカスタムして作っています。
作り方は「テキストリンクをおしゃれに装飾」の記事。矢印風の4に近い形です。
カテゴリーごとの記事を表示するブロックを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）が反映され検証上は綺麗に表示されました^^
参考画像を添付いたします。