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

[mira0]

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

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

テーマはsenseになります。

[Qcoltd]

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

PCでの見た目

スマホでの見た目

設定方法

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

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

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)の数字は通番で番号を変更してください。

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

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

[mira0]

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

[Qcoltd]

@mira0

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

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

調整方法

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

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

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

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

   

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

追加CSS

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での見た目

SPでの見た目

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