レイアウト自由自在！忍者ブログでTwitter Bootstrapを使う（１）

当ブログのデザインテンプレートは、デフォルトのテンプレートをベースに作ったオリジナルのテンプレートなのだが、CSSをゼロから作るのではなく、「bootstrap from twitter」というCSSフレームワークを使っている。
Twitter Bootstrap
忍者ブログでbootstrap from twitterを使ったデザインテンプレートを作るには、若干注意点があるので、そのへんをメモ的に書いておく。

bootstrap from twitterとは

bootstrapはウェブサイトをデザインするためのCSSのフレームワークだ。
CSSはサイトの見かけ（フォントサイズ、カラー、その他もろもろ）を設定するものだが、CSSを知らない人はこの記事を読まないだろうと思うので説明は省略する。
フレームワーク（枠組み）とは、「中身は自分で決めたいけど、大枠は既成品で済ませたい」という用途向けに提供されている、まあキットみたいなものだ。
イメージとしては、分譲マンションを買うと、内装は自分で指定できるが間取りはあらかじめ決まっている、その間取りの部分がフレームワークということになる。
これに対して注文住宅の場合は、全体としてはオリジナルだが、システムキッチンとかユニットバスとかは既製品を使う場合もある。こういう既製品に当たるものはソフトウェア的には「ライブラリ」という扱いになる。
bootstrapにおける、マンションの間取りに相当する部分は「12分割グリッドシステム」だ。
下図はScaffolding · Twitter Bootstrapの引用だが、水平方向に12等分したグリッドの中にコンテンツを埋めていくシステムになっている。

たとえば、２カラム構成なら、1：11、2：10、3：9、…、11：１、というようにさまざまな比率の２カラムデザインを作ることができる。
合計12になっていればいいので、3：6：3の３カラム構成とか、1：7：2：2の４カラム構成なんてのもできる。
また、全体を8：4の２カラムにしたあとで、さらに右カラムの4を2：2に分割するなんてことも可能。
さらに、このカラムの幅は固定にすることも、ウインドウのサイズの変更に追従させることもできる。
スマホのように画面が小さい場合には再配置させることも可能だ。
上記のリンク先のページを表示させて、ブラウザのウインドウの幅を狭めてみると様子が分かるだろう。
他には、ナビゲーション用のメニューバーやドロップダウンメニュー、タブ、パンくずリスト、グループ化したボタン、アラートボックスなどをCSS/Javascriptで実現したライブラリ、センスよくデザインされたテーブル、引用、ボタン、フォームなどが揃っていて、これらを組み合わせて短時間でサイトをデザインすることができる。
ちなみにフレームワークという考え方やグリッドシステム自体はbootstrapの専売特許ではなく、他にも例えばBlueprintとかCompassといったフレームワークがある。

基本的な使い方

bootstrapの必要なファイル一式は、上記リンクからダウンロードできる。
ファイルを展開すると、以下のようなファイル構成になっている。

まずはこれらのファイルを忍者ブログにアップロードする。
特別なことは必要なく、画像などと同様にファイルアップロードの機能を使用してアップロードすればよい。
*.cssと*.min.cssは機能的には同じファイルなので、アップロードするのはどちらか一方でよい。
min.cssのほうはサイズが小さい代わりに改行やインデントが削除されており、可読性は無い。
自分でCSSファイルをカスタマイズする場合は、minでないほうのCSSをカスタマイズし、それをアップロードすることになるだろう。
だが、bootstrapが今後アップデートされた時に面倒なので、基本的にCSSファイルを直接カスタマイズすることはお勧めしない。
アップロードしたファイルを自分のテンプレートで参照するには、以下のようにCSSおよびJavaScriptファイルへのリンクをHTMLテンプレートに入れる。

<head>
（TITLEタグ、各種METAタグ等）
<link href="http://file.your.domain/bootstrap-min.css" rel="stylesheet">
<link href="http://file.your.domain/bootstrap-responsive.min.css" rel="stylesheet">
<link rel="stylesheet" href="http://<!--$g_user_id-->/css/" type="text/css" />
</head>
<body>
（テンプレート本体）
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script src="http://file.your.domain/bootstrap.min.js"></script>
</body>

もちろん、your.domainのところは自分のブログに合わせて変更が必要だ。
もしmin.cssでないほうのCSSを利用するなら、ファイル名もそれに合わせて変更する。
linkの３つ目はテンプレートのCSSファイルで、これは元々HTMLテンプレートに含まれているべきものだ。
重要なのは順番で、bootstrapのCSSファイルはテンプレートCSSファイルよりも前に配置する。
こうすればテンプレートCSSファイルでbootstrapのCSSをカスタマイズできる。
bootstrap.jsはjqueryの機能を利用しているので、bootstrap.jsをロードする前にjqueryのロードが必要だ。
これらscriptタグを書く場所は、特に理由が無ければの直前でよい。
これで、あとはbootstrapのホームページのScaffoldingのサンプルのように記述すれば、簡単にマルチカラムのデザインを作ることができる。

アイコン画像のURLを修正する

当ブログでは使っていないが、bootstrapはボタンなどをアイコン付きにすることができる。
画像を埋め込むときと同じように、

<i class="icon-home icon-white"></i>

のように書くとアイコンを入れることができる。
CSSではこの画像が/img/ディレクトリに置かれている想定になっているが、忍者ブログでは画像は別サーバに置かれるので、修正する必要がある。
修正するには、テンプレートのCSSのほうに

[class^="icon-"], [class*=" icon-"] {
background-image: url("http://file.your.domain/glyphicons-halflings.png");
}
.icon-white {
background-image: url("http://file.your.domain/glyphicons-halflings-white.png");
}

という記述を追加して、bootstrapのCSSを上書きしてやればよい。
（もちろんyour.domainの部分は自分のブログのドメインに直さなければならない。）
これに限らず、bootstrap.cssのパラメータを変更したい場合は、ファイルそのものの中身をいじるのではなく、テンプレートのCSSで上書きしたほうがよい。
ファイルのアップロードをしなくて済むし、bootstrapを将来別のバージョンに入れ替えるときにも対応しやすい。