HP作成ソフト「HAIK」様々なグラデーションボタンを作成してみる

QHM haikになってからおまじない（プラグイン）で簡単にリンク付きボタンを設置できるようになり、私個人的には大変重宝しています。

また、各種あるボタンの中で私が１番使用頻度が高いのがグラデーションがかかったボタンなのですが、青色のボタンしかプラグイン一覧には記載されていませんが実はこのグラデーションボタンも色の変更が可能なことをご存知でしたか

「QHM haik」グラデーションボタンも色は変更出来ます

私個人的なお話ですが、リンクを設定できるボタンで使用頻度が高いのがグラデーションボタンなのですが、プラグイン一覧から選択できるグラデーションボタンって青一色しか選択が出来ません。

しかし、サイトのイメージカラーというモノがありどうしても青色以外のボタンを設置したいときってありますよね。普通にグラデーションがかかっていないボタンこんなボタンを使用すればそれで済むお話ですが、どうしてもグラデーション付のボタンじゃなきゃイヤ!!って人いると思います。※それってわたしです・・・・

そんな方の為に、グラデーション付ボタンの色の変更方法を説明したいと思います。

実は色を変更するのはとても簡単なことでした

まずは、プラグイン一覧から使用できるグラデーションボタンはコチラになりますよね

上のボタンのおまじない（プラグイン）はこんな感じで記載しますよね

このボタンのおまじない（プラグイン）って、ただ通常のボタンのオプション機能を使っているだけなんですよね。

「primary」が色の指定で「gradient」はグラデーションをかけますよって感じにオプション指定しています。

なので、オプション指定を変更してあげればボタンの色は変更出来るってことなんです。

それでは実際にグラデーション付ボタンの色を変更していきたいと思います。

スポンサーリンク

実際にボタンの色を変更してみましょう

もう１度言いますが、通常のボタンがこれですよね。

変更する場所は「primary」ですよ。

「gradient」を変更してしまうとグラデーションじゃなくなりますよ。

どこの箇所が変わるのかしっかりと確認してくださいね。

「infoと記載」

赤色ボタン　「dangerと記載」

緑色ボタン　「successと記載」

オレンジボタン　「warningと記載」

全部で５種類もあれば自分が運営しているサイトのイメージカラーにあったグラデーションボタンを選択出来るかと思います。

ちょっとした小技でしたが皆様の参考になればと思いまグラデーションボタンの色の変更の説明をさせていただきました。