フィーチャー · Features · Blanc Nail
検索…
カタログ 統計
CATALOG › Content › Features
フィーチャー
サービスの強みを並列に提示。3 / 4 / 6 列のグリッドバリエーション。
14
Patterns
Content
Group
isValid=0
Verified
CSS
Animation
01
Features — 3 Column Icon Cards
features-3col-icons
FEATURES
選ばれる3つの理由
高速パフォーマンス
ミリ秒単位で応答する最適化されたエンジン。大規模トラフィックでも安定した動作を保証します。
エンタープライズ級セキュリティ
SOC 2 Type II 認定、エンドツーエンド暗号化、ロールベースのアクセス制御で大切なデータを保護。
かんたんスケーリング
ワンクリックで容量を拡張。需要に応じて自動でリソースを最適化、コストを抑えながら成長を支援。
- パターン名: Features — 3 Column Icon Cards
- 概要: Three feature cards with emoji icons and hover lift animation.
- 使用目的: Features領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
- 適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
- レイアウト構造: 複数カラムで情報を分割する構造、幅配分 auto、推奨コンテンツ幅 1180px、主要ブロック group, paragraph, heading, columns, column, group, paragraph, heading
- メリット: ブロック単位で差し替えやすく、商用サイト制作時に構成案として再利用しやすい。
- デメリット: 実案件ではブランドトーン、原稿量、画像比率に合わせて余白とカラム幅の再調整が必要。
- バリエーション案: Featuresをミニマルに見せる余白重視版 / Featuresをリッチに見せるカバー/カード強調版 / Featuresをコーポレート向けに整える情報密度高め版 / Featuresをカジュアルに見せるアイコン/ラベル強調版
- 実装時の注意点: 独自HTMLブロック化せず、Group/Columns/Cover/List/ButtonなどのGutenberg標準ブロックとして編集する。ボタン、画像、余白、色はWordPressの保存HTMLと一致する属性で調整する。
HTML:
<!-- wp:pattern {"slug":"tf-premium/features-3col-icons"} /-->
CSS:
.section-features-3col-icons { max-width: 1200px; margin-inline: auto; }
JS:
document.querySelectorAll('.section-features-3col-icons').forEach((el) => el.dataset.ready = 'true');
02
Features — Alternating Image Rows
features-alternating
🎨 DESIGN
美しさは、機能の一部
細部まで磨き上げられたインターフェース。視覚的な階層、色彩のバランス、タイポグラフィの調和。すべてが一つの体験として機能します。
⚙️ ENGINEERING
堅牢なアーキテクチャ
マイクロサービス、自動スケーリング、グローバル CDN。最先端の技術スタックで、99.99% の稼働率と数百万リクエスト/秒の処理を実現。
- パターン名: Features — Alternating Image Rows
- 概要: Two media-text rows with images alternating sides.
- 使用目的: Features領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
- 適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
- レイアウト構造: 複数カラムで情報を分割する構造、幅配分 50% / 50% / 50% / 50%、推奨コンテンツ幅 1180px、主要ブロック group, columns, column, image, column, paragraph, heading, paragraph
- メリット: ブロック単位で差し替えやすく、商用サイト制作時に構成案として再利用しやすい。
- デメリット: 実案件ではブランドトーン、原稿量、画像比率に合わせて余白とカラム幅の再調整が必要。
- バリエーション案: Featuresをリッチに見せるカバー/カード強調版 / Featuresをコーポレート向けに整える情報密度高め版 / Featuresをカジュアルに見せるアイコン/ラベル強調版 / Featuresをモバイル特化にした単列・短文版
- 実装時の注意点: 独自HTMLブロック化せず、Group/Columns/Cover/List/ButtonなどのGutenberg標準ブロックとして編集する。ボタン、画像、余白、色はWordPressの保存HTMLと一致する属性で調整する。
HTML:
<!-- wp:pattern {"slug":"tf-premium/features-alternating"} /-->
CSS:
.section-features-alternating { max-width: 1200px; margin-inline: auto; }
JS:
document.querySelectorAll('.section-features-alternating').forEach((el) => el.dataset.ready = 'true');
03
Features — Bento Grid
features-bento
プラットフォーム全体像
⚡ Real-time
瞬時に反映されるデータ更新
WebSocket ベースのリアルタイム同期。チームメンバーの操作が即座に画面へ反映されます。
セキュア
SOC 2 / GDPR 準拠
グローバル
200+ エッジロケーション
✨ AI Powered
AI が支援する次世代ワークフロー
繰り返し作業を自動化、提案を生成、エラーを事前に発見。あなたの仕事を 10倍速く。
- パターン名: Features — Bento Grid
- 概要: Bento-style varied-size dark feature grid with gradient accent.
- 使用目的: Features領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
- 適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
- レイアウト構造: 複数カラムで情報を分割する構造、幅配分 60% / 40% / 40% / 60%、推奨コンテンツ幅 1180px、主要ブロック group, heading, columns, column, group, paragraph, heading, paragraph
- メリット: ブロック単位で差し替えやすく、商用サイト制作時に構成案として再利用しやすい。
- デメリット: 実案件ではブランドトーン、原稿量、画像比率に合わせて余白とカラム幅の再調整が必要。
- バリエーション案: Featuresをミニマルに見せる余白重視版 / Featuresをリッチに見せるカバー/カード強調版 / Featuresをコーポレート向けに整える情報密度高め版 / Featuresをカジュアルに見せるアイコン/ラベル強調版
- 実装時の注意点: 独自HTMLブロック化せず、Group/Columns/Cover/List/ButtonなどのGutenberg標準ブロックとして編集する。ボタン、画像、余白、色はWordPressの保存HTMLと一致する属性で調整する。
HTML:
<!-- wp:pattern {"slug":"tf-premium/features-bento"} /-->
CSS:
.section-features-bento { max-width: 1200px; margin-inline: auto; }
JS:
document.querySelectorAll('.section-features-bento').forEach((el) => el.dataset.ready = 'true');
04
Features — Numbered Steps
features-numbered
導入までの 4 ステップ
01
サインアップ
メールアドレスだけで 30 秒以内にアカウント作成。
02
セットアップ
ガイド付きセットアップで 5 分以内に環境準備完了。
03
カスタマイズ
ニーズに合わせて柔軟に調整、テンプレートも充実。
04
ローンチ
ワンクリックで本番環境へ、世界中のユーザーへ届けます。
- パターン名: Features — Numbered Steps
- 概要: Four numbered process steps with vibrant counter colors.
- 使用目的: Features領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
- 適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
- レイアウト構造: 複数カラムで情報を分割する構造、幅配分 auto、推奨コンテンツ幅 1180px、主要ブロック group, heading, columns, column, heading, heading, paragraph, column
- メリット: ブロック単位で差し替えやすく、商用サイト制作時に構成案として再利用しやすい。
- デメリット: 実案件ではブランドトーン、原稿量、画像比率に合わせて余白とカラム幅の再調整が必要。
- バリエーション案: Featuresをミニマルに見せる余白重視版 / Featuresをリッチに見せるカバー/カード強調版 / Featuresをコーポレート向けに整える情報密度高め版 / Featuresをカジュアルに見せるアイコン/ラベル強調版
- 実装時の注意点: 独自HTMLブロック化せず、Group/Columns/Cover/List/ButtonなどのGutenberg標準ブロックとして編集する。ボタン、画像、余白、色はWordPressの保存HTMLと一致する属性で調整する。
HTML:
<!-- wp:pattern {"slug":"tf-premium/features-numbered"} /-->
CSS:
.section-features-numbered { max-width: 1200px; margin-inline: auto; }
JS:
document.querySelectorAll('.section-features-numbered').forEach((el) => el.dataset.ready = 'true');
05
Features — EX01 Icon Circle Trio
features-ex01-icon-circles
選ばれる理由
厳選した素材
産地に足を運び、納得したものだけを仕入れています。
手しごとの丁寧さ
機械に頼れない工程こそ、人の手と目で仕上げます。
買ったあとも安心
修理・調整は永年対応。長くお使いいただくための窓口があります。
- パターン名: Features — EX01 Icon Circle Trio
- 概要: Three reasons with soft icon circles and descriptions.
- 使用目的: Features領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
- 適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
- レイアウト構造: Group / Columns / Heading / Paragraph / Buttons を中心とした標準ブロック構成、推奨コンテンツ幅 1180px
- メリット: ブロック単位で差し替えやすく、商用サイト制作時に構成案として再利用しやすい。
- デメリット: 実案件ではブランドトーン、原稿量、画像比率に合わせて余白とカラム幅の再調整が必要。
- バリエーション案: 配色をブランドカラーへ寄せた強調版 / 情報密度を上げたコーポレート版 / モバイル特化の単列・短文版
- 実装時の注意点: 独自HTMLブロック化せず、Group/Columns/Cover/List/ButtonなどのGutenberg標準ブロックとして編集する。ボタン、画像、余白、色はWordPressの保存HTMLと一致する属性で調整する。
HTML:
<!-- wp:pattern {"slug":"tf-premium/features-ex01-icon-circles"} /-->
CSS:
.section-features-ex01-icon-circles { max-width: 1200px; margin-inline: auto; }
JS:
document.querySelectorAll('.section-features-ex01-icon-circles').forEach((el) => el.dataset.ready = 'true');
06
Features — EX02 Bento Asymmetric
features-ex02-bento
いちばんの強み
担当者が最初から最後まで変わりません
ヒアリングからアフターフォローまで一貫して同じ担当者。言った・言わないが起きない体制で、細かなご要望も漏らしません。
明朗な価格
見積り後の追加請求は一切ありません。
地域密着 20 年
何かあれば 30 分で駆けつけられる距離感です。
- パターン名: Features — EX02 Bento Asymmetric
- 概要: Asymmetric bento layout: one large card and two stacked cards.
- 使用目的: Features領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
- 適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
- レイアウト構造: Group / Columns / Heading / Paragraph / Buttons を中心とした標準ブロック構成、推奨コンテンツ幅 1180px
- メリット: ブロック単位で差し替えやすく、商用サイト制作時に構成案として再利用しやすい。
- デメリット: 実案件ではブランドトーン、原稿量、画像比率に合わせて余白とカラム幅の再調整が必要。
- バリエーション案: 配色をブランドカラーへ寄せた強調版 / 情報密度を上げたコーポレート版 / モバイル特化の単列・短文版
- 実装時の注意点: 独自HTMLブロック化せず、Group/Columns/Cover/List/ButtonなどのGutenberg標準ブロックとして編集する。ボタン、画像、余白、色はWordPressの保存HTMLと一致する属性で調整する。
HTML:
<!-- wp:pattern {"slug":"tf-premium/features-ex02-bento"} /-->
CSS:
.section-features-ex02-bento { max-width: 1200px; margin-inline: auto; }
JS:
document.querySelectorAll('.section-features-ex02-bento').forEach((el) => el.dataset.ready = 'true');
07
Features — EX03 Checklist Two Column
features-ex03-checklist
料金に含まれるもの
✅ 事前カウンセリング
✅ 当日の施術一式
✅ アフターケア用品
✅ 一週間後のチェック
✅ LINE での相談(期間中無制限)
✅ 保証書の発行
- パターン名: Features — EX03 Checklist Two Column
- 概要: Check-mark feature list split into two columns.
- 使用目的: Features領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
- 適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
- レイアウト構造: Group / Columns / Heading / Paragraph / Buttons を中心とした標準ブロック構成、推奨コンテンツ幅 1180px
- メリット: ブロック単位で差し替えやすく、商用サイト制作時に構成案として再利用しやすい。
- デメリット: 実案件ではブランドトーン、原稿量、画像比率に合わせて余白とカラム幅の再調整が必要。
- バリエーション案: 配色をブランドカラーへ寄せた強調版 / 情報密度を上げたコーポレート版 / モバイル特化の単列・短文版
- 実装時の注意点: 独自HTMLブロック化せず、Group/Columns/Cover/List/ButtonなどのGutenberg標準ブロックとして編集する。ボタン、画像、余白、色はWordPressの保存HTMLと一致する属性で調整する。
HTML:
<!-- wp:pattern {"slug":"tf-premium/features-ex03-checklist"} /-->
CSS:
.section-features-ex03-checklist { max-width: 1200px; margin-inline: auto; }
JS:
document.querySelectorAll('.section-features-ex03-checklist').forEach((el) => el.dataset.ready = 'true');
08
Features — EX04 Numbered Flow Four
features-ex04-numbered-steps
ご利用の流れ
01
ご相談
フォームか電話で。概要だけで OK です。
02
現地調査・お見積り
無料で伺います。その場で概算をご提示。
03
施工
進捗は毎日写真でご報告します。
04
お引き渡し
保証書とともに。1 年後の無料点検つき。
- パターン名: Features — EX04 Numbered Flow Four
- 概要: Four-step service flow with big numbers.
- 使用目的: Features領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
- 適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
- レイアウト構造: Group / Columns / Heading / Paragraph / Buttons を中心とした標準ブロック構成、推奨コンテンツ幅 1180px
- メリット: ブロック単位で差し替えやすく、商用サイト制作時に構成案として再利用しやすい。
- デメリット: 実案件ではブランドトーン、原稿量、画像比率に合わせて余白とカラム幅の再調整が必要。
- バリエーション案: 配色をブランドカラーへ寄せた強調版 / 情報密度を上げたコーポレート版 / モバイル特化の単列・短文版
- 実装時の注意点: 独自HTMLブロック化せず、Group/Columns/Cover/List/ButtonなどのGutenberg標準ブロックとして編集する。ボタン、画像、余白、色はWordPressの保存HTMLと一致する属性で調整する。
HTML:
<!-- wp:pattern {"slug":"tf-premium/features-ex04-numbered-steps"} /-->
CSS:
.section-features-ex04-numbered-steps { max-width: 1200px; margin-inline: auto; }
JS:
document.querySelectorAll('.section-features-ex04-numbered-steps').forEach((el) => el.dataset.ready = 'true');
09
Features — EX05 Alternating Rows
features-ex05-alternating
朝採れを、その日のうちに
提携農家から毎朝届く野菜を、ロスなく使い切る献立に。鮮度が味の土台です。
器も、空間も、ごちそう
地元作家の器と、季節の設え。料理が運ばれる前から、食事は始まっています。
- パターン名: Features — EX05 Alternating Rows
- 概要: Two alternating image and text feature rows.
- 使用目的: Features領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
- 適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
- レイアウト構造: Group / Columns / Heading / Paragraph / Buttons を中心とした標準ブロック構成、推奨コンテンツ幅 1180px
- メリット: ブロック単位で差し替えやすく、商用サイト制作時に構成案として再利用しやすい。
- デメリット: 実案件ではブランドトーン、原稿量、画像比率に合わせて余白とカラム幅の再調整が必要。
- バリエーション案: 配色をブランドカラーへ寄せた強調版 / 情報密度を上げたコーポレート版 / モバイル特化の単列・短文版
- 実装時の注意点: 独自HTMLブロック化せず、Group/Columns/Cover/List/ButtonなどのGutenberg標準ブロックとして編集する。ボタン、画像、余白、色はWordPressの保存HTMLと一致する属性で調整する。
HTML:
<!-- wp:pattern {"slug":"tf-premium/features-ex05-alternating"} /-->
CSS:
.section-features-ex05-alternating { max-width: 1200px; margin-inline: auto; }
JS:
document.querySelectorAll('.section-features-ex05-alternating').forEach((el) => el.dataset.ready = 'true');
10
Features — EX06 Numbers Band
features-ex06-stats-band
創業 38 年
地域での歴史
12,000 件
累計ご対応
97.8%
ご紹介・リピート率
有資格者 9 名
専門スタッフ体制
- パターン名: Features — EX06 Numbers Band
- 概要: Four trust numbers in a dark band.
- 使用目的: Features領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
- 適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
- レイアウト構造: Group / Columns / Heading / Paragraph / Buttons を中心とした標準ブロック構成、推奨コンテンツ幅 1180px
- メリット: ブロック単位で差し替えやすく、商用サイト制作時に構成案として再利用しやすい。
- デメリット: 実案件ではブランドトーン、原稿量、画像比率に合わせて余白とカラム幅の再調整が必要。
- バリエーション案: 配色をブランドカラーへ寄せた強調版 / 情報密度を上げたコーポレート版 / モバイル特化の単列・短文版
- 実装時の注意点: 独自HTMLブロック化せず、Group/Columns/Cover/List/ButtonなどのGutenberg標準ブロックとして編集する。ボタン、画像、余白、色はWordPressの保存HTMLと一致する属性で調整する。
HTML:
<!-- wp:pattern {"slug":"tf-premium/features-ex06-stats-band"} /-->
CSS:
.section-features-ex06-stats-band { max-width: 1200px; margin-inline: auto; }
JS:
document.querySelectorAll('.section-features-ex06-stats-band').forEach((el) => el.dataset.ready = 'true');
11
Features — EX07 Us versus Typical
features-ex07-compare
よくあるサービスとの違い
一般的なサービス
- 担当が毎回変わる
- 追加費用が後から判明
- 納品して終わり
当店の場合
✓ 専任担当が一貫対応
✓ 総額を最初に確定
✓ 1 年間の無償フォロー
- パターン名: Features — EX07 Us versus Typical
- 概要: Comparison columns: typical service versus this brand.
- 使用目的: Features領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
- 適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
- レイアウト構造: Group / Columns / Heading / Paragraph / Buttons を中心とした標準ブロック構成、推奨コンテンツ幅 1180px
- メリット: ブロック単位で差し替えやすく、商用サイト制作時に構成案として再利用しやすい。
- デメリット: 実案件ではブランドトーン、原稿量、画像比率に合わせて余白とカラム幅の再調整が必要。
- バリエーション案: 配色をブランドカラーへ寄せた強調版 / 情報密度を上げたコーポレート版 / モバイル特化の単列・短文版
- 実装時の注意点: 独自HTMLブロック化せず、Group/Columns/Cover/List/ButtonなどのGutenberg標準ブロックとして編集する。ボタン、画像、余白、色はWordPressの保存HTMLと一致する属性で調整する。
HTML:
<!-- wp:pattern {"slug":"tf-premium/features-ex07-compare"} /-->
CSS:
.section-features-ex07-compare { max-width: 1200px; margin-inline: auto; }
JS:
document.querySelectorAll('.section-features-ex07-compare').forEach((el) => el.dataset.ready = 'true');
12
Features — EX08 Photo Feature Cards
features-ex08-photo-cards
私たちのこだわり
道具を育てる
毎晩の手入れを欠かさない道具たち。切れ味は仕事の誠実さです。
対話から始める
注文の前に、暮らしの話を。最適な提案は理解から生まれます。
直す前提でつくる
壊れたら直して、また使う。修理しやすい構造で長く寄り添います。
- パターン名: Features — EX08 Photo Feature Cards
- 概要: Three feature cards led by photos.
- 使用目的: Features領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
- 適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
- レイアウト構造: Group / Columns / Heading / Paragraph / Buttons を中心とした標準ブロック構成、推奨コンテンツ幅 1180px
- メリット: ブロック単位で差し替えやすく、商用サイト制作時に構成案として再利用しやすい。
- デメリット: 実案件ではブランドトーン、原稿量、画像比率に合わせて余白とカラム幅の再調整が必要。
- バリエーション案: 配色をブランドカラーへ寄せた強調版 / 情報密度を上げたコーポレート版 / モバイル特化の単列・短文版
- 実装時の注意点: 独自HTMLブロック化せず、Group/Columns/Cover/List/ButtonなどのGutenberg標準ブロックとして編集する。ボタン、画像、余白、色はWordPressの保存HTMLと一致する属性で調整する。
HTML:
<!-- wp:pattern {"slug":"tf-premium/features-ex08-photo-cards"} /-->
CSS:
.section-features-ex08-photo-cards { max-width: 1200px; margin-inline: auto; }
JS:
document.querySelectorAll('.section-features-ex08-photo-cards').forEach((el) => el.dataset.ready = 'true');
13
Features — EX09 Brand Promise Vertical
features-ex09-promise
三つの約束
一、ごまかさないこと。
一、急がせないこと。
一、長く付き合うこと。
創業のときから、店の柱に貼ってある言葉です。
- パターン名: Features — EX09 Brand Promise Vertical
- 概要: Quiet vertical brand promise statement with three short vows.
- 使用目的: Features領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
- 適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
- レイアウト構造: Group / Columns / Heading / Paragraph / Buttons を中心とした標準ブロック構成、推奨コンテンツ幅 1180px
- メリット: ブロック単位で差し替えやすく、商用サイト制作時に構成案として再利用しやすい。
- デメリット: 実案件ではブランドトーン、原稿量、画像比率に合わせて余白とカラム幅の再調整が必要。
- バリエーション案: 配色をブランドカラーへ寄せた強調版 / 情報密度を上げたコーポレート版 / モバイル特化の単列・短文版
- 実装時の注意点: 独自HTMLブロック化せず、Group/Columns/Cover/List/ButtonなどのGutenberg標準ブロックとして編集する。ボタン、画像、余白、色はWordPressの保存HTMLと一致する属性で調整する。
HTML:
<!-- wp:pattern {"slug":"tf-premium/features-ex09-promise"} /-->
CSS:
.section-features-ex09-promise { max-width: 1200px; margin-inline: auto; }
JS:
document.querySelectorAll('.section-features-ex09-promise').forEach((el) => el.dataset.ready = 'true');
14
Features — EX10 Guarantee Banner
features-ex10-guarantee
🏅
仕上がり満足保証
仕上がりにご満足いただけなければ、1 週間以内のお直しは無料。
それでもご納得いただけない場合は、料金を全額お返しします。
- パターン名: Features — EX10 Guarantee Banner
- 概要: Guarantee banner with badge feel and terms note.
- 使用目的: Features領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
- 適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
- レイアウト構造: Group / Columns / Heading / Paragraph / Buttons を中心とした標準ブロック構成、推奨コンテンツ幅 1180px
- メリット: ブロック単位で差し替えやすく、商用サイト制作時に構成案として再利用しやすい。
- デメリット: 実案件ではブランドトーン、原稿量、画像比率に合わせて余白とカラム幅の再調整が必要。
- バリエーション案: 配色をブランドカラーへ寄せた強調版 / 情報密度を上げたコーポレート版 / モバイル特化の単列・短文版
- 実装時の注意点: 独自HTMLブロック化せず、Group/Columns/Cover/List/ButtonなどのGutenberg標準ブロックとして編集する。ボタン、画像、余白、色はWordPressの保存HTMLと一致する属性で調整する。
HTML:
<!-- wp:pattern {"slug":"tf-premium/features-ex10-guarantee"} /-->
CSS:
.section-features-ex10-guarantee { max-width: 1200px; margin-inline: auto; }
JS:
document.querySelectorAll('.section-features-ex10-guarantee').forEach((el) => el.dataset.ready = 'true');