# ヒーローセクション ### **学べること** * ヒーローセクションの追加とカスタマイズ方法 * 画像と動画の背景を切り替える方法 * タイトル、オーバーレイ、余白の設定方法 * 最大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）に当社ウェブサイトで直接対応