# フッターメニューに画像をいれたい

**URL:** <https://community.shopify.com/t/topic/223848>\
**Category:** 技術的なQ＆A\
**Tags:** css\
**Created:** [June 12, 2023, 2:32pm UTC](https://community.shopify.com/t/topic/223848 "2023-06-12T14:32:46Z")\
**Posts on this page:** 4\
**Page:** 1

## AI-generated summary

フッターメニューの文字の横に画像を追加する方法についての質問と回答。

**初期の解決策:**
- カスタムCSSを使用してメニュー項目の左側にアイコン画像を配置
- `background-image`プロパティでShopifyにアップロードした画像URLを指定
- 複数メニューがある場合は`:nth-child()`で個別に設定

**追加要望と対応:**
質問者が画像を文字の右側に表示したいと要望。画面幅を変えると文字と画像が重なる問題も報告。

**右側配置の実装方法:**
1. `footer.liquid`ファイルで`{{ link.title }}`の後に`<span></span>`を追加
2. カスタムCSSで`span`要素に画像を設定
3. `display: inline-block`と`margin-left`で右側に配置
4. メディアクエリでPC・スマホそれぞれの表示を調整

画像付きの実装例とコードスニペットが提供され、具体的な解決策が示されている。

<div class="post-metadata">

**Author:** ![mira0](https://avatars.discourse-cdn.com/v4/letter/m/e68b1a/32.png) [@mira0](https://community.shopify.com/u/mira0)\
**Post date:** [June 12, 2023, 2:32pm UTC](https://community.shopify.com/t/topic/223848/1 "2023-06-12T14:32:46Z")

</div>

- フッターのメニューの文字の横に画像を入れたいです。

実装方法などあれば教えていただきたいです。

テーマはsenseになります。

---

<div class="post-metadata">

**Author:** ![Qcoltd](https://yyz1.discourse-cdn.com/shopifyforum/user_avatar/community.shopify.com/qcoltd/32/900_2.png) [@Qcoltd](https://community.shopify.com/u/Qcoltd)\
**Post date:** [June 13, 2023, 11:23am UTC](https://community.shopify.com/t/topic/223848/2 "2023-06-13T11:23:36Z")

</div>

ご質問いただいています、フッターメニューの横に画像を入れたい件ですが、  
フッタメニューの横に画像を入れるには複数パターン考えられますが、  
下記添付画像の様にアイコンとして画像を入れるパターンでご説明させていただきます。

**PCでの見た目**

 ![Qcoltd_0-1686655290528.png](https://canada1.discourse-cdn.com/shopifyforum/original/3X/7/7/77f4124e7be83f6627693e6969cce601b332de0e.jpeg)

**スマホでの見た目**

 ![Qcoltd_1-1686655290472.png](https://canada1.discourse-cdn.com/shopifyforum/original/3X/6/b/6bd797ec56b86ecd2a4dea66a06e1b850bf22443.png)

**設定方法**

管理画面 \> オンラインストア \> カスタマイズをクリックし、画面左側のテーマ設定開いて、カスタムCSSを開きます。

 ![Qcoltd_2-1686655290571.png](https://canada1.discourse-cdn.com/shopifyforum/original/3X/4/8/48990d9a3546531539b6c2d55db03d33136fafb0.jpeg)

カスタムCSSに下記CSSを挿入してください。  
CSS内の『[https://cdn.shopify.com/s/files/X/XXXX/XXXX/XXXX/files/icon.png』](https://cdn.shopify.com/s/files/X/XXXX/XXXX/XXXX/files/icon.png%E3%80%8F)はShopifyのコンテンツのファイルにアップした画像のURLに変更ください。

```markup
footer .list-menu__item {
  padding-left: 25px;
  background-size: 15px 15px;
  background-repeat: no-repeat;
  background-position-y: center;
}
@media screen and (min-width: 990px) {
  footer li:nth-child(1) .list-menu__item {
    padding-top: 0.5rem !important;
  }
}
footer li:nth-child(1) .list-menu__item {
  background-image: url(https://cdn.shopify.com/s/files/X/XXXX/XXXX/XXXX/files/icon.png);
}
footer li:nth-child(2) .list-menu__item {
  background-image: url(https://cdn.shopify.com/s/files/X/XXXX/XXXX/XXXX/files/icon.png);
}
footer li:nth-child(3) .list-menu__item {
  background-image: url(https://cdn.shopify.com/s/files/X/XXXX/XXXX/XXXX/files/icon.png);
}
footer li:nth-child(4) .list-menu__item {
  background-image: url(https://cdn.shopify.com/s/files/X/XXXX/XXXX/XXXX/files/icon.png);
}

```

メニューが5つ以上ある場合は、下記CSSを対象のメニュー数分追加しnth-child( **1** )の数字は通番で番号を変更してください。

```markup
footer li:nth-child(1) .list-menu__item {
  background-image: url(https://cdn.shopify.com/s/files/X/XXXX/XXXX/XXXX/files/icon.png);
}

```

ご参考まで。  
(キュー小坂)

---

<div class="post-metadata">

**Author:** ![mira0](https://avatars.discourse-cdn.com/v4/letter/m/e68b1a/32.png) [@mira0](https://community.shopify.com/u/mira0)\
**Post date:** [June 17, 2023, 8:58am UTC](https://community.shopify.com/t/topic/223848/3 "2023-06-17T08:58:17Z")

</div>

ありがとうございます。文字の右側に表示させたいのですが、方法あれば教えていただきたいです。色々やってみたのですが、画面の幅を変えると文字と被ったり離れすぎたりしてしまいます。

---

<div class="post-metadata">

**Author:** ![Qcoltd](https://yyz1.discourse-cdn.com/shopifyforum/user_avatar/community.shopify.com/qcoltd/32/900_2.png) [@Qcoltd](https://community.shopify.com/u/Qcoltd)\
**Post date:** [June 19, 2023, 10:32am UTC](https://community.shopify.com/t/topic/223848/4 "2023-06-19T10:32:35Z")

</div>

@mira0

ご連絡いただきました、テキストの右側に画像を入れたい件ですが、  
画像の位置を左から右に変更すると、上記のCSSでは特にスマートフォンにおいて右側に寄ったりテキストに被ってしまいます。

画像をテキストの右側に持ってくる場合は、追加の調整が必要となります。

**調整方法**

1. 管理画面 \> オンラインストア \> カスタマイズボタン横の「・・・」 \> コードを編集をクリック

2. 左上の検索窓で『footer.lipuid』を検索

3. {{ link.title }}を検索

4. {{ link.title }}の後ろに『』を追加

5. 前述したカスタムCSSに下記CSSを追加

**追加CSS**

```markup
footer .list-menu__item span {
  background-size: 15px 15px;
  background-repeat: no-repeat;
  background-position-y: center;
  display: inline-block;
  width: 15px;
  height: 15px;
  vertical-align: text-top;
  margin-left: 10px;
}
@media screen and (min-width: 990px) {
  footer li:nth-child(1) .list-menu__item {
    padding-top: 0.5rem !important;
  }
}
@media screen and (max-width: 749px) {
  footer .list-menu__item {
    display: block;
  }
}
footer li:nth-child(1) .list-menu__item span {
  background-image: url(https://cdn.shopify.com/s/files/X/XXXX/XXXX/XXXX/files/icon.png);
}
footer li:nth-child(2) .list-menu__item span {
  background-image: url(https://cdn.shopify.com/s/files/X/XXXX/XXXX/XXXX/files/icon.png);
}
footer li:nth-child(3) .list-menu__item span {
  background-image: url(https://cdn.shopify.com/s/files/X/XXXX/XXXX/XXXX/files/icon.png);
}
footer li:nth-child(4) .list-menu__item span {
  background-image: url(https://cdn.shopify.com/s/files/X/XXXX/XXXX/XXXX/files/icon.png);
}

```

表示画像やメニューが5つ以上の場合につきましては、前述した内容をご参照ください。

**PCでの見た目**

 ![Qcoltd_1-1687170448537.png](https://canada1.discourse-cdn.com/shopifyforum/original/4X/6/4/1/6419fac422de34865a7d344a3f3864062fde9d98.jpeg)

**SPでの見た目**

 ![Qcoltd_2-1687170448514.png](https://canada1.discourse-cdn.com/shopifyforum/original/3X/5/7/572e410e58ef23a5b6a5f4c368693f527969950a.png)

ご参考まで。  
(キュー小坂)