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

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

もくじ

スポンサーリンク

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

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

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

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


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

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

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

&button(リンク先,primary,gradient){通常のグラデーションボタン};

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

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

なので、オプション指定を変更してあげればボタンの色は変更出来るってことなんです。それでは実際にグラデーション付ボタンの色を変更していきたいと思います。


スポンサーリンク


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

&button(リンク先,primary,gradient){通常のグラデーションボタン};

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

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

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


水色ボタン 「infoと記載」

&button(#,info,gradient){水色グラデーションボタン};


赤色ボタン 「dangerと記載」

&button(#,danger,gradient){赤色グラデーションボタン};


緑色ボタン 「successと記載」

&button(#,success,gradient){緑色グラデーションボタン};


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

&button(#,warning,gradient){オレンジグラデーションボタン};


白色ボタン 「何も記載しない」

&button(#,,gradient){白色グラデーションボタン};


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

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


関連する記事&よく読まれる記事


haik関連記事

スポンサーリンク


このエントリーをはてなブックマークに追加