FROM CACHE - jp_header

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

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

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

テーマはsenseになります。

3件の返信3

Qcoltd
Shopify Partner
1023 415 392

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

 

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
105 0 1

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

Qcoltd
Shopify Partner
1023 415 392

@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/