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

2016 年 5 月 12 日

ホーム フォーラム 要望と提案 【提案】各ボタンの共通CSSクラスの設置

このトピックには3件の返信が含まれ、2人の参加者がいます。1 年、 2 ヶ月前 asumaru さんが最後の更新を行いました。

4件の投稿を表示中 - 1 - 4件目 (全4件中)
  • 投稿者
    投稿
  • #78558

    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クラスで変更できます。

    どうかご検討ください。

    #78575

    yasumax
    キーマスター

    こんにちは。

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

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

    #78576

    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ファイルをカスケードしています)

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

    #78579

    asumaru
    参加者

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

4件の投稿を表示中 - 1 - 4件目 (全4件中)

このトピックに返信するにはログインが必要です。