hifive開発者ブログコンテンツへスキップFollow:RSSTwitterhifive開発者ブログWebクライアント開発プラットフォーム「hifive」の開発者ブログです。2016/02/26Bootstrapは簡単にwebサイトが作れるフレームワークとしてここ数年来人気があります。レスポンシブデザインの台頭でWeb制作の現場でも、より早い段階で実際に動かせるプロトタイプが必要となる場面が増えました。Bootstrapで少しカスタマイズして使いたいという方やガッツリカスタマイズしたい人さまざまだと思います。ここではBootstrapのカスタマイズを簡単にできるサービスを集めてみました。Customizer右側の画面でカスタマイズして、完成したら左側のGetボタンからダウンロードします。色の変更にはカラーバーのようなツールを使用するか、直接カラーコードをいれるかいずれの方法にも対応しています、お好きな方でつかってみるといいでしょう。Bootstrap画像からカラーパターンを取り出し、bootstrapのテーマに取り出したカラーを当てはめ、カスタマイズすることができます。主な用途はメインに使用する画像から合うカラーを取り出し、bootstrapをカスタマイズすることですが、メイン画像以外にもロゴマークなどからサイトの配色を決めるのにも使えそうです。3.Bootswatchrbootstrapの変数を変更し、見た目を変更することができる。画面右側にソースコードが出てくるので、ソースの変数のカラーコードを変更すると、右側のプレビュー画面表示されます。Magicブラウザ上でbootstrapのテーマを作ることができるサービスで、Bootstrap2.3.2からBootstrap3.1に対応。画面右側の@gray-darkerなどの変数が書かれている箇所に16進数カラーコードをいれて、各部位の色を変更することができます。Bootswatchrに比べると、ソースではなくテキストボックスに入れる形なので、CSSやLESSの開発に慣れていない人でもとっつきやすい点が挙げられます。generatorBootstrapの画面のパーツごとにカラーリング、文字の大きさ、隙間などを細かく調整できるサービスです。カラーテーマを作るのであればこれをベースにすると良さそうです。Bootstrapビジュアル的ではなく、LESSでの変数やjQueryで使う機能などを設定した上でカスタマイズされたテーマをダウンロードできます。プログラマブルなカスタマイズが可能となっています。まとめいかがでしたでしょうか。登場の機会が増えてきているBootstrap。使用する際にカスタマイズが必須となってきています。開発工数短縮のためにも、素早くプロトタイプを作れることが求められてきている今日このごろ、今回紹介したようなカスタマイズサービスが重宝することでしょう。HTML5コメントは受け付けていません。Blog.%d人のブロガーが「いいね」をつけました。