当サイトはエックスサーバーを利用しています お得な友達紹介特典を見る

とにかく簡単!Cocoonサイト型トップページをブロック機能で作ってみる

アイキャッチ/トップページ(ブロックエディタ) Cocoon
Cocoon
記事内に広告が含まれています
スポンサーリンク

これまで、Cocoonでのサイト型トップページの作り方を紹介してきました。

トップページ
こんな方におすすめ
  • ワードプレスのテーマ「Cocoon」と「ブロックエディタ」を使っている
  • サイト型トップページにしたい
  • HTML、CSSはよくわからない
  • コードは少なく、視覚的に分かりやすいブロックで操作したい
Contents
  1. ブロック機能で作るCocoonサイト型トップページの完成イメージ
  2. Cocoonサイト型トップページにブロックエディタ機能を使い、コードを減らす工夫
    1. コードを減らす工夫
    2. タブ切り替え機能について
  3. Cocoonサイト型トップページのカスタマイズ事例
    1. ふじこLIFE
    2. Chaleur
  4. Cocoonサイト型トップページの構成
    1. ピックアップ記事を追加するなら【ナビカード】
    2. イラスト・画像・動画素材を探すなら
  5. Cocoonサイト型トップページを作る事前準備
  6. ここから先は有料公開です/Cocoonサイト型トップページ作成手順
  7. Cocoonサイト型トップページ/新着記事
    1. 新着記事セクションを作る手順
  8. 次のブロックへ移動する方法(親ブロックの選択)
    1. 親ブロック(カラム)を選択しておこなう作業
  9. Cocoonサイト型トップページ/カテゴリー記事
    1. カテゴリー記事セクションを作る手順
    2. 複数のブロックを一度にコピーすると便利
  10. Cocoonサイト型トップページ/人気記事
    1. 人気記事セクションを作る手順
  11. Cocoonサイト型トップページ/カバーブロックを利用したプロフィールボックス
    1. カバーブロックを利用してプロフィールボックスを作る手順
    2. カバーブロックの画像設定
  12. メインビジュアルに効果的!カバーブロックには動画も設定できる
  13. ブロックエディタ/セクションに背景色をつける方法
  14. フルワイドブロック/セクションを画面幅いっぱいにする方法
  15. 不要な要素を非表示にして、余白を消す方法/CSS追加
  16. ブロックエディタで余白を調節する方法
    1. セクション内の内側余白(パディング)
    2. ブロック下の余白
  17. ブロックエディタ/セクションカラムの上下移動も簡単
  18. 仕上げ/トップページに適用する
    1. 固定ページを「公開」
    2. トップページに適用する
  19. まとめ/Cocoonサイト型トップページを手軽に作ってみましょう
スポンサーリンク
この記事を書いた人
  • ブログ好きな40代主婦
  • CocoonサイトをCSSでカスタマイズ
  • JavaScriptを勉強中
  • ドメインパワー38
  • 有料記事、累計190件購入いただいています
はっちゃん
です
プロフィール

ブロック機能で作るCocoonサイト型トップページの完成イメージ

このようにカラムブロックカバーブロックをひとつのセクション枠として使い、中にブロックで要素を重ねていくイメージ。ブロックエディタで普段の記事を書く感覚でトップページを作っていきます。

当カスタマイズで作るトップページのサンプルをご覧ください。

正直、ノーコードでここまで作れるってすごくないですか??

テーマCocoonといえば「コードがいっぱい必要」というイメージがあるかもしれません。ところが、ブロック機能で新着記事、人気記事が表示できたり、最近のアップデート(Cocoon2.6.8)ではブロック下の余白調整も追加され、ぐーんと有料テーマ並の柔軟なカスタマイズに対応できるようになりました。

もともと優秀なCocoonの進化がとまらないっ

ワードプレス機能のカラムやカバーブロックと組み合わせることで自由自在に、サンプルのようなトップページがブロック機能と最小限のCSS追加で作れますよ。

画像や表示するカテゴリーを決めておく等の事前準備が終わっていれば、作業時間の目安は40~50分ほどです。普段カラムを使ってブロック操作に慣れている人であれば30分でできるかもしれません。

とにかく簡単!!

Cocoon 2.7.2で公開されたスキン「メイド・イン・ヘブン」のサイトで、当記事を紹介していただきました。

スポンサーリンク

Cocoonサイト型トップページにブロックエディタ機能を使い、コードを減らす工夫

コードを減らす工夫

要素コード記述ブロック機能
セクションの枠HTML/CSSワードプレスのカラム&カバーブロック機能
セクション背景色HTML/CSSエディタのカラーパレットから選択
新着記事、人気記事HTML/CSSCocoonブロック機能で表示
リンクボタンHTML/CSSCocoonのボタン機能を使用
フルワイド幅HTML/CSSカラム、カバーブロック+CSS
余白調整CSSCSS
不要な要素を非表示にするCSSCSS

POINT

  • セクション背景色をエディタ上で設定できる(CSS不要)
  • ブロックエディタで実際に見ながらブロックを作成できる
  • フルワイドブロックが作れる
  • 動画を簡単に表示できる
  • HTMLノーコードを実現

コード記述を大幅に減らし、誰にでも分かりやすくしました!

タブ切り替え機能について

コード記述型トップページに含まれるタブ切り替えについては、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はオシャレに変わりますね^^

スポンサーリンク

Cocoonサイト型トップページの構成

サイト型トップページの作り方は多種多様ありますが、サンプルでは下記の構成にしています。

セクション1 新着記事(左1記事、右3記事)

セクション2 カテゴリー記事(3カテゴリ)

セクション3 人気記事(横スライド)

セクション4 プロフィールボックス(背景画像固定)

プロフィールボックス背景固定は、当サイトのトップページでも採用しています。

フルスクリーン/トップページ(ブロックエディタ)

ブロックを使うとレイアウト変更がしやすいので、カテゴリー数の増減、サイトコンセプトピックアップ記事を追加する等、お好みで自由にアレンジしてくださいね。

ピックアップ記事を追加するなら【ナビカード】

特定の記事をピックアップ表示するならCocoonのナビカードが便利です。

\選んだ記事だけを表示できる/

イラスト・画像・動画素材を探すなら

イラスト・画像・動画素材を探すなら下記サイトが素材豊富で選びやすいです。

\素材探しはこちら/

ワードプレスにアップロードする際はダウンロードしたままだと重いため、圧縮して軽量化することをおすすめします。

  • 画像:形式は「jpeg」
  • イラスト:形式は「png」
    • 当サイトは、画像・イラストについてはできるだけ50KB程度まで軽くしています。
  • 動画:形式は「mp4」を推奨
    • 当サイトは、ダウンロードした画像を4MB→1MB程度まで圧縮しています。
スポンサーリンク

Cocoonサイト型トップページを作る事前準備

あらかじめ次の準備をしておくと、スムーズに作業を進めることができます。

  • トップページの構成を考える(どのカテゴリを表示するか等)
  • 素材を準備する(プロフィール背景と、各カテゴリーのイメージ画像)
  • 表示するプロフィールを登録しておく(未登録の場合)
  • 固定ページの準備
    1. 管理画面→「固定ページ」→「新規固定ページを追加」
    2. 固定ページタイトルは「トップページ」等にしておきます(あとでCSSで非表示にします)
    3. 右側サイドバー/固定ページタブ「ページ設定」→ページタイプで「1カラム(広い)」を選択して「下書き保存」(編集するときはこのページを使用します)
ブロックトップページ/ページ設定
  • ボタンの色、背景色の設定はCSSを使わずにエディタのカラーパレットから選択します。標準色以外に使いたい色があるときは、Cocoon設定でパレットに登録しておきましょう。

ここから先は有料公開です/Cocoonサイト型トップページ作成手順

それでは、ひとつずつ手順を解説していきますね。

コード記述を減らした分細かいブロック操作がメインになるので、各手順にスクリーンショットを添付し実際の画面を見ながら作業できるようにしています。

当記事では画像をたくさん準備することに重点を置きました。(40枚以上)

作業を進める上でもし疑問点がありましたら、お問い合わせページからお気軽にご連絡ください。

特定商取引法に基づく表記
サイト名Turicco
サイトURLhttps://turicco.com/
お問い合わせhttps://turicco.com/contact/
購入方法コンテンツ販売サービス、codoc(コードク)を利用しています。
詳しくは購入者向けFAQをご覧ください。
納品方法記事公開
販売価格900円
お支払い
方法
クレジットカード、デビットカード、プリペイド型クレジットカード、Apple Pay、Google Pay、コンビニ決済
※クレジットカード情報はSSLで暗号化され、決済システムサービスを提供するStripe社に直接送信されます。管理人が知ることはありませんのでご安心ください。
返金・キャンセルについてcodoc株式会社利用規約 第10条(返金)に基づき、原則として購入いただいた記事のキャンセル、返金等を受けられないことを了承ください。
よろしければシェアお願いします
はっちゃんをフォローする
スポンサーリンク
\記事がお役に立てたら/
Profile
はっちゃん

40代、小中学生の息子の母。
当サイトで使っているワードプレステーマCocoonのデザインカスタマイズ、ブログ運営のことを主に発信しています。

PVアクセスランキング にほんブログ村
はっちゃんをフォローする

Comment コメントはこちらへ

タイトルとURLをコピーしました