FROM CACHE - jp_header
このコミュニティはピアツーピアサポートに移行しました。Shopify サポートは今後、このコミュニティへのサービスを提供いたしません。これからもぜひ、他のマーチャントやパートナーとつながり、サポートし合い、経験を共有してください。 当社の行動規範に違反する行動や削除を希望するコンテンツがありましたら、引き続きご報告ください

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

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

mira0
Shopify Partner
122 0 6
  • フッターのメニューの文字の横に画像を入れたいです。

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

テーマはsenseになります。

3件の返信3

Qcoltd
Shopify Partner
1124 455 449

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

 

PCでの見た目

Qcoltd_0-1686655290528.png

スマホでの見た目

Qcoltd_1-1686655290472.png

 

設定方法

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

Qcoltd_2-1686655290571.png

カスタム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);
}


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

株式会社Q (キュー)
グラフィックデザイン、アパレル事業、Web制作など色々やっている渋谷区代々木の会社です。ShopifyでのECサイトの運営・開発も行なっています。
私たちについて: https://web.q-co.jp/ テックブログ: https://techlab.q-co.jp/
mira0
Shopify Partner
122 0 6

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

Qcoltd
Shopify Partner
1124 455 449

@mira0

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

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

 

調整方法

  1. 管理画面 > オンラインストア > カスタマイズボタン横の「・・・」 > コードを編集をクリック
  2. 左上の検索窓で『footer.lipuid』を検索
  3. {{ link.title }}を検索
  4. {{ link.title }}の後ろに『<span></span>』を追加
    Qcoltd_0-1687170448544.png
  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での見た目

Qcoltd_1-1687170448537.png

 

SPでの見た目

Qcoltd_2-1687170448514.png


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

株式会社Q (キュー)
グラフィックデザイン、アパレル事業、Web制作など色々やっている渋谷区代々木の会社です。ShopifyでのECサイトの運営・開発も行なっています。
私たちについて: https://web.q-co.jp/ テックブログ: https://techlab.q-co.jp/