# Fumadocs UI (the default theme of Fumadocs): バナー URL: /ja/docs/ui/components/banner Source: https://raw.githubusercontent.com/fuma-nama/fumadocs/refs/heads/main/apps/docs/content/docs/ui/components/banner.ja.mdx サイトにバナーを追加します Install to your codebase: ```bash npx @fumadocs/cli@latest add banner ``` ## 使い方 [#usage] この要素をルートレイアウトの最上部に配置します。お知らせの表示などに利用できます。 ```tsx import { Banner } from 'fumadocs-ui/components/banner'; export default function RootLayout({ children }: { children: React.ReactNode }) { return ( {/* [!code ++] */} Hello World {children} ); } ``` ### バリアント [#variant] デフォルトのバリアントを変更します。 ```tsx import { Banner } from 'fumadocs-ui/components/banner'; Hello World; // 色のカスタマイズ Hello World ; ``` ### レイアウトの変更 [#change-layout] デフォルトでは、バナーは `style` タグを使って Fumadocs のレイアウトを調整します(例: サイドバーの高さを縮める)。この動作は次のように無効化できます。 ```tsx import { Banner } from 'fumadocs-ui/components/banner'; Hello World; ``` ### 閉じる [#close] ユーザーがバナーを閉じられるようにするには、バナーに ID を指定します。 ```tsx import { Banner } from 'fumadocs-ui/components/banner'; Hello World; ``` 状態は自動的に永続化されます。