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

2019年4月23日

色々なボタンを表示するプラグイン

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){オレンジグラデーションボタン};

 

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

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

ホームページの作り方手順

またコチラではホームページ制作に関する様々な情報を掲載しておりますので、これからご自身でホームページを作られる方は是非ご覧ください

 

-おまじない
-, , ,