質問: Debutテーマのメニューについて、 PC表示でもスマホ表示と同様にハンバーガーメニューを利用したいのですが、 可能でしょうか。 また、バッグアイコンをカートアイコンに変更したいのですが、 そちらもご教示いただければ幸いです。 宜しくお願い致します。 解決済! ベストソリューションを見る。
回答: いずれも可能ですが、テーマファイルのコード編集が必要になります。 以下、手順をご説明します。 **A. PCでのハンバーガーメニュー表示の手順** 1. オンラインストア→テーマ→コードを編集 編集するファイルは、**theme.css.liquid**です。 2. メニューアイコンを常に表示させる 3825行目あたりです。 **変更前** ``` @media only screen and (max-width: 749px) { .site-header__icon { display: inline-block; vertical-align: middle; padding: 10px 11px; margin: 0; } } ``` **変更後** ``` .site-header__icon { display: inline-block; vertical-align: middle; padding: 10px 11px; margin: 0; } ``` **3. ハンバーガーメニューの中身をPCでも表示させる** 以下のコードを削除します。 800行目あたりです。 ``` .medium-up--hide { display: none !important; } ``` **4. 通常のグローバルメニュー をPCで非表示にする** 以下のコードをファイルの一番下の位置に移動させます。 676行目あたりです。 ``` .small--hide { display: none !important; } ``` 5. ハンバーガーメニューを右側に寄せる。 二段階に分けて移動させます。 **<ステップ1>** 以下のコードを一部変更します。 3733行目あたりです。 **変更前** ``` @media only screen and (max-width: 749px) { .site-header__icons { width: auto; padding-right: 13px; } .site-header__icons .btn--link, .site-header__icons .site-header__cart { font-size: calc(((var(--font-size-base)) / (var(--font-size-base))) * 1em); } } ``` **変更後** ``` .site-header__icons { width: auto; padding-right: 13px; } .site-header__icons .btn--link, .site-header__icons .site-header__cart { font-size: calc(((var(--font-size-base)) / (var(--font-size-base))) * 1em); } ``` **<ステップ2>** さらに、次のコードを変更します。 700行目あたりです。 **変更前** ``` .medium-up--one-quarter { width: 25%; } ``` **変更後** ``` .medium-up--one-quarter { width: 100%; } ``` これで次の画像のようになると思います。 ![Screen Shot 2020-11-05 at 10.44.24.png](/c/image/serverpage/image-id/77167i12D2C9C17C60C262/image-size/large?v=1.0&px=999 "Screen Shot 2020-11-05 at 10.44.24.png") **B. メニューのアイコンをショッピングカートに変える** コードを編集する→Snippetsフォルダ→**icon-cart.liquid**ファイル ファイルの中身を次のリンク先のコードに置き換えます。 https://community.shopify.com/c/Shopify-Design/How-can-I-change-my-cart-icon-on-the-Debut-theme/td-p... 以上、ご参考ください。 宜しくお願いいたします。