![見出し画像](https://assets.st-note.com/production/uploads/images/141261147/rectangle_large_type_2_77a311c39820d084a6e531266f0dda92.png?width=800)
Shopify|リストメニューのデザインを変更する(Dawn)
こんにちは、ななこまです。
今回は、Shopify「Dawn」テーマのリストメニュー(モバイル)を変更してみました。
![](https://assets.st-note.com/img/1685249668606-j2s7Aa4FDf.png)
コード初心者の方にも分かりやすいかと思いますので、ぜひ試してみてください☆
1. メニューに下線を追加する
コード編集で「component-menu-drawer」を選択。
[ .js .menu-drawer__menu li ]を検索し、[ border-bottom」を追加します。
今回はカラーを#e0e0e0にしましたが、変更可能です◎
.js .menu-drawer__menu li {
margin-bottom: 0.2rem;
border-bottom: solid 1px #e0e0e0;
}
![](https://assets.st-note.com/img/1685245960860-XYklH7uvAf.png)
2. 文字の大きさを変更する
上記と同じcss内で、[ .menu-drawer__menu-item ]を検索し、[ font-size ]を変更します。
.menu-drawer__menu-item {
padding: 1.1rem 3.2rem;
text-decoration: none;
font-size: 1.4rem;
}
元々が18pxで大きめだったので、14pxに変更しました。
![](https://assets.st-note.com/img/1685246215140-tcKQJoGFQK.png)
3. 右矢印を追加する
続いて、新しいスニペットを追加します。
![](https://assets.st-note.com/img/1685246884050-J0GFKn8peb.png)
今回は、「icon-menu_right」としました。
ここに、右アイコン画像を追加します。
方法はいくつかありますが、私の場合は「canva」を使っているので、canvaの無料素材で挿入したいアイコン画像を選択し、ダウンロードします。
![](https://assets.st-note.com/img/1685247115458-tpqJy4TwEP.png)
![](https://assets.st-note.com/img/1685247115377-Eprjtjvwon.png)
次に、shopifyコンテンツ>ファイルの中にダウンロードしたファイルをアップデートします。
![](https://assets.st-note.com/img/1685247251490-qCllM2LvkD.png?width=800)
アップロードすると、リンクボタンが出てきます。これを先程作成した「icon-menu_right.liquid」内にコピペ。以下のコードで保存します。
<img src="リンクのURL">
![](https://assets.st-note.com/img/1685246964890-xAH7osxjPt.png?width=800)
さらに、「header.liquid」内で以下を検索します。
(208~210行目辺り)
<a href="{{ link.url }}" class="menu-drawer__menu-item list-menu__item link link--text focus-inset{% if link.current %} menu-drawer__menu-item--active{% endif %}"{% if link.current %} aria-current="page"{% endif %}>
{{ link.title | escape }}
このコードの下にrenderを追加します。
<a href="{{ link.url }}" class="menu-drawer__menu-item list-menu__item link link--text focus-inset{% if link.current %} menu-drawer__menu-item--active{% endif %}"{% if link.current %} aria-current="page"{% endif %}>
{{ link.title | escape }}
{% render 'icon-menu_right' %}
</a>
ここまでで以下のようになっているはずです。
![](https://assets.st-note.com/img/1685247743344-wSKE4L52yN.png)
追加したアイコンを端に寄せたいので、「header.liquid」で[ .list-menu__item ]を検索し、「justify-content」を追加しました。
![](https://assets.st-note.com/img/1685247911865-hN9cONcK1v.png)
4. その他の編集
余白の大きさは「component-menu-drawer.css」内の[ .menu-drawer__menu-item ] にある「padding」で変更可能です!
さらに、クリックした際にデフォルトだとグレーになるのですが、可愛くしたかったので、「component-menu-drawer.css」内の[ .menu-drawer__menu-item--active:hover ]にあるbackgroud-colorを変更しました。
.menu-drawer__menu-item--active:hover {
background-color: #f6e6e0;
}
![](https://assets.st-note.com/img/1685248242647-VLEeDLStdj.png)
デフォルトの状態を変更したい場合は、[ .menu-drawer__menu-item--active ]の「background-color」を変更すればOKです!
リストメニュー上の余白が要らないときは、同じく「component-menu-drawer.css」内の[ .menu-drawer__navigation ]のpaddingを0にすると無くなります。
ちなみに、「component-menu-drawer.css」はフッターとも繋がっているので、ヘッダーのみ変更する場合は、ヘッダーのカスタムcss内でコード編集することをおすすめします。
![](https://assets.st-note.com/img/1685249558817-WozgYB1Jz5.png)
以上、リストメニューの簡単なデザイン変更でした!
編集は自己責任となりますので、バックアップを取ってからお試しください。それではまた!
この記事が気に入ったらサポートをしてみませんか?