Horic Design

a-blog cmsやJavaScriptなどの情報を発信しています。

SublimeTextでBootstrapテーマをカスタマイズ


Bootstrapのヘッダーやボタンをカスタマイズするときどうやってカスタマイズしてますか?
私はSublimeTextでBootstrap Sassを使って、ボタンやヘッダーなどを作ってますね!!
そうすれば、ヘッダーの色やボタンの色などを下のようなコードで簡単に変更できちゃいます。

$brand-primary:#f39c12;/*プライマリカラー*/
$navbar-default-bg:#f39c12;/*ナビゲーションバーのバックグラウンドカラー*/
$navbar-default-color:#ffffff;/*ナビゲーションバーの文字カラー*/
$navbar-default-brand-color:#ffffff;/*ナビゲーションバーのブランドカラー*/
@import "bootstrap/bootstrap";

これだけで、以下のようにヘッダーの色が変えられるんですよ



では、どうやってこういった便利なSass環境を整えるのか、順をおって説明していきます。

ターミナルを使って、Bootstrap Sassをインストールしよう

まず、sudo gem install sassで、sassをインストールしてみましょう
次に、sudo gem install bootstrap-sassでBootstrap Sassを導入します。
めんどくさいので、残りの処理は下のソースコードを見てください

sudo gem install sass
sudo gem install bootstrap-sass
sudo npm install -g bower
bower install 'git://github.com/twbs/bootstrap-sass.git#v3.0.3-0'

そうすると、下のようにbower-componentsというフォルダの中にbootstrap.sassbootstrapというフォルダが出来ていると思います。
これをコピーして、bootstrapをカスタマイズして使いたいフォルダにぶち込みます。



SublimeTextの環境構築

次はBootstrapの環境構築です
この記事を参考にしてもらえば、早いのですが、
SublimeTextを立ち上げて、Command + Shift + Pでパッケージコントロールを起動します
そのなかに、installと入力すると、自動的にInstall Packageのサジェストが出てくると思うので、そこから以下の4つのパッケージをインストールします

・SASS Build
・SCSS
・SCSS Snippets
・Compass

config.rbをかこう

つぎに、先ほど、コピーして持ってきたbootstrap.scssと同じ階層に、config.rbという、ファイルを作りましょう。
そこに、なにも考えず、以下のようなコードを入力してください。

http_path = "/"
css_dir = "/"
sass_dir = "/"
images_dir = "/"
javascripts_dir = "/"
output_style = :compact

これで、環境構築は終わりです。

Bootstrap Sassをコンパイルしてみよう

最後はコンパイルして、Bootstrap Sassを楽しんでください。
とりあえず、bootstrap.scssというファイルを開き、以下のようなコードを入力してください

$brand-primary:#f39c12;
$navbar-default-bg:#f39c12;
$navbar-default-color:#ffffff;
$navbar-default-brand-color:#ffffff;
@import "bootstrap/bootstrap";

そして、Command + Bを押すと、コンパイルが始まると思います。
すると、bootstrap.cssというcssファイルが同階層に出来ているとおもうので、
これを読み込んで使ってください。

Bootstrapの変数を導入しよう

http://getbootstrap.com/customize
本家のbootstrapのページにアクセスし,変数を確認しましょう。
なお、この変数表はlessに対応しているのでこれをsass対応にしましょう。
@$に変えるだけでOKです
例えば、ボタンのプライマリカラーを変えたければ、
$brand-primary:#f39c12;
のように変更してください



以上です。ありがとうございました。


堀 悟大

有限会社アップルップル マークアップエンジニア。2014年高知大学理学部卒業。学生時代にHTML5のCanvas要素を使ってゲームを作っていたことでWeb全般に興味をもつ。アップルップル入社後はa-blog cmsを便利に使うための機能の実装や、HTML5の技術を使ったデジタルサイネージの実装を行う。趣味は英語。読むことも話すことも好き。

エントリーリスト

カテゴリーリスト

タグクラウド