ボタンのカスタマイズ

  • このトピックには5件の返信、1人の参加者があり、最後にHidekichiにより4年、 1ヶ月前に更新されました。
5件の返信スレッドを表示中
  • 投稿者
    投稿
    • #48044 返信
      Happy Cafe
      ゲスト

      お世話になりますm(_ _)m;;

      こんな感じ ↓ (PCのみでの表示になります)のボタンにしたいのですが、

      http://happycafe.click/?p=1195&preview=1&_ppp=b7fb4f4a70

      用意してっくださっている拡張クラスのカスタマイズの仕方が分からなかったので
      子テーマにbuttonの設定を記述したのですが、
      タブレットと携帯ではデフォルトの表示になってしまいます。
      どうすればよかったのでしょう。。。

      よろしくお願いします。

    • #48046 返信
      Hidekichi
      ゲスト

      サンプル: ボタンの使用と、aタグをボタンぽく見せる | jsFiddle

      ひとまず、ボタンそのものを使う方法とaタグをボタンぽく見せるという方法があります。どちらも同じようなものですが意味合い的にはボタンを使う方が良いかと思います。
      ボタンの場合、aタグにはスタイルする必要はなく、逆に不要なものを取り除く必要があるかも知れません。

      もしAMPを利用されている場合は、それ用にcssを別で書く必要があるかも知れませんが、基本はこんな感じです。

      またスマホではhoverが無いので、マウスオーバーでのアニメーション効果は基本PC向けです。

    • #48051 返信
      Happy Cafe
      ゲスト

      できました!

      ホント、今回も至れり尽くせりのアドバイスをありがとうございます。
      fontAwesomeのフォントも仕込めるのですね。
      見よう見まねでインターナルリンク用にもう一つ作りました。
      これでだいぶ効率が良くなると思います♪

      AMPは利用していません。
      というかやったほうが良くても知識がないし、勉強している余裕もないと言ったところが本音です。
      将来AMPを利用する際は、また質問させていただかないといけませんね。。。

      > またスマホではhoverが無いので、マウスオーバーでのアニメーション効果は基本PC向けです。

      マウスオーバーという行為自体がないですものね(^-^;
      でも見た目は変わりましたし、タッチの仕方が不十分だとアニメーションになったりと面白いので良しとします♪
      (iOS 10.1.1のiPhone・iPadのSafariとCromeで確認)

      ありがとうございました!!

    • #48052 返信
      Hidekichi
      ゲスト

      ただ1点追記しておくと、buttonというのは本来フォームパーツです。
      今回は、あくまでbuttonの一部機能を使いながらやってることはaタグでリンクですから特別buttonタグにこだわる必要もありません。

      フォーム以外でbuttonを使う場合はjQueryなどで本来のボタンとして使うぐらいが使いみちです。この場合aタグは必要なく、buttonにdata属性を埋め込んだりして、その内容から判断してjQuery等で画面遷移を行います。

      またボタン自体は画像でも何でもよく、リンク自体はスタイルを持っている必要もありませんから、

      サンプル: ボタンの使用と、aタグをボタンぽく見せる -1つ追加- | jsFiddle

      ということもできます。

    • #48066 返信
      Happy Cafe
      ゲスト

      なるほどです。
      フォームパーツだから
      -webkit-appearance: none;
      -moz-appearance: none;
      と、リセットしてやる必要があるのですね。
      buttonがフォームパーツであることすら知りませんでした(^-^;

      教えて頂いた内容を理解するのに3検索ほど必要でしたが、
      なんとか理解できたと思います。

      CSS、面白いですね♪
      教えて頂いたtest2も含めてコピペして、
      Tiops箱に納めさせていただきますm(_ _)m

    • #48071 返信
      Hidekichi
      ゲスト

      buttonはほぼinputと同じ感じで使えるのですが、

      <input type="submit">送信</input>
      <button type="submit">送信</button>

      ※ type=”submit”は初期値。ただのボタンにする場合は、type=”button”とします

      buttonにはdisabled属性というのがあってボタンを押せないようにしたり、よりボタンとしての本来の機能を使えるようになってます。inputは、まぁボタンに変わりないんですが、汎用ボタンという感じです。

      まぁ別に使わなくても同じようなことはできるんですけどね(笑)
      仮に何かしら問題があってcssが機能しない状態になっても、それがボタンであるというふうに表示させることが本来の要素の意味となるので、なるべく上手く使いたい感じですね。

      appearance: none;

      button{
              background-color: transparent;
              border: none;
              cursor: pointer;
              outline: none;
              padding: 0;
              appearance: none;
      }

      こんな感じにリセットできるそうです。

      参考: button要素のcssをリセットしたい | Qiita

5件の返信スレッドを表示中
返信先: ボタンのカスタマイズ
あなたの情報:




スポンサーリンク
アドセンス(大)
アドセンス(大)