Webデザイン

画面の横に縦型でついてくるお問い合わせボタンのカスタマイズ

こんにちは。世界一やさしいパソコン教室の白川です。

自分の備忘録を兼ねて「これ、いいな!」と思った情報をシェアしていきます。

本日は「画面の横に縦型でついてくるお問い合わせボタンの作り方」についてです。

基本の作り方は、ゆうそうとブログさんが詳しく解説してくださっていますので、

ご覧ください。

ゆうそうとさん、ありがとうございます。

 

アレンジ ボタンの色を変更したい

はい。というわけで、基本のお問い合わせボタンは、できましたか?

例では、落ち着いたブルーのボタンになっていますが、

サイトの雰囲気によっては、色を変えたいこともあると思います。

そこで、色の変え方を解説しますね。

★このサイトでは、エックスサーバーでの編集方法を例にしています。

★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」です。

 

★色の番号の確認は、このサイトが便利です。

原色大辞典

https://www.colordic.org/

 

ファイルを保存して完了です。

次回は「表示位置を上にずらす」「お問い合わせ→ご予約」に変更など文字を変えるカスタマイズ方法も解説しますね。

ご不明な点は、お気軽にお問い合わせください。

  • この記事を書いた人

世界一やさしいパソコン教室

Web、PC講師25年 | Webデザイナー | Webサポート | Webデザイナー育成講師 | Office系ソフトの講師 | 業務改善アドバイザー Webやパソコンを楽しくマスターできるマンツーマンレッスンを行っています。レッスンは、1回~可能です。ぜひお気軽にお問い合わせください。

-Webデザイン