FROM CACHE - jp_header
解決済

ボタンデザインのcss設置箇所について

Panda2
Shopify Partner
28 0 2

お世話になっております。コーディング初心者です。

 

コレクションページのカテゴリー分けをボタンで表示したいのですが

ボタンデザインの設置箇所がわかりません。

 

色んなサイトを見ては参考にしてみたのですが、cssが上手く反映されず…

 

設置したいボタンのコードは以下になります。

何卒ご教示いただけますようお願いいたします。

 

/* CSS */

.button-80 {
background: #fff;
backface-visibility: hidden;
border-radius: .375rem;
border-style: solid;
border-width: .125rem;
box-sizing: border-box;
color: #212121;
cursor: pointer;
display: inline-block;
font-family: Circular,Helvetica,sans-serif;
font-size: 1.125rem;
font-weight: 700;
letter-spacing: -.01em;
line-height: 1.3;
padding: .875rem 1.125rem;
position: relative;
text-align: left;
text-decoration: none;
transform: translateZ(0) scale(1);
transition: transform .2s;
user-select: none;
-webkit-user-select: none;
touch-action: manipulation;
}

.button-80:not(:disabled):hover {
transform: scale(1.05);
}

.button-80:not(:disabled):hover:active {
transform: scale(1.05) translateY(.125rem);
}

.button-80:focus {
outline: 0 solid transparent;
}

.button-80:focus:before {
content: "";
left: calc(-1*.375rem);
pointer-events: none;
position: absolute;
top: calc(-1*.375rem);
transition: border-radius;
user-select: none;
}

.button-80:focus:not(:focus-visible) {
outline: 0 solid transparent;
}

.button-80:focus:not(:focus-visible):before {
border-width: 0;
}

.button-80:not(:disabled):active {
transform: translateY(.125rem);
}

 

 

 

  • CSS
1 件の受理された解決策

株式会社フルバランス
Shopify Partner
1473 521 651

成功

Okuchistaffさま

はじめまして、フルバランスの渡邉です。

ご質問を確認いたしました。

コード編集は少しややこしい部分がありますよね。

 

原因としては以下が考えられるかと思います。

・クラス名が間違っている

 コレクションページで検証ツール(右クリック -> 検証)を開き、変更されたい箇所のクラス名が一致しているかご確認ください。

 検証ツールの確認方法:https://prog-8.com/docs/html-dev

 

・cssを書いたファイルが正しく読み込まれていない

 cssは新規アセットに記載されてますでしょうか?その場合、theme.liquidでテーマ既存のcssファイル(base.cssなどの名称)より前に読み込ませていると優先順位の関係で反映されません。後に読み込ませてください。

 

スクリーンショット 2022-11-25 18.16.27.png

 

 詳細は以下フォーラムの回答をご参照いただけますと幸いです。

https://community.shopify.com/c/%E6%8A%80%E8%A1%93%E7%9A%84%E3%81%AAq-a/%E3%82%AA%E3%83%AA%E3%82%B8%...

 


ご参考になりましたでしょうか。

私たちの励みにもなりますので、
お役に立てていればBest Answerボタンを押して頂ければ嬉しいです。

分からない点があれば、またいつでもご連絡ください。

フルバランス 渡邉

株式会社フルバランス(Shopify Experts)
Shopify専門のEC成長支援会社です。ストアの新規構築から運用や改善のサポートなどShopifyに関する幅広いサービスを行なっております。
ECの技術・実務・成長、お悩みのことがあれば、お気軽にご相談ください。
『すべてのブランドの特大成長エンジンを搭載する』 株式会社フルバランス

元の投稿で解決策を見る

2件の返信2

株式会社フルバランス
Shopify Partner
1473 521 651

成功

Okuchistaffさま

はじめまして、フルバランスの渡邉です。

ご質問を確認いたしました。

コード編集は少しややこしい部分がありますよね。

 

原因としては以下が考えられるかと思います。

・クラス名が間違っている

 コレクションページで検証ツール(右クリック -> 検証)を開き、変更されたい箇所のクラス名が一致しているかご確認ください。

 検証ツールの確認方法:https://prog-8.com/docs/html-dev

 

・cssを書いたファイルが正しく読み込まれていない

 cssは新規アセットに記載されてますでしょうか?その場合、theme.liquidでテーマ既存のcssファイル(base.cssなどの名称)より前に読み込ませていると優先順位の関係で反映されません。後に読み込ませてください。

 

スクリーンショット 2022-11-25 18.16.27.png

 

 詳細は以下フォーラムの回答をご参照いただけますと幸いです。

https://community.shopify.com/c/%E6%8A%80%E8%A1%93%E7%9A%84%E3%81%AAq-a/%E3%82%AA%E3%83%AA%E3%82%B8%...

 


ご参考になりましたでしょうか。

私たちの励みにもなりますので、
お役に立てていればBest Answerボタンを押して頂ければ嬉しいです。

分からない点があれば、またいつでもご連絡ください。

フルバランス 渡邉

株式会社フルバランス(Shopify Experts)
Shopify専門のEC成長支援会社です。ストアの新規構築から運用や改善のサポートなどShopifyに関する幅広いサービスを行なっております。
ECの技術・実務・成長、お悩みのことがあれば、お気軽にご相談ください。
『すべてのブランドの特大成長エンジンを搭載する』 株式会社フルバランス
Panda2
Shopify Partner
28 0 2

ご丁寧にアドバイスいただきありがとうございました。

返信が遅くなり、申し訳ございません。

頂いたアドバイスを参考に、コード編集に挑戦してみようと思います。