ヒーローバナーとは何ですか?
ヒーロー バナーは、Web ページの上部に配置される大きなビジュアル セクションで、通常は見出し、背景画像またはビデオ、CTA ボタンが表示されます。
ヒーローバナー要素について
その ヒーローバナー要素 ウェブページの上部に、魅力的なビジュアルで訪問者の注目を集める、印象的な全幅セクションをデザインできます。さらに、見出し、テキスト ブロック、CTA などの要素を重ねて、バナーをさらに魅力的にすることもできます。
GemPagesを使ってShopifyでヒーローバナーを作成する方法
GemPages で構築したページに Hero Banner 要素を追加するには、次の手順に従います。
- ノーザンダイバー社の GemPagesダッシュボード、対象のページを見つけてエディターを開きます。
- 左側のサイドバー、 メディアの方 セクションにドラッグ＆ドロップして ヒーローバナー 要素を希望の場所に配置します。
- （オプション） インパクトを高めるには、他の要素 (見出し、ボタンなど) をバナーにドラッグします。
- ヒーローバナーをクリックすると、その設定パネルが表示されます。 設定 の三脚と 高機能 タブをクリックします。
設定タブを構成する
レイアウト
コンテンツのレイアウトと配置を選択します。
- 水平位: 左、中央、右
- 縦位置: 上、中央、下、または拡張（高さいっぱいに表示）
経歴
バナーの背景は、次の 3 つのソースのいずれかを使用して設定できます。
- 色圏
- 画像
- ビデオ
色の背景
パレットから色を選択するか、ボックスに 16 進コードを入力して、バナーの希望する背景色を設定します。
画像の背景
バナー画像のソースを変更するには、次の 3 つのオプションがあります。
- 画像をアップロード: このオプションを使用すると、コンピューターからアップロードする画像を選択できます。
- リンク入力: このオプションを使用すると、画像リンクを入力して、ヒーローバナーの画像ソースを変更できます。
- ギャラリーを閲覧: アップロードしたすべての画像が含まれるギャラリーから 1 つの画像を選択できます。
ヒント： 最適な表示のために、 画像 タブ、下 バナーソース セクションで、ヒーローバナーにアップロードされた画像に最適な寸法*を見つけます。
| デスクトップ | 1920×800 px |
| モバイル | 375×200ピクセルまたは375×400ピクセル |
| タブレット | 1024×500 px |
さまざまな画面でヒーローバナーをデザインするには、 この記事.
ビデオの背景
バナーのビデオ背景を設定するときは、次のいずれかのビデオ ソースを選択できます。
ユーチューブ： YouTubeの動画を背景に使用できます。このオプションはYouTubeショートと通常のYouTube動画の両方に対応しているため、コンテンツを柔軟に選択できます。
GemPages で動画を正しく表示するために、動画のサイズをご提供いただくことをおすすめします。この情報により、GemPages はズームレベルを計算し、動画がバナー内に適切に収まるようにすることができます。 一般的なビデオのサイズは次のとおりです。
- 1600:900
- 400:300
- 2100:900
- 100:100
- 900:1600
ビデオホスティング: 動画を自分でホスティングしたい場合は、「動画ホスティング」オプションを選択してください。動画をShopifyにアップロードし、動画のリンクを貼り付けてください。 ウェブリンク 背景として使用するフィールド。
注意： 結果はライブページで確認する必要があります。Shopifyへの動画のアップロード手順については、こちらをご覧ください。 この記事.
掃除機のスイッチを入れます。 「ループビデオ」 ビデオの最後まで再生したら最初から再開するように切り替えます。
オーバーレイ
詳しくはこちら Show more 、そしてヒット 追加... 構成するには：
- 色圏: オーバーレイの色を選択
- 不透明度: 透明度を調整します（値が低いほど透明度が高くなります）
サイズ
バナーの拡大縮小方法を選択します。
- バナーソースとして: 画像のサイズに基づいて自動調整します
- カスタム額装: 幅と高さを手動で設定
コンテンツ
設定：
- 幅（Width）: 内部コンテンツの最大幅を設定する
- パディング: バナー内にスペースを追加する
- 整列: コンテンツを水平に揃える（左、中央、右）
形状
以下を使用して形状をカスタマイズします。
- ボーダー: 境界線スタイルを追加する
- コーナー: 角の丸みを調整する
- Shadow: 奥行きを出すために影の効果を適用する
効果
- ホバー効果: インタラクティブなホバースタイルを追加する
- パララックススクロール （画像のみ）: ユーザーがスクロールすると、階層化された動きで奥行きが加わります。
リンク
オンに切り替えると、リンク セクションを構成できます。
クリック後: ドロップダウンから選択して、訪問者がヒーロー バナーをクリックした後の動作を決定します (ページを開く、スクロールする、ポップアップを開く、メールを送信する、または電話をかける)。
例えば、を選択した場合 にスクロールします オプション、をクリックします 追加... リストから対象のセクションを選択します。
SEO
SEO セクションでは、画像の代替テキストと画像のタイトルを追加して、ページの SEO を強化できます。
整列
ヒーローバナーセクション自体を揃えます。 左派, センターまたは 右。
詳細タブを設定する
より高度なカスタマイズについては、 高機能 タブをクリックし、 この記事.
よくあるご質問
1. ヒーローバナー要素を使用して画像にテキストを追加するにはどうすればよいですか?
ページにヒーローバナーを追加したら、見出しまたはテキスト要素をバナーにドラッグ＆ドロップするだけです。その後、テキストを編集したり、スタイルを調整したり、画像の背景の上の好きな場所に配置したりできます。
2. ヒーローバナーにビデオ背景を使用できますか?
はい。YouTubeリンクまたはShopifyでホストされている動画のどちらかをご利用いただけます。動画ソース設定にリンクを貼り付けるだけです。オプションで「動画をループ再生」スイッチをオンにすると、動画を連続再生できます。
3. ヒーローバナー要素を使用してスライドショーを作成できますか?
ヒーローバナー要素は、ウェブページ上のスライドショーのデザインにも使用されます。 ヒーローバナー 回転木馬 要素を使えば、顧客の注目を集める印象的なスライドショーを簡単に作成できます。作成方法については、こちらをご覧ください。 この教育ビデオ.
4. テキストやボタンがモバイルに表示されないのはなぜですか?
要素がモバイル端末で非表示になっていないか確認してください。「詳細設定」タブで「表示設定」を確認し、すべての画面サイズで有効になっていることを確認してください。
5. ヒーローバナー内のテキストまたはボタンをどのように配置しますか?
コンテンツ > 整列 要素を左、中央、右に配置する設定。また、 パディング の三脚と 幅（Width） 正確な配置のためのコントロール。
6. 訪問者に対してホームページを全画面表示にするにはどうすればよいですか?
7. ヒーローバナーがページ上のより高い位置や間違った位置に表示されるのはなぜですか?
8. ヒーローバナーに代替テキストを追加するにはどうすればよいですか?
ヒーローバナーに代替テキストを追加するには、ヒーローバナー要素をクリックして設定パネルを開きます。 SEO セクションでテキストを入力します 画像の代替テキスト フィールド。この代替テキストは、検索エンジンやスクリーンリーダーにバナー画像の説明を提供することで、アクセシビリティとSEOの向上に役立ちます。
9. ヒーローバナーに「今すぐ購入」ボタンを追加できますか？
いいえ、ヒーローバナーは動的なチェックアウト（今すぐ購入）ボタンをサポートしていません。これらのボタンは商品データを必要とするため、商品要素または商品リスト要素内でのみ利用可能です。同様の効果を得たい場合は、ヒーローバナーに通常のボタンを追加し、商品ページにリンクさせてください。
コメントしてくださってありがとうございます