FROM CACHE - jp_header
解決済

スライドショーのスマホでのボタン表示位置変更

scopecoco
観光客
3 0 1

テーマ「Debut」を使用しています。超初心者です。

ホームページでスライドショーを採用しています。スマホ表示の際に、スライドボタンが画像に重なって表示されます。

ボタンの位置を下に下げる、画像と重ならないようにするにはどこを編集すれば良いでしょうか。

Theme.css.liquidでそれらしきところを変更したりしてみたのですが、動かすことができませんでした。

おわかりになる方、教えてください。よろしくお願い致します。

1 件の受理された解決策
Jizo_Inagaki
Shopify Partner
990 373 690

成功

対象を間違っており申し訳ありません。

方法はいくつか考えられますが、theme.scss.liquidで作業を行うならば、「slideshow__text-wrap--mobile」で検索して場所を特定し、以下を

 

.slideshow__text-wrap--mobile {
  display: none;

  @include media-query($small) {
    display: block;
    position: relative;
    top: -1.1rem;
    background-color: $color-bg;
    width: 85%;
    margin: 0 0 -1.1rem 7.5%;
  }
}

 

 以下のように変更することで恐らくご希望の状態になるかと思います。

 

.slideshow__text-wrap--mobile {
  display: none;

  @include media-query($small) {
    display: block;
    position: relative;
    background-color: $color-bg;
    width: 85%;
    margin: 0 0 0 7.5%;
  }
}

 

 軽く見たところでは大丈夫そうですが、この変更により動作に影響がでないとも限りませんので、作業後は不具合がないかをチェックもお勧めします。

 

Jizo_Inagaki | フリーランスのwebデザイナー
- テーマのカスタム承れます。
- 記載した回答で解決できましたらベストソリューションの承認をお願いします。
- DMや指名による対応はご依頼として有料でのみ承ります。

元の投稿で解決策を見る

4件の返信4

Jizo_Inagaki
Shopify Partner
990 373 690

初期状態のDebutで試しましたが、以下のスクリーンショットのように「テキストなしでボタンのみ」の場合、スマホサイズではボタンは画像より下に移動していました。

スクリーンショット 2020-09-22 1.03.15.png

スクリーンショット 2020-09-22 1.03.30.png     スクリーンショット 2020-09-22 1.15.54.png

この点から、直るまで何かしら変更された部分を少しづつ元に戻すか、今のテーマを残したままそれを参考にしながら再度手を加えていくかなどの方法をとられた方がよいかもしれません。

Jizo_Inagaki | フリーランスのwebデザイナー
- テーマのカスタム承れます。
- 記載した回答で解決できましたらベストソリューションの承認をお願いします。
- DMや指名による対応はご依頼として有料でのみ承ります。
scopecoco
観光客
3 0 1

ご確認、ご連絡誠にありがとうございます。

私の単語の使い方に誤りがありました。

「ボタン」ではなく、スライド画像に重なっている、

スライドショーの矢印とドットが表示されているパーツのことです。

scopecoco_0-1600709460229.png

この部分を画像の下に移動させることはできないものでしょうか?

Jizo_Inagaki
Shopify Partner
990 373 690

成功

対象を間違っており申し訳ありません。

方法はいくつか考えられますが、theme.scss.liquidで作業を行うならば、「slideshow__text-wrap--mobile」で検索して場所を特定し、以下を

 

.slideshow__text-wrap--mobile {
  display: none;

  @include media-query($small) {
    display: block;
    position: relative;
    top: -1.1rem;
    background-color: $color-bg;
    width: 85%;
    margin: 0 0 -1.1rem 7.5%;
  }
}

 

 以下のように変更することで恐らくご希望の状態になるかと思います。

 

.slideshow__text-wrap--mobile {
  display: none;

  @include media-query($small) {
    display: block;
    position: relative;
    background-color: $color-bg;
    width: 85%;
    margin: 0 0 0 7.5%;
  }
}

 

 軽く見たところでは大丈夫そうですが、この変更により動作に影響がでないとも限りませんので、作業後は不具合がないかをチェックもお勧めします。

 

Jizo_Inagaki | フリーランスのwebデザイナー
- テーマのカスタム承れます。
- 記載した回答で解決できましたらベストソリューションの承認をお願いします。
- DMや指名による対応はご依頼として有料でのみ承ります。
scopecoco
観光客
3 0 1

質問の際の説明が不足しており申し訳ございませんでした。

教えていただいた方法で解消できました!

早々にご回答いただき感謝いたします。

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