ボタン

基本のボタン

オプション

名前説明
primary青いボタンを表示します
info水色のボタンを表示します
success緑色のボタンを表示します
warning黄色のボタンを表示します
danger赤色のボタンを表示します
round角丸のボタンを表示します
gradientグラデーションのかかったボタンを表示します
ghost背景色が透明で枠線のみのボタンを表示します
ghost-wghostの枠線と文字が白いボタンを表示します。
背景が白い部分では使用しないようにしてください
lg大きいボタンを表示します
sm小さいボタンを表示します
xs極小のボタンを表示します
block横幅いっぱいにボタンを表示します

&button(リンク先,primary){ここをクリック};
&button(リンク先,info){ここをクリック};
&button(リンク先,success){ここをクリック};
&button(リンク先,warning){ここをクリック};
&button(リンク先,danger,lg){ここをクリック};

ここをクリック &button(FrontPage,primary){ここをクリック};

ここをクリック &button(FrontPage,info,lg){ここをクリック};

ここをクリック &button(FrontPage,success,lg){ここをクリック};

ここをクリック &button(FrontPage,warning,lg){ここをクリック};

ここをクリック &button(FrontPage,danger,lg){ここをクリック};

ここをクリック &button(FrontPage,ghost,lg){ここをクリック};

購入ボタン

button(リンク先,サイズオプション)で、サイズも変えることができます。
購入ボタンや、申し込みボタンなどを大きく作って強調できます。
&button(リンク先,success,lg){ 簡単3ステップで購入する};
簡単3ステップで購入する

幅いっぱいに表示

&button(リンク先,success,lg,block){ 注文する(数量のこりわずか)};

注文する(数量のこりわずか)

丸いボタンのおまじない

おまじないは以下のように書きます。

&rbutton(FrontPage,green){文字};
↓↓
文字

丸いボタンなので中に入れる文字はデフォルトで3文字が限界です。
ただ、オプションでサイズの変更が可能です。

「&rbutton」のオプション

「&rbutton」では複数のオプションを指定できます。書式は以下。

&rbutton(ページ名 or URL,ボタンの色,ボタンサイズ,文字色,文字サイズ){文字};

「ページ名 or URL」の後に「,」で区切ってオプションを入れていきます。

ボタンの色以外は省略可能ですが、
文字サイズを指定する場合は、ボタンサイズの指定が必須です。

以下、オプションの簡単な解説。

ボタンの色

オプションを指定する場合は必須項目です。
「red」や「カラーコード(#~)」も使えます。

&rbutton(FrontPage,green){文字};
文字

&rbutton(FrontPage,#b0c4de){文字};
文字

ボタンのサイズ

ボタンのサイズを数字で指定できます。
省略時は「80」。

&rbutton(FrontPage,green,100){文字};
文字

&rbutton(FrontPage,#b0c4de,200){文字};
文字

文字色

文字色を「red」や「カラーコード(#~)」で指定できます。
省略時は「#333」。

&rbutton(FrontPage,green,red){文字};
文字

&rbutton(FrontPage,#b0c4de,#ffdead){文字};
文字

文字サイズ

文字サイズを数字で指定できますが、
ボタンサイズを先に指定しないと指定できません。

省略時は「24」。
&rbutton(FrontPage,green,200,60){文字};
文字

&rbutton(FrontPage,#b0c4de,300,150){文字};
文字