ボタンの色のカスタマイズについて
- このトピックには7件の返信、4人の参加者があり、最後に
Vektor,Incにより1年、 3ヶ月前に更新されました。
-
投稿者投稿
-
2019年10月20日 6:39 PM #22977
Vektor,Incキーマスター現在Lightning ProのJPNSTYLEでサイトを作成しております。
そこでボタンの「btn-default」を使っているのですが、ボタンにマウスをあわせた時に色が変わるのですが、その色合いがとても好きで、自分でも色々やてみましたが、ボタンの枠部分の繊細な部分が出来ませんでした‥。ボタンにマウスをあわせた時に変化する状態が最初の表示になるようなボタンの作成をお願いしたいのです。
そして、マウスを合わせた時には現在の最初の表示になるように‥最初の表示でなくてもかまいません。少し変化するだけでも良いです。どうぞよろしくお願いいたします。
2019年10月21日 11:24 AM #23011
うなこモデレーター「最初の表示になるようなボタン」というのは、どこの表示のことなのかが分からなかったのですが、
以下の解釈で回答します。JPNSTYLEのデザインスキンで「btn-default」のクラスを使用してボタンを作成していて
ボタンのボーダー色やボタンの色をキーカラーではなく自分で変更するcssが書きたい。
※#〇〇〇と#△△△の部分はお好きなカラーコードを入れてください。.btn-default { border-color: #〇〇〇; color: #f00; } .btn-default:after { border-color: #〇〇〇 !important; } /*フォーカス時マウスオーバー時*/ .btn-default:focus, .btn-default:hover { background-color: #△△△; }
もし質問の意図が違っていましたら、ごめんなさい…。
画像や、差し支えなければURLを貼って質問されるとわかりやすいかもしれません。
2019年10月21日 6:47 PM #23049
yunahana参加者2019年10月22日 9:23 AM #23091
DRILL LANCERモデレーター該当ボタンの実装方法やボタン部分のHTMLがわかればよいのですが・・・
普通に.btn-default
をいじっただけでは上手く行かない場合もあると思うので・・・2019年10月22日 11:35 AM #23099
yunahana参加者RICK 様
コメントありがとうございます。
該当ボタンの実装方法とは、下記のような記述の事でしょうか?
<a href="/#/" class="btn btn-default btn-lg">お問い合わせフォーム</a>
テストサイトでボタンを設置してみました。
記述
<a href="/#/" class="btn btn-default btn-lg">お問い合わせフォーム</a>
こちらで何かヒントになりますでしょうか?
https://wptest.yunahana.com/sample-page/お手数をおかけいたしますが、よろしくお願いいたします。
2019年10月23日 9:59 AM #23208
うなこモデレーターテストサイトありがとうございます、以下のcssでいかがでしょうか?
追加cssなどに張り付けてください。.siteContent .btn-default { border: 2px solid rgba(255,255,255,.5); background-color: #337ab7; color: #fff; } .siteContent .btn-default:after { border: 1px solid rgba(255,255,255,.5); } .siteContent .btn-default:hover { border: 2px solid #337ab7 !important; color: #337ab7; background:#fff; } .siteContent .btn-default:focus:after, .siteContent .btn-default:hover:after { border: 1px solid #337ab7; }
もともとテーマ内に記述してあるcssの「.siteContent .btn-default」が付いているクラスが優先されてしまう箇所がありましたので、「.siteContent .btn-default」にして記述しました。
.siteContent内の.btn-defaultに効くようになっていると思います。いかがでしょうか?
-
この返信は1年、 3ヶ月前に
うなこが編集しました。
2019年10月23日 2:31 PM #23235
yunahana参加者unako 様
ボタンのコード、ありがとうございます!
すぐにでも試してみたくてワクワクしているのですが、パソコン触れるのが夜になります。
またご連絡させていただきます!よろしくお願いいたします。
-
この返信は1年、 3ヶ月前に
yunahanaが編集しました。
2019年10月23日 7:04 PM #23253
yunahana参加者unako 様
帰宅して、早速cssにコードを貼り付けました。
完璧すぎて感動しました!
本当に本当にありがとうございました!
他のサイトにも色を変えて応用したいと思います。
ありがとうございました! -
この返信は1年、 3ヶ月前に
-
投稿者投稿
- このトピックに返信するにはログインが必要です。