バナー / アラート · Banner / Alert · Blanc Nail
検索…
カタログ 統計
CATALOG › UI Components › Banner / Alert
バナー / アラート
上部バナー、トップバー、警告、お知らせ表示。
3
Patterns
UI Components
Group
isValid=0
Verified
CSS
Animation
01
Banner — Top Gradient Announcement
banner-announcement-top
🎉 新機能リリース！全ユーザー向けに AI 検索が利用可能に — 詳しく見る ↗
- パターン名: Banner — Top Gradient Announcement
- 概要: Slim full-width announcement bar with gradient background.
- 使用目的: Banner / Alert領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
- 適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
- レイアウト構造: 縦積みの情報整理構造、幅配分 auto、推奨コンテンツ幅 1240px、主要ブロック group, paragraph
- メリット: ブロック単位で差し替えやすく、商用サイト制作時に構成案として再利用しやすい。
- デメリット: 実案件ではブランドトーン、原稿量、画像比率に合わせて余白とカラム幅の再調整が必要。
- バリエーション案: Banner / Alertをミニマルに見せる余白重視版 / Banner / Alertをリッチに見せるカバー/カード強調版 / Banner / Alertをコーポレート向けに整える情報密度高め版 / Banner / Alertをカジュアルに見せるアイコン/ラベル強調版
- 実装時の注意点: 独自HTMLブロック化せず、Group/Columns/Cover/List/ButtonなどのGutenberg標準ブロックとして編集する。ボタン、画像、余白、色はWordPressの保存HTMLと一致する属性で調整する。
HTML:
<!-- wp:pattern {"slug":"tf-premium/banner-announcement-top"} /-->
CSS:
.section-banner-announcement-top { max-width: 1200px; margin-inline: auto; }
JS:
document.querySelectorAll('.section-banner-announcement-top').forEach((el) => el.dataset.ready = 'true');
02
Banner — Promo CTA Card
banner-cta-promo
期間限定 ・ 〜5/31
年額プランが 30% OFF
年間契約への切り替えで、即座に割引が適用されます。
- パターン名: Banner — Promo CTA Card
- 概要: Yellow-orange gradient promo card with copy on the left and CTA on the right.
- 使用目的: Banner / Alert領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
- 適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
- レイアウト構造: 縦積みの情報整理構造、幅配分 auto、推奨コンテンツ幅 1080px、主要ブロック group, group, group, paragraph, heading, paragraph, buttons, button
- メリット: ブロック単位で差し替えやすく、商用サイト制作時に構成案として再利用しやすい。
- デメリット: 実案件ではブランドトーン、原稿量、画像比率に合わせて余白とカラム幅の再調整が必要。
- バリエーション案: Banner / Alertをリッチに見せるカバー/カード強調版 / Banner / Alertをコーポレート向けに整える情報密度高め版 / Banner / Alertをカジュアルに見せるアイコン/ラベル強調版 / Banner / Alertをモバイル特化にした単列・短文版
- 実装時の注意点: 独自HTMLブロック化せず、Group/Columns/Cover/List/ButtonなどのGutenberg標準ブロックとして編集する。ボタン、画像、余白、色はWordPressの保存HTMLと一致する属性で調整する。
HTML:
<!-- wp:pattern {"slug":"tf-premium/banner-cta-promo"} /-->
CSS:
.section-banner-cta-promo { max-width: 1200px; margin-inline: auto; }
JS:
document.querySelectorAll('.section-banner-cta-promo').forEach((el) => el.dataset.ready = 'true');
03
Banner — Inline Alerts (Success / Warn / Error / Info)
banner-inline-alerts
✓ 完了しました
変更内容が正常に保存されました。続けて編集を行えます。
⚠ ご注意ください
未保存の変更があります。ページを離れる前に保存してください。
✕ エラー
処理に失敗しました。少し時間をおいて再試行してください。
ⓘ お知らせ
5/1〜5/3 はメンテナンスのため一部機能を停止します。
- パターン名: Banner — Inline Alerts (Success / Warn / Error / Info)
- 概要: Four inline alert variants with left-border accent — success, warning, error, info.
- 使用目的: Banner / Alert領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
- 適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
- レイアウト構造: 縦積みの情報整理構造、幅配分 4px / 4px / 4px / 4px、推奨コンテンツ幅 880px、主要ブロック group, group, group, paragraph, paragraph, group, paragraph, paragraph
- メリット: ブロック単位で差し替えやすく、商用サイト制作時に構成案として再利用しやすい。
- デメリット: 実案件ではブランドトーン、原稿量、画像比率に合わせて余白とカラム幅の再調整が必要。
- バリエーション案: Banner / Alertをミニマルに見せる余白重視版 / Banner / Alertをリッチに見せるカバー/カード強調版 / Banner / Alertをコーポレート向けに整える情報密度高め版 / Banner / Alertをカジュアルに見せるアイコン/ラベル強調版
- 実装時の注意点: 独自HTMLブロック化せず、Group/Columns/Cover/List/ButtonなどのGutenberg標準ブロックとして編集する。ボタン、画像、余白、色はWordPressの保存HTMLと一致する属性で調整する。
HTML:
<!-- wp:pattern {"slug":"tf-premium/banner-inline-alerts"} /-->
CSS:
.section-banner-inline-alerts { max-width: 1200px; margin-inline: auto; }
JS:
document.querySelectorAll('.section-banner-inline-alerts').forEach((el) => el.dataset.ready = 'true');