ナビゲーションバーの変更
ナビゲーションバーの見た目も、variables.lessで変更できます。
「//== Navbar」のセクションでnavbarの背景やリンク色、アクティブの時の色を指定します。ナビゲーションバーの背景色を薄い灰色（#f8f8f8）から透明（transparent）に、リンク色をモスグリーン（#777）からオレンジ系（#F5A623）に、アクティブ時の色を藍媚茶（#555）からオレンジ系（#F56B23）に変更します。
■変更前のソースリスト（variables.lessの一部、緑色部分を変更）
//== Navbar
中略
@navbar-default-color: #777;
@navbar-default-bg: #f8f8f8;
@navbar-default-border: darken(@navbar-default-bg, 6.5%);
// Navbar links
@navbar-default-link-color: #777;
@navbar-default-link-hover-color: #333;
@navbar-default-link-hover-bg: transparent;
@navbar-default-link-active-color: #555;
@navbar-default-link-active-bg: darken(@navbar-default-bg, 6.5%);
@navbar-default-link-disabled-color: #ccc;
@navbar-default-link-disabled-bg: transparent;
■変更後のソースリスト（variables.lessの一部、緑色部分を変更）
//== Navbar
中略
@navbar-default-color: #777;
@navbar-default-bg: transparent;
@navbar-default-border: darken(@navbar-default-bg, 6.5%);
// Navbar links
@navbar-default-link-color: #F5A623;
@navbar-default-link-hover-color: #333;
@navbar-default-link-hover-bg: transparent;
@navbar-default-link-active-color: #F5A623;
@navbar-default-link-active-bg: darken(@navbar-default-bg, 6.5%);
@navbar-default-link-disabled-color: #ccc;
@navbar-default-link-disabled-bg: transparent;
variables.lessの全コードはGithubにあります。
lessファイルはそのままではブラウザーは認識できません。変更したvariable.lessもまとめて1つのCSSファイルにするbootstrap.lessをbootstrap.cssに変換してブラウザーが認識できるようにします。
lessファイルからCSSファイルへの変換にはコンパイラーを使います。コンパイラーの使い方については詳しく触れませんが、筆者は「Codekit」を利用しています。Codekitは有料ですが、無料で使えるコンパイラーもあります。
注：コンパイルとは「プログラムを実行可能な形式にする」ことであり、そのためのソフトを「コンパイラー」と呼びます。
bootstrap.lessをコンパイラーで変換して、CSSフォルダにある既存のbootstrap.cssを上書きします。ブラウザーをリロードして図のような色合いになれば成功です！
variable.less変更前
variable.less変更後
見た目の変更は今後の流れもこのようなカタチになります。まとめると下記のようになりますね。
- HTMLを追記・編集
- lessファイルを編集（主にvariables.less、例外的に他ファイルもあり）
- bootstrap.lessをコンパイルしてCSSフォルダ内のbootstrap.cssを書き換え
- ブラウザーをリロードして確認
