ヒーローセクション

あなたが学ぶこと

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

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

  • タイトル、オーバーレイ、間隔の設定方法

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

🧩 セクション概要

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]

  • 💻 ライブチャット： 月〜金、現地時間（EST）10:00〜18:00 に当社ウェブサイトで直接利用可能

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

最終更新