search

コンパクトメニューレイアウト（グローバルメニュー）

学べること

  • Plain Jane での Compact Menu セクションの使い方

  • Global Menu の設定を使ってナビゲーションを接続する方法

  • スクロール可能なホームページのベストプラクティス

Compact Menu とは？

この コンパクトメニュー Plain Jane テーマで利用できるセクションで、ホームページ上部に「ハンバーガー式」のナビゲーションアイコンを追加します。クリックすると、ナビゲーションリンクを含むフルメニュードロワーが開きます。

セクションは コンパクトメニューと呼ばれますが、 ロゴを好きなように中央揃えまたは配置してくださいに定義されたナビゲーションに接続します。だから両方の呼び方がされることがあります。

このレイアウトは次のようなブランドに最適です：

  • 展開可能なナビゲーションを備えたミニマルでモダンなトップバー

  • スクロール可能なホームページコンテンツの完全なコントロール

  • ストーリーテリングやドロップに適したクリーンな視覚体験

Compact Menu の追加方法

  1. テーマエディタで、 セクション パネルに移動します。

  2. 既存のメニューセクション（Center Menu、Side-Aligned Menu）を削除します。

  3. クリック： セクションを追加 > Compact Menu.

  4. 右上のプレビューにハンバーガーアイコンが表示されます。

ナビゲーションを接続する

ドロワーメニューを機能させるには：

  1. 移動先： ロゴを好きなように中央揃えまたは配置してください.

  2. Shopify メニューを選択する（または Shopify 管理画面で新しく作成）。

  3. ハンバーガーアイコンをクリックするとメニューが表示されるようになります。

💡 ヒント: ナビゲーション構造は オンラインストア > ナビゲーション の Shopify 管理画面で更新してください。

見た目のカスタマイズ

  • ロゴの位置：左、中央、または右

  • 背景：カラー、画像、またはスライドショー用の ダイナミック背景 セクションと組み合わせて使用します

  • フォントとサイズ：メニューリンクのサイズと間隔は テーマ設定 > タイポグラフィ

  • セクションで調整します：次のような他のホームページセクションを追加できます：

    • コレクションリスト

    • ⚠️ 警告: これは

    • イメージストリーム

⚠️ 次のセクションを使用してください： ページキャンバス セクションはすべてのホームページセクションをラップして構造化するために使用します。

Compact Menu を使用するタイミング

適している場面：

  • スクロールが中心のホームページ

  • ビジュアル、ビデオ、またはカルーセルを使用するブランド

  • モバイルフレンドリーなレイアウト

避けるべき場合：

  • ワンページのランディングページにしたい場合（代わりに Center または Side-Aligned Menu を使用）

サンプル構築ワークフロー

  1. を追加します コンパクトメニュー セクション

  2. を追加： ダイナミック背景 （画像、カラー、またはスライドショー）

  3. 主要なコンテンツセクションを追加（コレクション、製品など）

  4. テーマ設定 > Global Menu Settings からナビゲーションをリンク

  5. フォントサイズとロゴ位置を調整

ヘルプが必要ですか？

前へサイド配置メニュー次へコレクションページ

最終更新