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

Panda2 · ‎11-16-2022

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

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

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

色んなサイトを見ては参考にしてみたのですが、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);
}

株式会社フルバランス · ‎11-25-2022

Okuchistaffさま

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

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

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

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

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

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

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

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

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

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

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ボタンを押して頂ければ嬉しいです。

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

フルバランス　渡邉

元の投稿で解決策を見る

株式会社フルバランス · ‎11-25-2022