メッセージ

ブロック

Cocoonカスタマイズ集

「新着記事」ブロックにページネーションを追加する方法

「固定ページに新着記事をページネーション付きで表示する方法」を解説。WordPress標準の「クエリーループ」ブロックと「ページ送り」ブロックを組み合わせ、カテゴリー一覧のように新着記事をエントリーカード型で表示する方法や、表示件数・カテゴリー・カラムを設定するポイントを分かりやすく紹介します。
Cocoonカスタマイズ集

SWELL風の波境界線を追加する方法

「Cocoonのカラムブロックに波状の境界線を追加する方法」を解説。カラムブロックを使ってSWELL風の波デザインを上下に追加する方法や、CSSのmask・clip-pathを活用してなみなみ・ギザギザ・斜めの境界線を作る方法を分かりやすく紹介します。
Cocoonカスタマイズ集

簡単に、ブロックを使用してメニュー表を作成する方法

「Cocoonでブロックを使ったメニュー表を作る方法」を解説。段落と区切りブロックを横並びに配置して商品名と価格を見やすく表示する方法や、点線の間隔を調整してデザインを変更するCSS設定、パターンとして再利用する方法を分かりやすく紹介します。
Cocoonカスタマイズ集

簡単に、ブロックを使用して独自のCTAボックスを作成する方法

「Cocoonで複数ボタン対応のCTAボックスを作る方法」を解説。ブロックを組み合わせて複数のボタンを配置する方法や、画面幅に応じて縦並びにする設定、評価スターや円形の評価グラフを追加する方法を分かりやすく紹介します。
Cocoonカスタマイズ集

「画像」ブロックをカラムからはみ出し配置する方法

「Cocoonで画像をはみ出して表示するカラムを作る方法」を解説。Gutenbergの2カラムブロックを使い、番号付きや背景付きのカードを作る方法や、画像を上にはみ出して配置するCSS設定、標準機能を活用して他のテーマでも応用する方法を分かりやすく紹介します。
Cocoonカスタマイズ集

簡単に、ブロックを使用して順序を比較できるリストボックスを作成する方法

「Cocoonで上下を比較できるリストボックスを作る方法」を解説。Cocoon標準の「見出しボックス」「段落」「リスト」ブロックを組み合わせて比較ボックスを作成する方法や、CSSで上下の項目を視覚的に分けるデザイン、実装時の設定を分かりやすく紹介します。