ブログ / 記事 · Blog · Blanc Nail
検索…
カタログ 統計
CATALOG › Content › Blog
ブログ / 記事
記事一覧、カードグリッド、リード文。コンテンツマーケの起点。
14
Patterns
Content
Group
isValid=0
Verified
CSS
Animation
01
Blog — Featured Post Hero
blog-featured-hero
★ FEATURED POST
2026 年に知っておくべき Web デザインの 7 つのトレンド
AI 統合、マイクロインタラクション、ダークモードの進化まで、2026 年のデザイン界をリードする 7 つの潮流を一挙紹介します。
田中 美咲 ・ 2026.04.20 ・ 読了 8 分
- パターン名: Blog — Featured Post Hero
- 概要: Large two-column featured post with image left, title/excerpt/meta right.
- 使用目的: Blog領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
- 適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
- レイアウト構造: 複数カラムで情報を分割する構造、幅配分 auto、推奨コンテンツ幅 1080px、主要ブロック group, columns, column, image, column, paragraph, heading, paragraph
- メリット: ブロック単位で差し替えやすく、商用サイト制作時に構成案として再利用しやすい。
- デメリット: 実案件ではブランドトーン、原稿量、画像比率に合わせて余白とカラム幅の再調整が必要。
- バリエーション案: Blogをミニマルに見せる余白重視版 / Blogをリッチに見せるカバー/カード強調版 / Blogをコーポレート向けに整える情報密度高め版 / Blogをカジュアルに見せるアイコン/ラベル強調版
- 実装時の注意点: 独自HTMLブロック化せず、Group/Columns/Cover/List/ButtonなどのGutenberg標準ブロックとして編集する。ボタン、画像、余白、色はWordPressの保存HTMLと一致する属性で調整する。
HTML:
<!-- wp:pattern {"slug":"tf-premium/blog-featured-hero"} /-->
CSS:
.section-blog-featured-hero { max-width: 1200px; margin-inline: auto; }
JS:
document.querySelectorAll('.section-blog-featured-hero').forEach((el) => el.dataset.ready = 'true');
02
Blog — Featured + Stacked List
blog-featured-split
FEATURED & LATEST
編集部のおすすめ
✨
FEATURED ・ CASE STUDY
3 ヶ月で MAU を 4 倍にした、SaaS 立ち上げの全記録
アイデアからローンチまで 90 日。検証・実装・グロースの判断基準を、振り返りながら共有します。
編集部 ・ 12 min read ・ 2026.04.20
PRODUCT ・ 4 min
機能をリリースする前に、必ず聞く 3 つの問い
TEAM ・ 6 min
フルリモート 30 名でも壊れないドキュメント文化
DESIGN ・ 5 min
ダークモードで読みやすさを失わないコントラスト設計
GROWTH ・ 8 min
SEO とコンテンツマーケの境目が消えた話
- パターン名: Blog — Featured + Stacked List
- 概要: A large featured post on the left and a stacked list of recent posts on the right.
- 使用目的: Blog領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
- 適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
- レイアウト構造: カバー領域とカラム分割を組み合わせた構造、幅配分 58% / 42%、推奨コンテンツ幅 1180px、主要ブロック group, paragraph, heading, columns, column, group, cover, paragraph
- メリット: ブロック単位で差し替えやすく、商用サイト制作時に構成案として再利用しやすい。
- デメリット: 実案件ではブランドトーン、原稿量、画像比率に合わせて余白とカラム幅の再調整が必要。
- バリエーション案: Blogをミニマルに見せる余白重視版 / Blogをリッチに見せるカバー/カード強調版 / Blogをコーポレート向けに整える情報密度高め版 / Blogをカジュアルに見せるアイコン/ラベル強調版
- 実装時の注意点: 独自HTMLブロック化せず、Group/Columns/Cover/List/ButtonなどのGutenberg標準ブロックとして編集する。ボタン、画像、余白、色はWordPressの保存HTMLと一致する属性で調整する。
HTML:
<!-- wp:pattern {"slug":"tf-premium/blog-featured-split"} /-->
CSS:
.section-blog-featured-split { max-width: 1200px; margin-inline: auto; }
JS:
document.querySelectorAll('.section-blog-featured-split').forEach((el) => el.dataset.ready = 'true');
03
Blog — 3-Column Grid with Covers
blog-grid-3col
JOURNAL
最新の記事
📐
DESIGN ・ 5 min read
2026 年に注目すべき UI トレンド 7 選
グラスモーフィズムからベント・グリッドまで、今年デザイナーが押さえておくべき潮流をまとめました。
⚡
PERFORMANCE ・ 7 min read
Core Web Vitals を満点にする 5 つの実践
LCP・FID・CLS を全部グリーンにした実例と、明日から取り組めるチェックリスト。
🧠
AI ・ 4 min read
プロンプトより設計が大事になる時代
LLM をプロダクトに組み込むときに、最も差がつくのは UI 設計と評価設計でした。
- パターン名: Blog — 3-Column Grid with Covers
- 概要: Three blog cards with colored cover, category badge and read-time meta.
- 使用目的: Blog領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
- 適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
- レイアウト構造: カバー領域とカラム分割を組み合わせた構造、幅配分 1px / 1px / 1px、推奨コンテンツ幅 1180px、主要ブロック group, group, group, paragraph, heading, buttons, button, columns
- メリット: ブロック単位で差し替えやすく、商用サイト制作時に構成案として再利用しやすい。
- デメリット: 実案件ではブランドトーン、原稿量、画像比率に合わせて余白とカラム幅の再調整が必要。
- バリエーション案: Blogをリッチに見せるカバー/カード強調版 / Blogをコーポレート向けに整える情報密度高め版 / Blogをカジュアルに見せるアイコン/ラベル強調版 / Blogをモバイル特化にした単列・短文版
- 実装時の注意点: 独自HTMLブロック化せず、Group/Columns/Cover/List/ButtonなどのGutenberg標準ブロックとして編集する。ボタン、画像、余白、色はWordPressの保存HTMLと一致する属性で調整する。
HTML:
<!-- wp:pattern {"slug":"tf-premium/blog-grid-3col"} /-->
CSS:
.section-blog-grid-3col { max-width: 1200px; margin-inline: auto; }
JS:
document.querySelectorAll('.section-blog-grid-3col').forEach((el) => el.dataset.ready = 'true');
04
Blog — Inline Newsletter Signup
blog-newsletter-inline
📧
週 1 本、デザインの学びをお届け
無料ニュースレター。登録 1,200 名超。いつでも解除可能。
- パターン名: Blog — Inline Newsletter Signup
- 概要: Warm gradient inline newsletter signup block to embed mid-article.
- 使用目的: Blog領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
- 適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
- レイアウト構造: 縦積みの情報整理構造、幅配分 auto、推奨コンテンツ幅 640px、主要ブロック group, paragraph, heading, paragraph, buttons, button
- メリット: ブロック単位で差し替えやすく、商用サイト制作時に構成案として再利用しやすい。
- デメリット: 実案件ではブランドトーン、原稿量、画像比率に合わせて余白とカラム幅の再調整が必要。
- バリエーション案: Blogをミニマルに見せる余白重視版 / Blogをリッチに見せるカバー/カード強調版 / Blogをコーポレート向けに整える情報密度高め版 / Blogをカジュアルに見せるアイコン/ラベル強調版
- 実装時の注意点: 独自HTMLブロック化せず、Group/Columns/Cover/List/ButtonなどのGutenberg標準ブロックとして編集する。ボタン、画像、余白、色はWordPressの保存HTMLと一致する属性で調整する。
HTML:
<!-- wp:pattern {"slug":"tf-premium/blog-newsletter-inline"} /-->
CSS:
.section-blog-newsletter-inline { max-width: 1200px; margin-inline: auto; }
JS:
document.querySelectorAll('.section-blog-newsletter-inline').forEach((el) => el.dataset.ready = 'true');
05
Blog — EX01 Three Article Cards
blog-ex01-3col-cards
最新の記事
お知らせ
夏季限定メニューの販売を開始しました
2026.06.01
読みもの
産地を訪ねて — 生産者インタビュー前編
2026.05.24
イベント
7月のワークショップ参加者を募集します
2026.05.18
- パターン名: Blog — EX01 Three Article Cards
- 概要: Three article cards with image, category chip, title and date.
- 使用目的: Blog領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
- 適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
- レイアウト構造: Group / Columns / Heading / Paragraph / Buttons を中心とした標準ブロック構成、推奨コンテンツ幅 1180px
- メリット: ブロック単位で差し替えやすく、商用サイト制作時に構成案として再利用しやすい。
- デメリット: 実案件ではブランドトーン、原稿量、画像比率に合わせて余白とカラム幅の再調整が必要。
- バリエーション案: 配色をブランドカラーへ寄せた強調版 / 情報密度を上げたコーポレート版 / モバイル特化の単列・短文版
- 実装時の注意点: 独自HTMLブロック化せず、Group/Columns/Cover/List/ButtonなどのGutenberg標準ブロックとして編集する。ボタン、画像、余白、色はWordPressの保存HTMLと一致する属性で調整する。
HTML:
<!-- wp:pattern {"slug":"tf-premium/blog-ex01-3col-cards"} /-->
CSS:
.section-blog-ex01-3col-cards { max-width: 1200px; margin-inline: auto; }
JS:
document.querySelectorAll('.section-blog-ex01-3col-cards').forEach((el) => el.dataset.ready = 'true');
06
Blog — EX02 Featured plus List
blog-ex02-featured-list
10 年使える道具の選び方 — 完全保存版
買い替えを繰り返す前に知ってほしい、素材と構造の見極め方をまとめました。
RECENT
梅雨どきのお手入れ、3 つの基本
2026.06.05
スタッフが選ぶ、今月の一冊
2026.05.29
工房の一日 — 開店前の 2 時間
2026.05.16
- パターン名: Blog — EX02 Featured plus List
- 概要: One featured article beside a compact list of recent titles.
- 使用目的: Blog領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
- 適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
- レイアウト構造: Group / Columns / Heading / Paragraph / Buttons を中心とした標準ブロック構成、推奨コンテンツ幅 1180px
- メリット: ブロック単位で差し替えやすく、商用サイト制作時に構成案として再利用しやすい。
- デメリット: 実案件ではブランドトーン、原稿量、画像比率に合わせて余白とカラム幅の再調整が必要。
- バリエーション案: 配色をブランドカラーへ寄せた強調版 / 情報密度を上げたコーポレート版 / モバイル特化の単列・短文版
- 実装時の注意点: 独自HTMLブロック化せず、Group/Columns/Cover/List/ButtonなどのGutenberg標準ブロックとして編集する。ボタン、画像、余白、色はWordPressの保存HTMLと一致する属性で調整する。
HTML:
<!-- wp:pattern {"slug":"tf-premium/blog-ex02-featured-list"} /-->
CSS:
.section-blog-ex02-featured-list { max-width: 1200px; margin-inline: auto; }
JS:
document.querySelectorAll('.section-blog-ex02-featured-list').forEach((el) => el.dataset.ready = 'true');
07
Blog — EX03 Minimal Date List
blog-ex03-minimal-list
お知らせ
2026.06.10
夏季休業のお知らせ(8/13 — 8/16)
2026.06.02
地元紙「example新聞」に掲載されました
2026.05.20
オンラインストアの送料を改定しました
- パターン名: Blog — EX03 Minimal Date List
- 概要: Plain news list: date, category and title rows.
- 使用目的: Blog領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
- 適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
- レイアウト構造: Group / Columns / Heading / Paragraph / Buttons を中心とした標準ブロック構成、推奨コンテンツ幅 1180px
- メリット: ブロック単位で差し替えやすく、商用サイト制作時に構成案として再利用しやすい。
- デメリット: 実案件ではブランドトーン、原稿量、画像比率に合わせて余白とカラム幅の再調整が必要。
- バリエーション案: 配色をブランドカラーへ寄せた強調版 / 情報密度を上げたコーポレート版 / モバイル特化の単列・短文版
- 実装時の注意点: 独自HTMLブロック化せず、Group/Columns/Cover/List/ButtonなどのGutenberg標準ブロックとして編集する。ボタン、画像、余白、色はWordPressの保存HTMLと一致する属性で調整する。
HTML:
<!-- wp:pattern {"slug":"tf-premium/blog-ex03-minimal-list"} /-->
CSS:
.section-blog-ex03-minimal-list { max-width: 1200px; margin-inline: auto; }
JS:
document.querySelectorAll('.section-blog-ex03-minimal-list').forEach((el) => el.dataset.ready = 'true');
08
Blog — EX04 Dark Magazine Row
blog-ex04-dark-magazine
JOURNAL
ISSUE 22 — SUMMER 2026
FEATURE 01
街の灯りを支える、夜の仕事人たち
終電後の街で働く 5 人を訪ねた、4,000 字のルポルタージュ。
FEATURE 02
捨てない台所 — 残り物の再設計
料理家と考える、冷蔵庫の最後の一品まで使い切る方法。
- パターン名: Blog — EX04 Dark Magazine Row
- 概要: Dark editorial strip with issue number and two story teasers.
- 使用目的: Blog領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
- 適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
- レイアウト構造: Group / Columns / Heading / Paragraph / Buttons を中心とした標準ブロック構成、推奨コンテンツ幅 1180px
- メリット: ブロック単位で差し替えやすく、商用サイト制作時に構成案として再利用しやすい。
- デメリット: 実案件ではブランドトーン、原稿量、画像比率に合わせて余白とカラム幅の再調整が必要。
- バリエーション案: 配色をブランドカラーへ寄せた強調版 / 情報密度を上げたコーポレート版 / モバイル特化の単列・短文版
- 実装時の注意点: 独自HTMLブロック化せず、Group/Columns/Cover/List/ButtonなどのGutenberg標準ブロックとして編集する。ボタン、画像、余白、色はWordPressの保存HTMLと一致する属性で調整する。
HTML:
<!-- wp:pattern {"slug":"tf-premium/blog-ex04-dark-magazine"} /-->
CSS:
.section-blog-ex04-dark-magazine { max-width: 1200px; margin-inline: auto; }
JS:
document.querySelectorAll('.section-blog-ex04-dark-magazine').forEach((el) => el.dataset.ready = 'true');
09
Blog — EX05 Popular Ranking
blog-ex05-ranking
よく読まれている記事
1
初めての方へ — ご利用の流れと料金のすべて
2
プロが教える、失敗しないサイズの測り方
3
お客さまの実例 5 選 — ビフォーアフター付き
- パターン名: Blog — EX05 Popular Ranking
- 概要: Numbered popular-article ranking, top three.
- 使用目的: Blog領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
- 適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
- レイアウト構造: Group / Columns / Heading / Paragraph / Buttons を中心とした標準ブロック構成、推奨コンテンツ幅 1180px
- メリット: ブロック単位で差し替えやすく、商用サイト制作時に構成案として再利用しやすい。
- デメリット: 実案件ではブランドトーン、原稿量、画像比率に合わせて余白とカラム幅の再調整が必要。
- バリエーション案: 配色をブランドカラーへ寄せた強調版 / 情報密度を上げたコーポレート版 / モバイル特化の単列・短文版
- 実装時の注意点: 独自HTMLブロック化せず、Group/Columns/Cover/List/ButtonなどのGutenberg標準ブロックとして編集する。ボタン、画像、余白、色はWordPressの保存HTMLと一致する属性で調整する。
HTML:
<!-- wp:pattern {"slug":"tf-premium/blog-ex05-ranking"} /-->
CSS:
.section-blog-ex05-ranking { max-width: 1200px; margin-inline: auto; }
JS:
document.querySelectorAll('.section-blog-ex05-ranking').forEach((el) => el.dataset.ready = 'true');
10
Blog — EX06 Horizontal Media Rows
blog-ex06-horizontal-cards
コラム ・ 2026.06.08
朝の 10 分でできる、玄関まわりの整え方
帰宅した瞬間の気分は、出かける前の 10 分で決まります。
スタッフ日記 ・ 2026.06.01
新人スタッフ、はじめての仕入れ同行記
市場の朝は早い。先輩の目利きに置いていかれた一日の記録です。
- パターン名: Blog — EX06 Horizontal Media Rows
- 概要: Two horizontal article rows: thumbnail left, text right.
- 使用目的: Blog領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
- 適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
- レイアウト構造: Group / Columns / Heading / Paragraph / Buttons を中心とした標準ブロック構成、推奨コンテンツ幅 1180px
- メリット: ブロック単位で差し替えやすく、商用サイト制作時に構成案として再利用しやすい。
- デメリット: 実案件ではブランドトーン、原稿量、画像比率に合わせて余白とカラム幅の再調整が必要。
- バリエーション案: 配色をブランドカラーへ寄せた強調版 / 情報密度を上げたコーポレート版 / モバイル特化の単列・短文版
- 実装時の注意点: 独自HTMLブロック化せず、Group/Columns/Cover/List/ButtonなどのGutenberg標準ブロックとして編集する。ボタン、画像、余白、色はWordPressの保存HTMLと一致する属性で調整する。
HTML:
<!-- wp:pattern {"slug":"tf-premium/blog-ex06-horizontal-cards"} /-->
CSS:
.section-blog-ex06-horizontal-cards { max-width: 1200px; margin-inline: auto; }
JS:
document.querySelectorAll('.section-blog-ex06-horizontal-cards').forEach((el) => el.dataset.ready = 'true');
11
Blog — EX07 Zen Journal Intro
blog-ex07-zen-journal
読みもの
季節のたより、
月に二度だけ。
最新号「梅雨の養生と、紫陽花の話」を公開しました。
急がない読みものを、お茶の時間にどうぞ。
- パターン名: Blog — EX07 Zen Journal Intro
- 概要: Quiet journal introduction with one seasonal entry teaser.
- 使用目的: Blog領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
- 適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
- レイアウト構造: Group / Columns / Heading / Paragraph / Buttons を中心とした標準ブロック構成、推奨コンテンツ幅 1180px
- メリット: ブロック単位で差し替えやすく、商用サイト制作時に構成案として再利用しやすい。
- デメリット: 実案件ではブランドトーン、原稿量、画像比率に合わせて余白とカラム幅の再調整が必要。
- バリエーション案: 配色をブランドカラーへ寄せた強調版 / 情報密度を上げたコーポレート版 / モバイル特化の単列・短文版
- 実装時の注意点: 独自HTMLブロック化せず、Group/Columns/Cover/List/ButtonなどのGutenberg標準ブロックとして編集する。ボタン、画像、余白、色はWordPressの保存HTMLと一致する属性で調整する。
HTML:
<!-- wp:pattern {"slug":"tf-premium/blog-ex07-zen-journal"} /-->
CSS:
.section-blog-ex07-zen-journal { max-width: 1200px; margin-inline: auto; }
JS:
document.querySelectorAll('.section-blog-ex07-zen-journal').forEach((el) => el.dataset.ready = 'true');
12
Blog — EX08 Category Chips Nav
blog-ex08-category-chips
ブログ
すべて
お知らせ
読みもの
イベント
レシピ
- パターン名: Blog — EX08 Category Chips Nav
- 概要: Category chip row for blog archive heads.
- 使用目的: Blog領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
- 適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
- レイアウト構造: Group / Columns / Heading / Paragraph / Buttons を中心とした標準ブロック構成、推奨コンテンツ幅 1180px
- メリット: ブロック単位で差し替えやすく、商用サイト制作時に構成案として再利用しやすい。
- デメリット: 実案件ではブランドトーン、原稿量、画像比率に合わせて余白とカラム幅の再調整が必要。
- バリエーション案: 配色をブランドカラーへ寄せた強調版 / 情報密度を上げたコーポレート版 / モバイル特化の単列・短文版
- 実装時の注意点: 独自HTMLブロック化せず、Group/Columns/Cover/List/ButtonなどのGutenberg標準ブロックとして編集する。ボタン、画像、余白、色はWordPressの保存HTMLと一致する属性で調整する。
HTML:
<!-- wp:pattern {"slug":"tf-premium/blog-ex08-category-chips"} /-->
CSS:
.section-blog-ex08-category-chips { max-width: 1200px; margin-inline: auto; }
JS:
document.querySelectorAll('.section-blog-ex08-category-chips').forEach((el) => el.dataset.ready = 'true');
13
Blog — EX09 Author Note Card
blog-ex09-author-note
この記事を書いた人
編集部 ・ 田島
暮らしまわりの取材歴 8 年。お茶と文房具の話が長くなりがちです。
- パターン名: Blog — EX09 Author Note Card
- 概要: Article-footer author card with avatar and short profile.
- 使用目的: Blog領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
- 適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
- レイアウト構造: Group / Columns / Heading / Paragraph / Buttons を中心とした標準ブロック構成、推奨コンテンツ幅 1180px
- メリット: ブロック単位で差し替えやすく、商用サイト制作時に構成案として再利用しやすい。
- デメリット: 実案件ではブランドトーン、原稿量、画像比率に合わせて余白とカラム幅の再調整が必要。
- バリエーション案: 配色をブランドカラーへ寄せた強調版 / 情報密度を上げたコーポレート版 / モバイル特化の単列・短文版
- 実装時の注意点: 独自HTMLブロック化せず、Group/Columns/Cover/List/ButtonなどのGutenberg標準ブロックとして編集する。ボタン、画像、余白、色はWordPressの保存HTMLと一致する属性で調整する。
HTML:
<!-- wp:pattern {"slug":"tf-premium/blog-ex09-author-note"} /-->
CSS:
.section-blog-ex09-author-note { max-width: 1200px; margin-inline: auto; }
JS:
document.querySelectorAll('.section-blog-ex09-author-note').forEach((el) => el.dataset.ready = 'true');
14
Blog — EX10 Archive Invitation Band
blog-ex10-archive-cta
過去の記事は 200 本以上
カテゴリやキーワードで、目的の記事を探せます。
- パターン名: Blog — EX10 Archive Invitation Band
- 概要: Closing band inviting readers to the article archive.
- 使用目的: Blog領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
- 適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
- レイアウト構造: Group / Columns / Heading / Paragraph / Buttons を中心とした標準ブロック構成、推奨コンテンツ幅 1180px
- メリット: ブロック単位で差し替えやすく、商用サイト制作時に構成案として再利用しやすい。
- デメリット: 実案件ではブランドトーン、原稿量、画像比率に合わせて余白とカラム幅の再調整が必要。
- バリエーション案: 配色をブランドカラーへ寄せた強調版 / 情報密度を上げたコーポレート版 / モバイル特化の単列・短文版
- 実装時の注意点: 独自HTMLブロック化せず、Group/Columns/Cover/List/ButtonなどのGutenberg標準ブロックとして編集する。ボタン、画像、余白、色はWordPressの保存HTMLと一致する属性で調整する。
HTML:
<!-- wp:pattern {"slug":"tf-premium/blog-ex10-archive-cta"} /-->
CSS:
.section-blog-ex10-archive-cta { max-width: 1200px; margin-inline: auto; }
JS:
document.querySelectorAll('.section-blog-ex10-archive-cta').forEach((el) => el.dataset.ready = 'true');