ヒーローセクション
学べること
ヒーローセクションの追加とカスタマイズ方法
画像と動画の背景を切り替える方法
タイトル、オーバーレイ、余白の設定方法
最大2つのコールトゥアクションボタンの追加とスタイル設定方法
🧩 セクション概要
Plain Jane テーマのヒーローセクションは、ストアフロントで強い第一印象を与えるためのフル幅バナーです。画像または自動再生の動画をタイトルと最大2つのコールトゥアクションボタンとともに表示できます。
💡 ヒント: 最良の結果を得るには、高品質の画像または10MB未満の短い無音ループ動画を使用してください。
⚙️ ヒーローセクションの追加とカスタマイズ方法
1. セクションを追加する
Shopify の テーマエディターで、あなたの ホームページ
クリック： セクションを追加 を開き、 ヒーロー
を選択します。レイアウトの先頭にドラッグします（任意）
2. 背景メディアをアップロードする
の下で コンテンツとデータ:
メディアタイプ： 選択
画像またはビデオ画像：あなたの 最初の画像
2番目の画像（任意）：有効にした場合のモバイルフォールバックに使用されます
ビデオ：アップロード
.mp4形式のみ；自動再生はミュートされます
⚠️ 警告: iPhone が低電力モードになっている場合、動画の自動再生が無効になることがあります。
🖋️ テキストとレイアウト設定
タイトル
ヒーロータイトル：メッセージを追加します（例：「NEW ARRIVALS」）
レイアウトと表示
ヒーロー高さ：次から選択します
50%,75%、またはビューポート高さの100％モバイルで動画の代わりに画像を使用：モバイル動画を上書きするにはONに切り替えます
モバイルで画像を1枚だけ表示：レイアウトと速度の制御に役立ちます
モバイル画像選択：表示する画像を選択します
コンテンツ位置
テキストとボタンを次に設定します：
左上中央上中央左下右下
🎨 タイポグラフィ、色、スタイリング
タイポグラフィ
フォントウェイト：次から選択します
レギュラーおよびボールド
色
タイトル色：カスタムの16進カラーを設定します（例：
#FFFFFF)
オーバーレイ
上/下のオーバーレイ：可読性のためのオプショングラデーション
設定：
オーバーレイ色
スライダーでオーバーレイの高さ（％）
💡 ヒント: 半透明の黒（
#000000を40%にしてテキストを際立たせます。
📦 余白
デスクトップとモバイルで余白を個別にカスタマイズします：
🔘 ボタン
最大 2つのボタンを追加できます。各ボタンには以下が含まれます：
コンテンツとデータ
ボタンテキスト：例：
コレクションを購入ボタンリンク：内部または外部のURLを貼り付けます
色
背景色：（例：
#FFFFFF)テキスト色：（例：
#000000)
スタイリング
角を丸くする：ボーダー半径をで調整します
px
⚠️ ボタン制限：ヒーローセクションごとに追加できるボタンは2つまでです。
🧩 セクショントリーの例
ヘルプが必要ですか？
💬 Discordでコミュニティに参加： https://discord.gg/hcc2GvgZc6
📧 メールでお問い合わせ： support@openspaces.design
💻 ライブチャット： 月〜金、現地時間午前10時〜午後6時（EST）に当社ウェブサイトで直接対応
最終更新