こんにちは。世界一やさしいパソコン教室の白川です。
自分の備忘録を兼ねて「これ、いいな!」と思った情報をシェアしていきます。
本日は「画面の横に縦型でついてくるお問い合わせボタンの作り方」についてです。
基本の作り方は、ゆうそうとブログさんが詳しく解説してくださっていますので、
ご覧ください。
ゆうそうとさん、ありがとうございます。
アレンジ ボタンの色を変更したい
はい。というわけで、基本のお問い合わせボタンは、できましたか?
例では、落ち着いたブルーのボタンになっていますが、
サイトの雰囲気によっては、色を変えたいこともあると思います。
そこで、色の変え方を解説しますね。
★このサイトでは、エックスサーバーでの編集方法を例にしています。
★Wordpressのテーマ「Affinger」を使用しているときの例です。
FTPソフトが使える方は、該当のファイルを編集して、
再度、フォルダへアップロード(上書き)してください。
step
1基本の作り方でアップロードした「toastr」フォルダの中の→「build」ファイルを開きます。
step
2「toastr.min.css」を選択して「編集」をクリックします。
※FTPの方は、「toastr.min.css」をダウンロードするか、
手元の「toastr.min.css」をエディタ(TeraPadなど)で開いて編集してください。
step
3右にスライドして.toast-info{background-color:#2F96B4} と書かれているところを見つけます。
#2F96B4 を、好きな色に変更してください。
※toarst・・は、4つあるので間違えないようにしてくださいね。
編集するのは「toarst-info」です。
★色の番号の確認は、このサイトが便利です。
原色大辞典
ファイルを保存して完了です。
次回は「表示位置を上にずらす」「お問い合わせ→ご予約」に変更など文字を変えるカスタマイズ方法も解説しますね。
ご不明な点は、お気軽にお問い合わせください。