# ヒーローセクション
### **学べること**
* ヒーローセクションの追加とカスタマイズ方法
* 画像と動画の背景を切り替える方法
* タイトル、オーバーレイ、余白の設定方法
* 最大2つのコールトゥアクションボタンの追加とスタイル設定方法
***
### 🧩 セクション概要
Plain Jane テーマのヒーローセクションは、ストアフロントで強い第一印象を与えるためのフル幅バナーです。画像または自動再生の動画をタイトルと最大2つのコールトゥアクションボタンとともに表示できます。
> 💡 ヒント: 最良の結果を得るには、高品質の画像または10MB未満の短い無音ループ動画を使用してください。
***
### ⚙️ ヒーローセクションの追加とカスタマイズ方法
#### 1. セクションを追加する
* Shopify の **テーマエディター**で、あなたの **ホームページ**
* クリック： **セクションを追加** を開き、 **ヒーロー**
* を選択します。レイアウトの先頭にドラッグします（任意）
#### 2. 背景メディアをアップロードする
の下で **コンテンツとデータ**:
* **メディアタイプ**： 選択 `画像` または `ビデオ`
* **画像**：あなたの **最初の画像**
* **2番目の画像（任意）**：有効にした場合のモバイルフォールバックに使用されます
* **ビデオ**：アップロード `.mp4` 形式のみ；自動再生はミュートされます
> ⚠️ 警告: iPhone が低電力モードになっている場合、動画の自動再生が無効になることがあります。
***
### 🖋️ テキストとレイアウト設定
#### タイトル
* **ヒーロータイトル**：メッセージを追加します（例：「NEW ARRIVALS」）
#### レイアウトと表示
* **ヒーロー高さ**：次から選択します `50%`, `75%`、または `ビューポート高さの100％`
* **モバイルで動画の代わりに画像を使用**：モバイル動画を上書きするにはONに切り替えます
* **モバイルで画像を1枚だけ表示**：レイアウトと速度の制御に役立ちます
* **モバイル画像選択**：表示する画像を選択します
#### コンテンツ位置
* テキストとボタンを次に設定します：
* `左上`
* `中央上`
* `中央`
* `左下`
* `右下`
***
### 🎨 タイポグラフィ、色、スタイリング
#### タイポグラフィ
* **フォントウェイト**：次から選択します `レギュラー` および `ボールド`
#### 色
* **タイトル色**：カスタムの16進カラーを設定します（例： `#FFFFFF`)
#### オーバーレイ
* **上/下のオーバーレイ**：可読性のためのオプショングラデーション
* 設定：
* オーバーレイ色
* スライダーでオーバーレイの高さ（％）
> 💡 ヒント: 半透明の黒（`#000000` を40%にしてテキストを際立たせます。
***
### 📦 余白
デスクトップとモバイルで余白を個別にカスタマイズします：
```plaintext
plaintextCopyEditTop 余白（デスクトップ）：0px
余白（デスクトップの下）：20px
余白（モバイルの上）：0px
余白（モバイルの下）：16px
```
***
### 🔘 ボタン
最大 **2つのボタンを追加できます**。各ボタンには以下が含まれます：
#### コンテンツとデータ
* **ボタンテキスト**：例： `コレクションを購入`
* **ボタンリンク**：内部または外部のURLを貼り付けます
#### 色
* **背景色**：（例： `#FFFFFF`)
* **テキスト色**：（例： `#000000`)
#### スタイリング
* **角を丸くする**：ボーダー半径をで調整します `px`
> ⚠️ ボタン制限：ヒーローセクションごとに追加できるボタンは2つまでです。
***
### 🧩 セクショントリーの例
```
ヒーロー
├── ボタン
└── ボタン
```
***
### **ヘルプが必要ですか？**
* 💬 **Discordでコミュニティに参加：**
* 📧 **メールでお問い合わせ：**
* 💻 **ライブチャット：** 月〜金、現地時間午前10時〜午後6時（EST）に当社ウェブサイトで直接対応
---
# Agent Instructions: Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.
Perform an HTTP GET request on the current page URL with the `ask` query parameter:
```
GET https://docs.openspaces.design/english-ja/readme-1/sections-and-features/hero-section.md?ask=
```
The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.
Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.