コンパクトメニューレイアウト（グローバルメニュー）
あなたが学ぶこと
Plain JaneでCompact Menuセクションを使用する方法
グローバルメニュー設定を使用してナビゲーションを接続する方法
スクロール可能なホームページのベストプラクティス
Compact Menuとは？この コンパクトメニュー Plain Janeテーマで利用できるセクションで、ホームページの上部に「ハンバーガースタイル」のナビゲーションアイコンを追加します。クリックすると、ナビゲーションリンクを含むフルメニュードロワーが開きます。
セクションは コンパクトメニューに定義されたナビゲーションに接続されます。 テーマ設定 > グローバルメニュー設定そのため、両方の呼び方で参照されることがあります。
このレイアウトは以下のようなブランドに最適です：
展開可能なナビゲーションを備えたミニマルでモダンなトップバー
スクロール可能なホームページコンテンツの完全な制御
ストーリーテリングやドロップに適したクリーンな視覚体験
Compact Menuの追加方法
テーマエディターで、 セクション パネルに移動します。
既存のメニューセクション（Center Menu、Side-Aligned Menu）を削除します。
クリック セクションを追加 > Compact Menu.
プレビューの右上にハンバーガーアイコンが表示されます。
ナビゲーションを接続するドロワーメニューを機能させるには：
に移動 テーマ設定 > グローバルメニュー設定.
Shopifyメニューを選択する（またはShopify管理画面で新しく作成）。
ハンバーガーアイコンをクリックするとメニューが表示されるようになります。
💡 ヒント: ナビゲーション構造はShopify管理画面の オンラインストア > ナビゲーション で更新できます。
外観のカスタマイズ
ロゴの位置：左、中央、または右
背景：色、画像、スライドショー用に
ダイナミック背景セクションと組み合わせるフォントとサイズ：メニューリンクのサイズと間隔を テーマ設定 > タイポグラフィ
セクションで調整する：次のような他のホームページセクションを追加します：
コレクションリスト
商品カルーセル
画像ストリーム
⚠️ 次を使用してください：
ページキャンバスセクションで全てのホームページセクションをラップして構造化します。
Compact Menuを使用するタイミングにおすすめ：
スクロールの多いホームページ
ビジュアル、動画、カルーセルを使用するブランド
モバイルフレンドリーなレイアウト
次の場合は避けてください：
ワンスクリーンのランディングページにしたい（代わりにCenterまたはSide-Aligned Menuを使用）
サンプル構築ワークフロー
を追加します
コンパクトメニューセクションを追加
ダイナミック背景（画像、色、またはスライドショー）主要なコンテンツセクション（コレクション、商品など）を追加
テーマ設定 > グローバルメニュー設定でナビゲーションをリンク
フォントサイズとロゴ位置を微調整
ヘルプが必要ですか？
💬 Discord のコミュニティに参加してください： https://discord.gg/hcc2GvgZc6
📧 メールでお問い合わせ： [email protected]
💻 ライブチャット： 月〜金、現地時間（EST）10:00〜18:00 に当社ウェブサイトで直接利用可能
最終更新