超絶簡単にBootstrapをカスタマイズ出来るWEBサービス!Bootstrap Live Customizer

 
どうもpei(@pei_babo)です。
Bootstrapがあって良かった!
本当にこんな時代ですね。

もう浸透どころの騒ぎではないですので、Bootstrapを使う上で問題となるのが、いかにカスタマイズするか…ですね。

流行りのLESSとかSASSとかバリバリ使える方にとってはBootstrapのカスタマイズもちゃちゃっと出来てしまいそうですが、そんな魔法を使えない私やノンデザイナーな方々にとってまさに朗報な神的WEBサービスがあります。

それが今回ご紹介するBootstrap Live Customizerです。
まさにその名の通り「ライブ」「その場」「リアルタイム」にカスタマイズ出来るのです。

ちなみに作ってくれている方はハンガリー出身のこの方です。
21926_109517635898925_230349457_n
ありがとうございます!

プログラミングやWordPressを習得するのに一番近道な方法とは?

 

Bootstrap Live Customizerの使い方

まずは肝心なWEBサイトはこちら。

 

画面説明

主に3つの画面に別れてます。
Bootstrap_Live_Customizer

  • ①変更した内容をリアルタイムで確認する画面
  • ②設定を変更したりダウンロードしたりするコントロール画面
  • ③カスタマイズをする作業画面

リアルタイムで変更した内容を確認しながら作業できるので楽です。

 

カスタマイズ方法

作業画面で色の変更から各クラスや要素の内容を簡単にカスタマイズ出来ますが最初はちょっと使い方に戸惑うので説明します。

 
色を変えたい!
方法としては2パターンあるのですが、その一つである元々用意されているカラーパレットがちょいと使いづらいのが玉にキズ。
Bootstrap_Live_Customizer 3

 
もう1パターンはテキストボックスに直接入れていくパターン。
こちらの方が普通に使いやすいのではないかな。
テキストボックスには16進数、RGB式など通常CSSに指定する書き方をそのまま入力して大丈夫です。

Bootstrap_Live_Customizer 4

 
グリッド間の幅を変えたい!
Bootstrapを使っていてちょっと思うのがちょっとグリッド間の幅、いわゆるガターと呼ばれている幅がちょいとだけ広すぎやしないかということ。

それも簡単に変更しちゃいましょう。

Bootstrap_Live_Customizer 6

 

色々設定したら最後はダウンロード

色々とオリジナルにカスタマイズが終了したらマイブートストラップをダウンロードしましょう。

ダウンロードはコントロール画面で出来ますよ。
Bootstrap_Live_Customizer 7

通常版と圧縮版を選択。まあ圧縮版で良いでしょう。
Bootstrap_Live_Customizer 8

さあこれで自分のオリジナルのBootstrapの完成ですね。

 

おまけ

そういえばコントロール画面で定義済みのBootstrapテーマも選択出来ますよ!
最初から全部自分でカスタマイズするのは面倒…という方はこちらを使用しても良いのではないでしょうか。

Bootstrap_Live_Customizer 9

 
すごいいっぱいテーマがあるよ。
Bootstrap_Live_Customizer 10

 
本当に作成者に感謝です。


 

もし良かったらフォローとか購読して頂けると嬉しいです!╭( ・ㅂ・)و ̑̑ グッ !

follow us in feedly

Comments: 2

  1. 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

    • pei says:

      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

István Ujj-Mészáros へ返信する コメントをキャンセル

メールアドレスが公開されることはありません。

CAPTCHA


このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください