Bootstrap3のテーマをカスタマイズし、ページの読み込み速度をアップする裏技教えます。
"I blocked imgur on your computer… I'm the only kitty you need"
Bootstrap3の見た目を変更するには、CSSやSASSを書いてスタイルを上書きする方法が一般的。ただ、BootstrapのCSSファイルはただでさえ巨大なので、さらにCSSを追加するのはページの読み込み時間が長くなる要因になってしまいます。
この記事では、可能な限りCSSを追加せずにBootstrap３のテーマをカスタマイズし、ページの読み込み速度を抑えるための技をご紹介します。しっかり作れば追加のCSSほとんどなしでWebサイトを作ることも可能なので是非ご一読を。
Bootstrap3 テーマカスタマイズの基本的な方法
前回の記事で初心者向けのインストール方法を紹介しましたが、Bootstrap3の公式ページではソースコードをそのままダウンロードするだけでなく、必要なファイル（コンポーネント）だけ選んだり、テーマの変数（配色やフォントなど）設定を変更して配色パターンを変えることが可能です。
カスタマイズ方法はとっても簡単。Bootstrap3の公式サイトからカスタマイズページを開き、ページ内にあるフォームに値を入力していくだけです。
主な変更ポイントは以下の通り。
必要なファイルの選択
Bootstrap3に用意されている各種コンポーネントに対応したスタイルファイルの中から、必要なものだけを選んでダウンロードすることができます。ファイル名はコンポーネント名になっているので、どのファイルが必要かすぐにわかりますね。
もし、Bootstrap3のグリッドシステムだけが欲しい場合は、「Grid system」と「Responsive utilities」の２つにチェックを入れればOK。
その下にあるjQueryプラグインもスタイルファイルと同様、必要なJavaScriptコンポーネントだけを選ぶことができます。
変数のカスタマイズ
ファイルの選択と合わせて行うことができるのが、変数のカスタマイズ。
Bootstrap3のコンポーネントには細かく変数が設定されているので、結構カスタマイズできる幅も広くなってます。あと、入力フォームには数字やカラーコードなどの値だけでなく、変数名を直接記入することができます。
ファイルの選択と変数のカスタマイズが出来ればあとはダウンロードするだけ。基本的にはこれで完了です。
Bootstrap3 テーマカスタマイズの裏技
config.jsonをアップロードしてカスタマイズ
ダウンロードしたフォルダの中にconfig.jsonというファイルが入っていると思います。
bootstrap/config.json
このファイルは先ほど入力した変数の値や、必要なファイルの設定がjson形式で保存されており、このjsonファイルをカスタマイズページにアップロードすることで、あっという間にテーマの設定を変更することができます。
なのでわざわざカスタマイズページに移動して１つ１つ変更するより、テキストエディターを使ってjsonファイルを修正することで、効率良くオリジナルのBootstrapテーマを作成することができる、というわけなんです。
画面を見ながらカスタマイズできる「Live Customizer」
jsonファイルを使えるといっても、色の変更とか実際見てみないとどんな感じか分かりづらいですよね？そういうときはLive Customizerを使ってみましょう。
アクセスすると読み込みに若干時間がかかりますが、コンポーネント一覧がずらっと並び、サイドには変数一覧が表示されています。
「Try a pre-defined theme!」と書かれたところにあるプリセットをクリックすると、あらかじめ用意されたテーマを使うことが可能。選択肢は４つしかありませんが、これだけでも結構いい感じのデザインになります。
変更が完了したら、トップバーの「Download」をクリックしてドロップダウンを開き、Bootstrapファイル、もしくはthemeファイルをダウンロードします。
デフォルトのスタイルがちょっと物足りないな〜と思ったら、このツールを使ってサクッとテーマを作成sてしまいましょう。
さいごに
ここまではBootstrap3のインストールからテーマのカスタマイズまで大まかなところを解説してきました。次回からはレスポンシブデザインで重要なグリッドの使い方や、各種コンポーネントの使い方もチェックしていきます。
最後までご覧いただきありがとうございました 🙂
