ヒーローセクション

学べること

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

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

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

  • 最大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つのボタン。各ボタンには以下が含まれます：

コンテンツとデータ

  • ボタンテキスト：例： コレクションを見る（SHOP COLLECTION）

  • ボタンリンク：内部または外部の任意のURLを貼り付けてください

色

  • 背景色：例： #FFFFFF)

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

スタイリング

  • 角丸：角丸の半径はで調整 px

⚠️ ボタン制限: ヒーローセクションにはボタンを最大2つしか追加できません。

🧩 セクションツリーの例

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

ヘルプが必要ですか？

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

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

  • 💻 ライブチャット： 月曜〜金曜、午前10時〜午後6時（EST）に当社ウェブサイトで直接利用可能

前へFAQ セクション次へ画像セレクターセクション

最終更新