FROM CACHE - jp_header
解決済

craftテーマ内のslideshowセクションにおいて、1枚目のスライドのリンクボタンにのみカラー変更をあてたい

FUFU1
Shopify Partner
4 0 1

投稿失礼致します。
現在Craftテーマでに沿って開発中で、時折カスタムcssで色やフォント、transitionなどの変更をかける程度にコードに触れております。

 

件名の通り、スライドショーの1枚目にだけ変更を適用したいためクラスを探していたのですが、なかなか見つからず路頭に迷ってしまいました。

概要は以下のとおりです。

 

*対処したこと

カスタムcssいじりましたが解決しなかったため、開発者ツールを使用してボタン部分のクラスを発見しリキッドファイルを見ながら該当する箇所を探しましたが、結局わからずじまいです…

 

*問題

・スライドショーの仕組みがどのファイルのどこで管理されているのか

・スライドが1枚、2枚、3枚と増えていくごとに適応させていくコードがどれなのかがはっきりとわからない

・そもそもスライドを限定したcssの適用ができるのか不明

 

ご鞭撻いただける方もしくはやったことあるよって方がいましたら、どうかご教授いただけたら幸いです。

よろしくお願いいたします。

1 件の受理された解決策
Jizo_Inagaki
Shopify Partner
967 366 686

成功

あくまで私が想定してる構造と方法に基づきますが、nth-of-typeなど「n番目の要素を指定する」場合は以下が重要です。

  • n番目として数えることができる要素を把握する

 

スクリーンショット 2023-07-31 23.28.41.png

今回であれば上画像のような構造となっており、青枠内に複数の赤枠が配置されており、この赤枠が「n番目として数える対象」です。

 

より具体的に書くなら「div.slideshow__slide が4つ並んでいる」という構造です。

そのため2番目を指定するのであれば以下のように考えられます。

.slideshow__slide:nth-of-type(2) {}

 

繰り返しになりますが以下の手順を踏みます。

  1. CSSを反映させたい要素を内包する、n番目として数えられる要素を探す
  2. 該当要素にnth-of-typeなどのn番目を指定できる擬似クラスを追加する
  3. CSSを反映させたい要素を特定するクラスやIDを追加する

上記のようにして、前出の以下のようなセレクタが作れます。

.foo:nth-of-type(1) .button--primary {
  background-color: red;
}
Jizo_Inagaki | フリーランスのwebデザイナー
- テーマのカスタム承れます。
- 記載した回答で解決できましたらベストソリューションの承認をお願いします。
- DMや指名による対応はご依頼として有料でのみ承ります。

元の投稿で解決策を見る

6件の返信6

Jizo_Inagaki
Shopify Partner
967 366 686

CSSを学んでいるところであれば、以下の擬似クラスを学ばれることをお勧めします。

https://developer.mozilla.org/ja/docs/Web/CSS/Pseudo-classes#%E3%83%84%E3%83%AA%E3%83%BC%E6%A7%8B%E9...

試作していませんが、おそらく上記擬似クラスの:nth-of-typeなどで対応できるかなと思います。

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

ご回答ありがとうございます!
勉強になります。

:nth-of-typeで書くとするとクラス名での指定ができないんですね…。
カスタムcssはほぼクラス名で改良していたので、どうにかしてボタンのクラスである「button--primary」を使ってできないものですかね。。

 

Jizo_Inagaki
Shopify Partner
967 366 686

>:nth-of-typeで書くとするとクラス名での指定ができない

>ボタンのクラスである「button--primary」を使って

上記を把握しかねているのですが、記載されているクラスを指定して対応可能だと思います。

ほぼ答えになってしまいますが、以下のように「最初の.fooの下層にある.button--primary」を指定する形になります。

 

.foo:nth-of-type(1) .button--primary {
  background-color: red;
}

 

上記の記述方法では不可ということでしょうか?

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

拙い文章で申し訳ありません。
ご対応ありがとうございます。

.banner__buttons:nth-of-type(2) .button--primary {
background-color: red;
}
スライドの順番を少し変更しまして、1枚目はバナーのみのスライド、2〜4枚目がボタン付きのスライドにして、2枚目のみ効かせたいと思い上記のように変更したのですが、3枚目のスライドが反応してしまいます。

()の数字を1にしても1、3枚目が赤くなってしまう。
うまく説明できてるか微妙ですが…アドバイスいただけると嬉しいです。

Jizo_Inagaki
Shopify Partner
967 366 686

成功

あくまで私が想定してる構造と方法に基づきますが、nth-of-typeなど「n番目の要素を指定する」場合は以下が重要です。

  • n番目として数えることができる要素を把握する

 

スクリーンショット 2023-07-31 23.28.41.png

今回であれば上画像のような構造となっており、青枠内に複数の赤枠が配置されており、この赤枠が「n番目として数える対象」です。

 

より具体的に書くなら「div.slideshow__slide が4つ並んでいる」という構造です。

そのため2番目を指定するのであれば以下のように考えられます。

.slideshow__slide:nth-of-type(2) {}

 

繰り返しになりますが以下の手順を踏みます。

  1. CSSを反映させたい要素を内包する、n番目として数えられる要素を探す
  2. 該当要素にnth-of-typeなどのn番目を指定できる擬似クラスを追加する
  3. CSSを反映させたい要素を特定するクラスやIDを追加する

上記のようにして、前出の以下のようなセレクタが作れます。

.foo:nth-of-type(1) .button--primary {
  background-color: red;
}
Jizo_Inagaki | フリーランスのwebデザイナー
- テーマのカスタム承れます。
- 記載した回答で解決できましたらベストソリューションの承認をお願いします。
- DMや指名による対応はご依頼として有料でのみ承ります。
FUFU1
Shopify Partner
4 0 1

詳細な解説本当に感謝です。
おかげさまで2枚目のみ色変更できました。

順番決めの対象となる要素を先頭に入れてから、nth-of-typeの後に変えたい場所を指定する作りになっているのですね。
学ばせていただきました。

本当にありがとうございます!!