超絶簡単にBootstrapをカスタマイズ出来るWEBサービス!Bootstrap Live Customizer
どうもpei(@pei_babo)です。
Bootstrapがあって良かった!
本当にこんな時代ですね。
もう浸透どころの騒ぎではないですので、Bootstrapを使う上で問題となるのが、いかにカスタマイズするか…ですね。
流行りのLESSとかSASSとかバリバリ使える方にとってはBootstrapのカスタマイズもちゃちゃっと出来てしまいそうですが、そんな魔法を使えない私やノンデザイナーな方々にとってまさに朗報な神的WEBサービスがあります。
それが今回ご紹介するBootstrap Live Customizerです。
まさにその名の通り「ライブ」で「その場」で「リアルタイム」にカスタマイズ出来るのです。
ちなみに作ってくれている方はハンガリー出身のこの方です。
ありがとうございます!
プログラミングやWordPressを習得するのに一番近道な方法とは?
目次
Bootstrap Live Customizerの使い方
まずは肝心なWEBサイトはこちら。
画面説明
- ①変更した内容をリアルタイムで確認する画面
- ②設定を変更したりダウンロードしたりするコントロール画面
- ③カスタマイズをする作業画面
リアルタイムで変更した内容を確認しながら作業できるので楽です。
カスタマイズ方法
作業画面で色の変更から各クラスや要素の内容を簡単にカスタマイズ出来ますが最初はちょっと使い方に戸惑うので説明します。
色を変えたい!
方法としては2パターンあるのですが、その一つである元々用意されているカラーパレットがちょいと使いづらいのが玉にキズ。
もう1パターンはテキストボックスに直接入れていくパターン。
こちらの方が普通に使いやすいのではないかな。
テキストボックスには16進数、RGB式など通常CSSに指定する書き方をそのまま入力して大丈夫です。
グリッド間の幅を変えたい!
Bootstrapを使っていてちょっと思うのがちょっとグリッド間の幅、いわゆるガターと呼ばれている幅がちょいとだけ広すぎやしないかということ。
それも簡単に変更しちゃいましょう。
色々設定したら最後はダウンロード
色々とオリジナルにカスタマイズが終了したらマイブートストラップをダウンロードしましょう。
さあこれで自分のオリジナルのBootstrapの完成ですね。
おまけ
そういえばコントロール画面で定義済みのBootstrapテーマも選択出来ますよ!
最初から全部自分でカスタマイズするのは面倒…という方はこちらを使用しても良いのではないでしょうか。
Hi Pei, greetings from Hungary!
I have updated the color picker, now there is a HSV panel in it. Is it easier to use?
Thanks for your post 🙂
István
Hi István!
It is very honored guests a message! !
I’m sorry … If you’re gone wrote like a color picker is hard to use …
I tried a new color picker! Is easy to use! !
I will soon write a new article! !
Pei