ヒーローセクション

学べること

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

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

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

  • 最大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つまでです。


🧩 セクショントリーの例


ヘルプが必要ですか?

最終更新