wp-bootstrapで改造したところ(その2)

公開日 : 最終更新日 :

カテゴリー :

wp-bootstrapで改造したところ」の続きです。
前回は、BootstrapのバージョンアップとFont Awesomeを入れたところまで紹介しました。今回は、Bootstrapの色を変えるところを紹介します。

LESSについて

Bootstrapで使用しているのは、LESSというCSSを拡張して変数・演算・関数などのプログラミングっぽいCSSではできない機能を追加したものを使っています。こういった機能をもつ言語をCSS拡張メタ言語といってLESS以外にもSCSS(SASS)やStylusがあります。LESSはSCSS(SASS)やStylusなどと比べると機能が若干弱いですが、CSSの記述に近い感じのCSS拡張メタ言語となります。CSS拡張メタ言語を使う利点は、デザインごとにファイルを分割して視認性が上がることことです。CSSでたくさんある行の中から、ある部分のデザインが書かれているコードを探したり変更するのに苦労しますが、CSS拡張メタ言語だとデザインごとにファイルが分割されているのでコードを探すしたり変更するのに苦労しません。今回の色を変える場合もBootstrapのデザインをいじることなく色を変えられるので楽に出来ました。

Bootstrapでのカラー変更

Bootstrapで色を変更するにはvariables.lessというファイルを変更します。このファイルは、色やフォントなどコードが書かれています。このファイルに書かれているコードをいじると指定されているところが変わります。自分で勝手にいじってもいいですが、Bootstrapの色をレビューしながら簡単に変更できるPaintstrapというサービスがあります。Paintstrap日本語にも対応していてAdobe KulerとCOLORloversに投稿されているカラースキームをBootstrapに適用できるファイルを精製するサービスです。僕もこのサービスを使って色の変更をしました。Paintstrapを使ってBootstrapの色を変更するやり方は以下の通りです。

  1. Adobe KulerCOLORloversにアクセスしてカラースキームを決める
  2. 決めた色が書かれているURLをコピー
  3. PaintstrapでコピーしたカラースキームのURLを貼り付ける「ステップ2.へ」ボタンをクリック
    printstrap1
  4. Bootstrapで変更したい色を設定して「ステップ3.へ」ボタンをクリック
    printストラップでの色決め
  5. 「paintstrap-kuler-◯◯◯-◯◯◯.zip」か「valiables.less」をダウンロードする(zipファイルの◯◯◯は、カラースキームによって異なります)
    ダウンロード
  6. ダウンロードしたファイルの「valiables.less」(zipファイルの場合は解凍したフォルダの中にあります)をBootstrapのLESSフォルダにある「valiables.less」と置き換える
  7. LESS.appを使ってLESSファイルCSSファイルにコンパイルする
  8. 完了

LESSファイルをコンパイルする方法を紹介しました。LESSファイルをコンパイルせずともbootstrap.css(bootstrap.min.css)とbootstrap-responsive.css(bootstrap-responsive.min.css)をBootstrapにある同名ファイルと置き換えても変わります。LESSファイルを触ってみるという目的もあったのでLESSファイルでの方法を紹介しました。

Adobe KulerとCOLORloversについて

カラースキームを選ぶAdobe KulerとCOLORloversはどちらも英語ですが、それほど難しくはないと思います。サイトごとの使い方は以下の通りです。

Adobe Kuler

  1. 好きなカラースキームを選んでクリック
  2. 選んだカラースキームにある「Theme link」にあるURLをコピー
  3. 完了
kuler

COLORlovers

  1. PALETTESか検索バーから好きなカラースキームを選んでクリック
  2. 表示されたページのURLをコピー
  3. 完了
colorlovers

Adobe KulerとCOLORloversですが、Adobe Kulerはカラースキームのみを中心としたサービスです。Flashを使ってるのでちょっと使いづらいところはありますが、シンプルでわかりやすいサービスです。COLORloversは、カラースキームだけではなく、パターン素材などもあり豊富にあります。好きなカラースキームを見つけれたところでPrintstrapを使えばいいでしょう。

LESS.appについて

最後にLESSをCSSにコンパイルする方法は、LESS.appという簡単にコンパイルできるフリーソフトがあるのでそれを使います。LESS.appの使い方は以下の通りです。

  1. ここにアクセスしてファイルをダウンロードする
    less.app1
  2. LESS.appを起動して左下の「+」ボタンをクリック
    less.app2
  3. LESSファイルがあるフォルダを選択して「add」ボタンをクリック
  4. コンパイル対象のLESSファイルにチェックを入れる
    less.app4_
  5. 「Compiler」をクリック
    less.app5_
  6. 右下の「Compile All」をクリック
    less.app6_
  7. 完了

これでBootstrapのCSSをカスタマイズできました。僕の場合は、このBootstrapのデザインにwp-bootstrapで使われているstyle.cssを改造して今の感じにしています。

次は、WordPressで使ったプラグインを紹介します。

参考

ピンバック

コメント

名前とEメールアドレスが必須です。

以下のHTMLタグが使用できます。 <a href="" title="" rel=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>