{"product_id":"2026-10-25","title":"【Horizon】ヘッダーのメニューをDawnのような「ドロップダウン」表示にする方法","description":"\u003cp\u003eテーマ「Horizon」のPC用メニューはメガメニュー形式だけで、Dawnのように親メニューのすぐ下に子メニューの一覧を小さく開く「ドロップダウン」表示は選べません。そこで、ヘッダーのメニューブロックを元にした新しいブロックを追加し、PC表示だけをドロップダウンに置き換える方法です。スマホのドロワーメニューはHorizon標準のまま使えます。\u003c\/p\u003e\n\u003cp\u003e👉 実際の表示は、以下のデモストアで確認できます（PCで親メニュー「商品一覧」にマウスを乗せると、すぐ下に子・孫メニューが開く状態）。\u003cbr\u003e\u003ca href=\"https:\/\/horizon-store-q9zl2koe.myshopify.com\/?preview_theme_id=138947461328\" target=\"_blank\" rel=\"noopener\"\u003ehorizon-store-q9zl2koe.myshopify.com\u003c\/a\u003e\u003cbr\u003eストアパスワード：store-dojo\u003c\/p\u003e\n\u003ch3\u003e完成イメージ\u003c\/h3\u003e\n\u003cp\u003e\u003cimg alt=\"完成イメージ：PCはドロップダウン、スマホはドロワー\" src=\"https:\/\/cdn.shopify.com\/s\/files\/1\/0733\/0381\/8491\/files\/2026-10-25_1.png?v=1792856588\" class=\"zoomable-image\"\u003e\u003c\/p\u003e\n\u003cp\u003e親メニューにマウスを乗せると、すぐ下に子メニューと孫メニューが開きます。マウスを乗せて開く設定のときは、親メニューをクリックするとそのリンク先のページへ移動します（キーボード操作やタップでは開閉だけ行います）。\u003c\/p\u003e\n\u003cp\u003e\u003cbr\u003e\u003c\/p\u003e\n\u003ch3\u003e開き方・孫メニューの表示・見た目は設定で切り替えられる\u003c\/h3\u003e\n\u003cp\u003e\u003cimg alt=\"設定で開き方・孫メニュー・見た目を切り替え\" src=\"https:\/\/cdn.shopify.com\/s\/files\/1\/0733\/0381\/8491\/files\/2026-10-25_2.png?v=1792856598\" class=\"zoomable-image\"\u003e\u003c\/p\u003e\n\u003cp\u003e◆ドロップダウン\u003cbr\u003e・親メニューの開き方（PC）：マウスオーバーで展開／クリックで展開\u003cbr\u003e・孫メニューの表示（PC）：最初から展開／クリックで展開（子メニューの横の矢印ボタンで開閉）\u003cbr\u003e・孫メニューをタップで展開（スマホ）：オフにすると、スマホでも孫メニューを最初から展開して表示\u003c\/p\u003e\n\u003cp\u003e◆ドロップダウンの見た目（PC表示）\u003cbr\u003e・親メニュー：文字サイズ、文字の太さ、文字間隔、親メニュー同士の間隔、文字色、矢印の表示、ホバー時の見せ方（下線／文字色を変える／なし）\u003cbr\u003e・パネル：最小幅、上下の余白、ヘッダーとパネルの間隔、角の丸み、影、枠線、背景色、文字色、開くときのアニメーション（フェード／スライド／なし）\u003cbr\u003e・子メニュー：文字サイズ、文字の太さ、上下・左右の余白、ホバー背景色\u003cbr\u003e・孫メニュー：文字サイズ、字下げ、文字の濃さ\u003c\/p\u003e\n\u003cp\u003e色の設定を空のままにすると、ヘッダーの配色がそのまま使われます。\u003c\/p\u003e\n\u003cp\u003e\u003cbr\u003e\u003c\/p\u003e\n\u003ch3\u003e【設定手順】テーマエディタで設定する\u003c\/h3\u003e\n\u003cp\u003e\u003cimg alt=\"設定手順：テーマエディタのドロップダウン設定\" src=\"https:\/\/cdn.shopify.com\/s\/files\/1\/0733\/0381\/8491\/files\/2026-10-25_3.png?v=1792856610\" class=\"zoomable-image\"\u003e\u003c\/p\u003e\n\u003cp\u003e導入後、テーマエディタの左パネルで「ヘッダー（ドロップダウンメニュー）」の中にある「メニュー（ドロップダウン）」を選ぶと、右パネルにドロップダウンの設定が表示されます。\u003c\/p\u003e\n\u003cp\u003e\u003cbr\u003e\u003c\/p\u003e\n\u003ch3\u003e【導入手順】コードを編集で3ファイルを追加し、header-group.json を書き換える\u003c\/h3\u003e\n\u003cp\u003e\u003cimg alt=\"導入手順：3ファイル追加とheader-group.jsonの書き換え\" src=\"https:\/\/cdn.shopify.com\/s\/files\/1\/0733\/0381\/8491\/files\/2026-10-25_4.png?v=1792856621\" class=\"zoomable-image\"\u003e\u003c\/p\u003e\n\u003cp\u003eオンラインストア ＞ テーマ ＞ 「…」 ＞ コードを編集 から、次の順に作業します。テーマ本体のファイル（header.liquid・_header-menu.liquid）は変更しません。\u003c\/p\u003e\n\u003cp\u003e◆① blocks\/_header-menu-dropdown.liquid（新規作成）\u003cbr\u003e・blocks フォルダで「新しいブロックを追加する」から作成し、購入特典のコードを貼り付けます\u003cbr\u003e・_header-menu.liquid をコピーし、PC表示の部分（L66〜L188）をドロップダウンに置き換えたブロックです。スマホのドロワーとナビゲーションバーの部分は元のままです\u003c\/p\u003e\n\u003cp\u003e\u003cimg alt=\"blocks\/_header-menu-dropdown.liquid（PC表示部分）\" src=\"https:\/\/cdn.shopify.com\/s\/files\/1\/0733\/0381\/8491\/files\/2026-10-25_8.png?v=1792856668\" class=\"zoomable-image\"\u003e\u003c\/p\u003e\n\u003cp\u003e\u003cimg alt=\"blocks\/_header-menu-dropdown.liquid（JavaScript）\" src=\"https:\/\/cdn.shopify.com\/s\/files\/1\/0733\/0381\/8491\/files\/2026-10-25_9.png?v=1792856679\" class=\"zoomable-image\"\u003e\u003c\/p\u003e\n\u003cp\u003e◆② sections\/custom-header.liquid（新規作成）\u003cbr\u003e・sections フォルダで「新しいセクションを追加する」から作成し、header.liquid の中身をすべてコピーして貼り付けます\u003cbr\u003e・L88・L92・L96 の3か所で、ブロック名 '_header-menu' を '_header-menu-dropdown' に書き換えます\u003cbr\u003e・schema の \"name\" を \"ヘッダー（ドロップダウンメニュー）\" に変えると、テーマエディタで見分けやすくなります\u003c\/p\u003e\n\u003cp\u003e\u003cimg alt=\"sections\/custom-header.liquid\" src=\"https:\/\/cdn.shopify.com\/s\/files\/1\/0733\/0381\/8491\/files\/2026-10-25_5.png?v=1792856633\" class=\"zoomable-image\"\u003e\u003c\/p\u003e\n\u003cp\u003e◆③ snippets\/dropdown-menu-style-vars.liquid（新規作成）\u003cbr\u003e・snippets フォルダで「新しいスニペットを追加する」から作成し、購入特典のコードを貼り付けます。見た目の設定値を CSS 変数に変換するスニペットです\u003c\/p\u003e\n\u003cp\u003e\u003cimg alt=\"snippets\/dropdown-menu-style-vars.liquid\" src=\"https:\/\/cdn.shopify.com\/s\/files\/1\/0733\/0381\/8491\/files\/2026-10-25_7.png?v=1792856657\" class=\"zoomable-image\"\u003e\u003c\/p\u003e\n\u003cp\u003e◆④ sections\/header-group.json（既存ファイルを修正）\u003cbr\u003e・\"header_section\" の \"type\": \"header\" を \"custom-header\" に書き換えます\u003cbr\u003e・その中の \"header-menu\" の \"type\": \"_header-menu\" を \"_header-menu-dropdown\" に書き換えて保存します\u003c\/p\u003e\n\u003cp\u003e\u003cimg alt=\"sections\/header-group.json\" src=\"https:\/\/cdn.shopify.com\/s\/files\/1\/0733\/0381\/8491\/files\/2026-10-25_6.png?v=1792856644\" class=\"zoomable-image\"\u003e\u003c\/p\u003e\n\u003cp\u003e動作確認は Horizon 4.3.0 で行っています。行番号も Horizon 4.3.0 の header.liquid・_header-menu.liquid を基準にしています。\u003c\/p\u003e\n\u003cp\u003e\u003cbr\u003e\u003c\/p\u003e\n\u003cp\u003eHorizonのデスクトップメニューの「メディアタイプ」設定による表示の違いはこちら： \u003ca href=\"\/products\/2026-03-14\"\u003eデスクトップメニューで「メディアタイプ」設定によるサブメニュー表示の違い\u003c\/a\u003e\u003c\/p\u003e","brand":"STORE DOJO","offers":[{"title":"Default Title","offer_id":68385948172539,"sku":null,"price":0.0,"currency_code":"JPY","in_stock":true}],"thumbnail_url":"\/\/cdn.shopify.com\/s\/files\/1\/0733\/0381\/8491\/files\/2026-10-25.png?v=1792856696","url":"https:\/\/store-dojo.com\/products\/2026-10-25","provider":"STORE DOJO","version":"1.0","type":"link"}