学生のみなさん!確定申告するとアルバイト代の税金が戻ってくるよ!

[み]キレイなボタンをカンタンに作成できる「Twitter Bootstrap Button Generator」

Twitter Bootstrapってすごいですね。
ちょっとしかさわってませんが、カンタンにサイトをつくれちゃいます。
そこで、今回はTwitter Bootstrapをベースにしたボタンをカンタンに作成できるオンラインジェネレータを紹介します。

Twitter Bootstrap Button Generator

Twitter Bootstrap Button Generatorっていう名前が、そのまんますぎますね。
それで、Twitter Bootstrap自体カンタンにあつかえる代物でしたが、このジェネレーターはさらにカンタンにあつかうことができます。
ボタンをつくるだけなら、htmlとかCSSとかぜんぜん知らなくてもできちゃいます。

左側でいろいろ選ぶと、右側にリアルタイムでボタンとコードが生成されます。
こんなカンジです。

ただ、ポチポチ選ぶだけでボタンをつくれます。

ボタンをサイトに実装する方法

こちらもカンタンで、やることは次の2つです。

  • Bootstrapを読み込む
  • 生成されたコードをはりつける

では、いちおうBootstrapを読み込む方法ですが、
<head>内にこんなコード書けば大丈夫です。
[cc lang=”html”] [/cc] これは、ルート直下にCSSフォルダがあって、そこにBootstrapのCSSファイルを入れてた場合です。
で、生成されたボタンのコードは、そのまんまはりつけるだけなんで問題ないと思いますが、念のため。
さっき画像で紹介したボタンのコードです。
[cc lang=”html”] これいいね
[/cc] これで、終わりです。

あ、まだでした。
アイコンを付けたボタンを表示するには、アイコンの画像ファイルもサーバーにあげないとダメです。
一番カンタンなのは、ルート直下にimgフォルダをつくって、そこにいれるとOKです。
おしまい。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です