ヒーローセクション

学べること

• ヒーローセクションの追加とカスタマイズ方法

• 画像と動画の背景を切り替える方法

• タイトル、オーバーレイ、余白の設定方法

• 最大2つのコールトゥアクションボタンの追加とスタイル設定方法

---

🧩 セクション概要

Plain Jane テーマのヒーローセクションは、ストアフロントで強い第一印象を与えるためのフル幅バナーです。画像または自動再生の動画をタイトルと最大2つのコールトゥアクションボタンとともに表示できます。

💡 ヒント: 最良の結果を得るには、高品質の画像または10MB未満の短い無音ループ動画を使用してください。

---

⚙️ ヒーローセクションの追加とカスタマイズ方法

1. セクションを追加する

• Shopify の テーマエディターで、あなたの ホームページ

• クリック： セクションを追加 を開き、 ヒーロー

• を選択します。レイアウトの先頭にドラッグします（任意）

2. 背景メディアをアップロードする

の下で コンテンツとデータ:

• メディアタイプ： 選択 画像 または ビデオ

• 画像：あなたの 最初の画像

• 2番目の画像（任意）：有効にした場合のモバイルフォールバックに使用されます

• ビデオ：アップロード .mp4 形式のみ；自動再生はミュートされます

⚠️ 警告: iPhone が低電力モードになっている場合、動画の自動再生が無効になることがあります。

---

🖋️ テキストとレイアウト設定

タイトル

• ヒーロータイトル：メッセージを追加します（例：「NEW ARRIVALS」）

レイアウトと表示

• ヒーロー高さ：次から選択します 50%, 75%、または ビューポート高さの100％

• モバイルで動画の代わりに画像を使用：モバイル動画を上書きするにはONに切り替えます

• モバイルで画像を1枚だけ表示：レイアウトと速度の制御に役立ちます

• モバイル画像選択：表示する画像を選択します

コンテンツ位置

• テキストとボタンを次に設定します：

  • 左上

  • 中央上

  • 中央

  • 左下

  • 右下

---

🎨 タイポグラフィ、色、スタイリング

タイポグラフィ

• フォントウェイト：次から選択します レギュラー および ボールド

色

• タイトル色：カスタムの16進カラーを設定します（例： #FFFFFF)

オーバーレイ

• 上/下のオーバーレイ：可読性のためのオプショングラデーション

• 設定：

  • オーバーレイ色

  • スライダーでオーバーレイの高さ（％）

💡 ヒント: 半透明の黒（#000000 を40%にしてテキストを際立たせます。

---

📦 余白

デスクトップとモバイルで余白を個別にカスタマイズします：

plaintextCopyEditTop 余白（デスクトップ）：0px
余白（デスクトップの下）：20px
余白（モバイルの上）：0px
余白（モバイルの下）：16px

---

🔘 ボタン

最大 2つのボタンを追加できます。各ボタンには以下が含まれます：

コンテンツとデータ

• ボタンテキスト：例： コレクションを購入

• ボタンリンク：内部または外部のURLを貼り付けます

色

• 背景色：（例： #FFFFFF)

• テキスト色：（例： #000000)

スタイリング

• 角を丸くする：ボーダー半径をで調整します px

⚠️ ボタン制限：ヒーローセクションごとに追加できるボタンは2つまでです。

---

🧩 セクショントリーの例

ヒーロー
├── ボタン 
└── ボタン 

---

ヘルプが必要ですか？

• 💬 Discordでコミュニティに参加： https://discord.gg/hcc2GvgZc6

• 📧 メールでお問い合わせ： [email protected]

• 💻 ライブチャット： 月〜金、現地時間午前10時〜午後6時（EST）に当社ウェブサイトで直接対応