バナー
ページ上部でよく使われる、大判の注目コンポーネントです。
はじめに
バナー はページの大きな注目要素です。通常は全幅を占める画像で、その上に目立つタイトルがあり、必要に応じて導入テキストとアクション（ボタン/リンク）を備えます。
すべてのコンポーネントに共通する仕組みに従います。詳細は概要とコンポーネントの種類を参照してください。
フィールド
共通フィールド（種類、順序、編集モード、背景反転、アクション）に加えて、バナーには次のものがあります。
| フィールド | 説明 |
|---|---|
タイトル (title) | 画像上の強調タイトル。 |
コンテンツ (content / html_content) | タイトルの下の導入テキスト。 |
画像 (image) | バナーの背景画像。 |
画像代替テキスト (image_alt) | アクセシビリティとSEOのための画像代替テキスト。 |
画像タイトル (image_title) | 画像の title 属性。 |
X位置 / Y位置 (position_x, position_y) | 背景画像のフォーカス（background-position）をパーセントで調整します。 |
画像の位置
X位置 と Y位置 フィールドは、バナーがさまざまな解像度でサイズ変更されても、背景画像のどの部分を常に表示するかを制御します。CSS の background-position と同じ原理です。
たとえば、50% / 50% は画像の中央にフォーカスを合わせます。どの解像度でも画像の中央が表示されたままになり、必要に応じて端が切り取られます。
利用可能なタイプ
現在、バナーには3つのタイプがあります。
- 標準 (
Default) — タイトル、コンテンツ、アクションを備えた基本レイアウト。 - セカンダリ (
Secondary) — 標準とは見た目が異なります（CSS/LESS 独自スタイル）が、フィールド構造は同じです。 - 標準（強調付き） (
DefaultSubBanner) — より控えめなバリエーションで、アクションをサポートしません（config.jsonのaction: false）。
タイプの仕組みと新しいタイプの作成方法の詳細は、コンポーネントの種類を参照してください。
次のステップ
コンテンツに進みます。