■今回やること
- InitializrでHTML5対応版Bootstrapをダウンロード （前回）
- Bootswatchで好きなテーマをダウンロード
- CakePHPのプラグインBootStrapをダウンロード
- CakePHPのSearchプラグインをダウンロード
- CakePHPのDebugKitプラグインをダウンロード
- 簡単なデプロイ
- 掲示板を作ってみる
- 掲示板をブラッシュアップしてみる
- クソして寝る
２だ。
■Bootswatchってなんぞや？
Bootswatchというのは、Twitter Bootstrap2のテンプレートのギャラリーサイトで、特徴のある12のテンプレートテーマを誰でも簡単にダウンロードすることができるサービスだ。
http://bootswatch.com/
ここでだいたいのイメージが一致したテーマをダウンロードし、あとは個別に細かく調整すれば、自分だけのオリジナルのBootstrap2テーマが作れる、という話。
今回は特にいじったりせず、Bootswatchから適当なテーマを落として、それを少しの編集だけでそのまま使おうと思う。
まずはブラウザを最大化しよう。画面上部の黒い部分が変化したかもしれない。
このサイト自体、レスポンシブに作られているので、ブラウザの幅が一定のサイズだと自動でデザインが変化するようになっている。
最大化した状態では上部の黒いバーに
- News
- Gallery
- Preview
などのテキストリンクが表示されていると思う。
もし最大化してもこれらが表示されないくらい小さなディスプレイを使っているなら、一旦配線を外し、窓をあけ、そのディスプレイを放り投げるとよい。
その後Amazonで32インチワイド液晶を購入するまで、此処から先は読まないほうが良いかも。
というのはジョークで、もし小さい画面なら、黒いバーの右側に『三』のアイコンがあるとおもうので、そこをクリックすれば良い話。
■テーマを選ぶ！
というわけで、まずはひと通りテーマを見ておこう。
Galleryをクリックだ。
この中からいくつかクリックしてみて、気に入ったものを使おう。
今回はUnitedテーマを使って見ることにしたので、Unitedテーマが適用されている状態にするため、Unitedテーマをクリックしよう。Unitedだ。そう、United。
■ダウンロードだ！
さて、現在Unitedテーマが表示されている状態のはずだ。
この状態でダウンロードするファイルは2個。どちらもCSSファイルだ。
画面上部のバーにあるDownloadプルダウンをクリックして下ろそう。
その中に、
- bootstrap.css
- bootstrap.min.css
の2つがあると思うが、これらを右クリックし、前回保存したInitializrフォルダのCSSの中に上書きする。
直接クリックしてしまうと、ブラウザでCSSの中身を表示してしまうので、必ず右クリックだ。
Macな人は右クリックはないと思うが、右クリック的なものはすでにご理解いただけていると思うので、特に説明はしない。なにしろ俺はMacを持ってないのだ。
2つとも上書きしたら、Initializr内のindex.htmlをブラウザで開けば、この時点でテーマが反映しているのがわかると思う。
ロケーションバーを見ればローカルというのがわかると思う。
驚きの簡単さだ。これは便利。
■中身を見てみよう
bootstrap.cssをテキストエディタで開いてみると、事細かくスタイルの設定が詰まっているのがわかると思う。
正直、ここに手を加えるのは避けたい。そう思ったのではないかな？
実はそれは正解で、こういったライブラリは気がつくとバージョンアップしていることがある。
特にプログラムなどの場合、致命的なバグがあり、それを修正したバージョンが公開されていることもよくある話。
そういった修正されたファイルを、出来ればそのまま上書きできればすごく簡単にメンテナンスが終わるわけだ。
ただ、編集してしまっていると、その部分は当然反映されない。
直接ファイルを編集したほうが作業としてはわかりやすいが、他の人がいじったりするなら余計な混乱を招くだけだ。
それにファイルをダウンロードして上書きするだけなんか、素晴らしく簡単じゃいか。
だからこういうライブラリに直接編集するのは、これからも可能な限り、避けていきたい。
では修正したい場合どうすればいいのか？
Aタグの色変えたんだけど、どこの寺院で祈ればいいですか？
的な疑問は当然生まれると思う。
大丈夫だ、問題ない。
CSSはカスケーディングスタイルシートだ。同じスタイルはあとから呼ばれた方で上書きされる。
つまり、bootstrap.cssが呼ばれたあと、別のスタイルシートで上書きすれば良い話。
というわけで、Initializr/cssの中に、style.cssというファイルがあるので、それを開いてわがままにスタイルを書き込んでいこうじゃないか。
■これが俺のスタイルだ！
まず、簡単なところで、Aタグの色を変えてみようじゃないか。
一旦、bootstrap.cssのAタグの設定をひと通りコピーしておいて、style.cssに貼り付ける。
38〜46行目と、
140〜147行目だ。
貼り付けたら、色を変更してみよう。
今回は少々彩度の薄い緑色にしてみた。
style.css
a {
color: #690;
text-decoration: none;
}
a:hover {
color: #9c3;
text-decoration: underline;
}
この状態でブラウザをリロードしても、なんとテンプレートにAタグがないので、どこにも反映されない！
というわけで、index.htmlを開き、適当に単語をAタグでくくってみる。
だいたいこんな感じになったわけだ。
まぁ悪くないんじゃないのかな？
他にもいろいろ気になるところがあったら、このstyle.cssを使って編集すると良いかもね。
■終わりだ！
今回はとりあえずここまでとするので、また次回をお楽しみに。
facebook
twitter
google+
fb share