センターメニュー

学べること

  • センターメニュー レイアウトを使ってホームページを構築する方法

  • メニューリンクの接続方法とフォント、色、配置のカスタマイズ方法


センターメニューについて

この センターメニュー レイアウトはロゴとナビゲーション項目をページ中央に縦に積み重ねた配置にします。Supreme のようなブランドに触発されており、スクロールを最小限に抑えつつ強いインパクトのあるランディング体験を望むストア向けに設計されています。

このレイアウトは、強い背景(画像またはビデオ)と最小限のホームページコンテンツと組み合わせると最適に機能します。

⚠️ この ダイナミック背景 セクションは最新のテーマバージョンで非推奨になりました。背景のカスタマイズはすべてセンターメニューセクション内で直接行ってください。

設定方法

1. クリーンなキャンバスから始める

  • テーマエディタで、以下以外のすべてのセクションを削除します ページキャンバス.

2. センターメニューセクションを追加する

  • クリック: セクションを追加 > センターメニュー

  • ロゴとメニューがページ中央に表示されます

3. ナビゲーションメニューを接続する

  • センターメニュー設定で、ドロップダウンからShopifyのメニューを選択します

  • まだメニューがない場合:

    • 移動先: Shopify 管理画面 > オンラインストア > ナビゲーション を作成してください


センターメニューのカスタマイズ

ロゴ設定

  • Clock:ライブストアの時計表示を有効または無効にする

  • 日付形式:希望する日付形式を選択

  • 時刻カラー:時計のテキスト色をカスタマイズ

メニュー構成

  • メニューを選択:ナビゲーションを接続する

  • 配置:リンクを左寄せ、中央、または右寄せに配置する

  • ログインリンクを表示:任意で顧客ログインボタンを表示する

スタイリングオプション

  • リンクテキストの色

  • リンクテキストの色(ホバー時)

  • リンク背景色(ホバー時)

  • リンクのフォントサイズ

  • リンクの縦方向の間隔

ソーシャルメディアアイコン

  • セクション内のソーシャルメディアリンクブロックを使って、X、Instagram、TikTok などのリンクを追加できます


背景オプション

センターメニューセクションでは以下の背景タイプが使用できます:

  • 単色:デスクトップとモバイルで異なる色を設定

  • 画像:デバイスごとに背景画像をアップロード

  • スライドショー:最大3枚の回転画像を追加

  • ビデオ:ループ再生する動画背景を追加(注:iOSで低電力モードが有効な場合、動画が自動再生されないことがあります)

追加設定

  • セクションの高さ:フルハイトに設定するか手動で調整

  • オーバーレイオプション:

    • 上下のオーバーレイの色と不透明度を制御

    • デスクトップとモバイルで個別に制御可能

💡 ヒント:オーバーレイを使うと、白や明るいテキストが背景画像やビデオ上で目立つようになります。


このレイアウトを使用するタイミング

センターメニュー レイアウトを使用する場合:

  • 大胆でミニマルなホームページにしたいとき

  • 最初のインタラクションを視覚的に強いシンプルなメニューにしたいとき

  • トラフィックをコレクションや商品ページに直接誘導したいとき


ヘルプが必要ですか?

最終更新