スタイルの変更はvariables.lessから
BootstrapのスタイルはCSSではなく、lessで変更します。lessはCSSにほんの少しプログラムの良さを取り入れて書きやすくしたものです。
bootstrapのlessファイルは「less」フォルダにまとめられています。たくさんのlessファイルがありますが、次のように分けられます。
- variables.less ： スタイルの初期設定ファイル
- パーツ名.less(navbar.lessなど) ： ナビゲージョンバーなど個別箇所のスタイル設定
- bootstrap.less ： 上記ファイルをまとめて1つのCSS「bootstrap」に変換するためのlessファイル
- theme.less ： 上記とは独立してオリジナルのスタイルを記述するためのlessファイル。単体のCSSファイル「theme.css」として変換する
スタイルを変更したいな、と思ったら最初に、色や文字サイズ、書体、余白などの基本的な設定がされているスタイルの初期設定ファイル「variables.les」を編集しましょう。このファイルをいじるだけでも印象はだいぶ変わります。
たとえば、サイト全体の配色を変更したいときは、variables.lessの「//== Colors」にある「brand-primary」から「danger」までの色を変更します。ボタンなどのさまざまなパーツに自分のテーマカラーを適用できます。
■色テーマ初期設定ソースコード（variables.lessの一部）
@brand-primary: #428bca;
@brand-success: #5cb85c;
@brand-info: #5bc0de;
@brand-warning: #f0ad4e;
@brand-danger: #d9534f;
背景色や文字色、フォントサイズなどもすべてvariables.lessに記述されています。
■背景色、文字色初期設定ソースコード（variables.lessの一部）
//== Scaffolding
//
//## Settings for some of the most global styles.
//** Background color for `<body>`.
@body-bg: #fff;
//** Global text color on `<body>`.
@text-color: @gray-dark;
中略
//== Typography
//
//## Font, line-height, and color for body text, headings, and more.
@font-family-sans-serif: "Helvetica Neue", Helvetica, Arial, sans-serif;
@font-family-serif: Georgia, "Times New Roman", Times, serif;
//** Default monospace fonts for `<code>`, `<kbd>`, and `<pre>`.
@font-family-monospace: Menlo, Monaco, Consolas, "Courier New", monospace;
@font-family-base: @font-family-sans-serif;
CSSフォルダの整理
第2回でダウンロードした「bootstrap-3.2.0」から必要なファイルのみで「probono-paprika」を構成しましたが、まだ余分なファイルも入っていますので、CSSフォルダ内をスッキリさせましょう。図が最初に構成したCSSフォルダです。
最初に構成したCSSフォルダ
このうち、「bootstrap.css」「bootstrap-theme.css」の2つだけが必要なファイルです。「bootstrap-theme.css」を「theme.css」と名前を変更して、他のファイルを削除します。
必要なファイルだけで構成したCSSフォルダ
HTMLファイルで読み込むCSSファイルの名前が変わったので、index.htmlの<link>を変更します。
■変更前のソースリスト（index.htmlの一部、緑色部分を変更）
<!-- Bootstrap -->
<link href="css/bootstrap.min.css" rel="stylesheet">
■変更後のソースリスト（index.htmlの一部、緑色部分を変更）
<!-- Bootstrap -->
<link href="css/bootstrap.css" rel="stylesheet">
