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

学べること

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

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

  • スクロール可能なホームページに関するベストプラクティス

Compact Menu とは？

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

セクションは Compact Menuと呼ばれますが、これは Theme Settings > Global Menu Settingsで定義されたナビゲーションに接続するため、両方の呼び方が見られることがあります。

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

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

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

  • ストーリーテリングやドロップに適したクリーンなビジュアル体験

Compact Menu の追加方法

  1. テーマエディタで、 Sections パネルに移動します。

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

  3. をクリック Add Section > Compact Menu.

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

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

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

  1. に移動します Theme Settings > Global Menu Settings.

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

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

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

見た目のカスタマイズ

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

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

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

  • Sections：Collections、Products などの他のホームページセクションを追加します：

    • コレクションリスト

    • 製品カルーセル

    • イメージストリーム

⚠️ 次のセクションを使用してすべてのホームページセクションをラップおよび構築してください ページキャンバス （ラップ用セクション）。

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

次の場合に最適：

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

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

  • モバイルに優しいレイアウト

次の場合は避けてください：

  • シングルスクリーンのランディングページを望む場合（代わりに Center または Side-Aligned Menu を使用）

サンプルビルドワークフロー

  1. 次を追加します： Compact Menu セクション

  2. 「 ダイナミック背景 （画像、色、またはスライドショー）

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

  4. Theme Settings > Global Menu Settings でナビゲーションをリンクします

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

ヘルプが必要ですか？

  • 💬 Discordでコミュニティに参加： https://discord.gg/hcc2GvgZc6

  • 📧 メールでお問い合わせ： [email protected]

  • 💻 ライブチャット： 月曜〜金曜、午前10時〜午後6時（EST）に当社ウェブサイトで直接利用可能

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

最終更新