透明ヘッダーをオフにする

ヘッダー メニューがホームページ上で適切に表示されず、メニューから離れたところにカーソルを置くと、一部のコンテンツが重なっているように見えます。

Web サイトのヘッダー デザインのベスト プラクティスによると、透明なヘッダーは、画像バナーやスライドショーなどの背景要素で最もよく見えます。 Web サイトのレイアウトに最初のセクションで設定するこれらの要素が含まれていない場合、これが上記の問題が発生する原因である可能性があります。下の例 (画像) でわかるように、タブ コラージュが最初のセクションとして設定されており、マウス ポインターをメニューの外に移動すると、透明なヘッダー メニューが見栄えが悪くなっています。

この場合、バナーやスライドショーではなく、最初のセクションの種類が異なる場合に最適な表示を確保するために、透明ヘッダー モードをオフにすることをお勧めします。この記事ではその方法を説明します。

透明ヘッダーをオフにする方法

1. Shopify 管理者ダッシュボードで、 [オンライン ストア] > [テーマ]をクリックします。
2. [テーマ] ページで、 [Be Yours ] テーマを選択し、テーマの[カスタマイズ] ボタンをクリックします。
3. ホームページの左側のメニューで、 「ヘッダー」セクションをクリックします。

4. [ヘッダー] セクションの設定パネルで、 [透明ヘッダー]まで下にスクロールすると、 [ホームページで有効にする]と [コレクション ページで有効にする] の2 つのオプションが表示されます。問題を解決するには、どちらかまたは両方のチェックを外してください。次に、 「保存」をクリックします。

5. その結果、メニューの下に無地の背景が表示され、重なり表示が回避されます。

この記事がお役に立てば幸いです。この機能についてご不明な点がございましたら、サポートが必要なため、お気軽に弊社チームまでお問い合わせください。