FROM CACHE - jp_header

スライドショーセクションの仕切線について

8910
遊覧客
41 0 2

 

テーマはOriginを使用しております。

 

スライドショーセクションは、デフォルト状態だとセクション下に仕切り線が表示されると思います。

こちらを削除する方法はないでしょうか?

できれば「>」と「II」の間にある仕切り線も削除したいです。

 

ご協力頂ける方が居ましたら、ご教示いただけるとありがたいです。よろしくお願いします。

スクリーンショット 2023-05-14 17.32.03.png

 

5件の返信5

Qcoltd
Shopify Partner
1051 429 413

ご質問いただいている、セクションの区切り線を消したい件ですが、

CSSを追加することで消すことができるかと思います。

 

設定手順

  1. 管理画面 > オンラインストア > テーマ > カスタマイズボタンをクリック
  2. 左メニュー「スライドショー」を選択
  3. カスタムCSSに下記コードを追加
@media screen and (min-width: 750px) {
  .slideshow__autoplay.slider-button {
    border-left: none;
  }
  .slideshow__controls {
    border: none;
  }
}

 

Qcoltd_0-1684120667726.png

 

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

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

いつもありがとうございます!

 

実装できました!

8910
遊覧客
41 0 2

何度もすいません、、

 

 

スクリーンショット 2023-05-27 0.25.03.png

左右ボタンと停止/再生ボタンも消すことは可能でしょうか?

Qcoltd
Shopify Partner
1051 429 413

@8910 

 

ご質問いただきました、左右ボタンと再生ボタンを非表示にするには、

下記CSSに変更いただければご希望の形になるかと思われます。

PCスマートフォンとも左右ボタン、再生ボタンは非表示となります。

.slider-button--prev {
  display: none;
}
.slider-button--next {
  display: none;
}
.slideshow__autoplay.slider-button {
  border-left: none;
  display: none;
}
@media screen and (min-width: 750px) {
  .slideshow__controls {
    border: none;
  }
}

 

 

 

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

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

いつもお世話になっております!

変更できました!

 

ありがとうございました!