【提案】各ボタンの共通CSSクラスの設置

[asumaru]

WelCartを利用させていただいています。
——————————————-
WordPress のバージョン：4.5.2
Welcart のバージョン：1.8.2
ご利用のテーマ：welcart_basic.1.0.0 を 修正したもの
——————————————–

テーマ welcart_basic を 元にして ボタンの色などを修正しているのですが、style.css の ボタンの色の指定が「INPUT[type=”submit”]」だったり 、各要素のidやclassであったりしています。
「INPUT[type=”submit”]」なら一括で変更できるのですが、a要素を使っているものは 同じdiv内にボタン化していない要素もあり、深いセレクタで定義されています。
例) 会員ログインの「新規ご入会はこちら」ボタン
この複雑なボタンのセレクタのため、CSSファイル自体が巨大化しているようにも思います。

そこで提案なのですが、ボタン形状の要素に共通のCSSクラスを設定してはいかがでしょうか？
例) <input type=”submit” class=”usces-buttons” … >

また重要な「次へ」となるボタン(現 オレンジ色のボタン) にも 特別なボタンを示すCSSクラスでまとめてはいかがでしょうか？
例) <input type=”submit” class=”usces-buttons usces-next-buttons” … >

こうすれば、ボタンの形状は共通したCSSクラスで変更できます。

どうかご検討ください。

[yasumax]

こんにちは。

ご提案ありがとうございます。
ご要望リストに追加させていただきます。

ただ、テーマ側のボタンではなくWelcart本体が出力しているボタンもありますので、よく吟味して導入を検討したいと思います。

[asumaru]

ありがとうございます。

実は Welcart本体が出力しているボタン の方が大変でして、下記の5つのフィルタフックでCSSクラス「usces-next-buttons」(仮)を差し込んで使っています。

usces_filter_item_sku_button
usces_filter_get_cart_button
usces_filter_get_customer_button
usces_filter_confirm_inform
usces_filter_newmember_button

対象はこれだけでいいのかわからないのですが、とりあえず 色はこれで対応できました。

ただ本当はホバー時にCSSアニメーションをつけたいのですが、「INPUT[type=”submit”]」はつけれるのですが、上記のフィルタでCSSクラスを追加したボタンはアニメーションがつけれませんでした。
.usces-next-buttons:hover だとOKなのですが、
.usces-next-buttons::before を使うものはだめでした。
多分、元のCSSで:hoverしているところが邪魔しているみたいです。
(全部を書き換えるのが大変なので、新しいCSSファイルをカスケードしています)

ボタンが共通化されると このあたりも対応できると思いますので、よろしくお願い致します。

[asumaru]

「usces-buttons」(仮)が欲しい もう一つの理由を書くのを忘れていました。
「INPUT[type=”submit”]」を使ってCSSを操作すると「#searchsubmit」(検索ボタン)まで変わってしまいます。
そのため CSSでは ｢input[type=”submit”]:not(#searchsubmit)｣で定義しないとおかしなことになってしまいました。
他にもあるかもしれません。
なので 「usces-buttons」(仮)クラスの追加は節に願います。

[投稿者]

投稿