Q&A
回答ありがとうございます！
この方法も知らなかったので、とても参考になりました。
有益な情報頂きありがとうございます
下記のbootstrapをダウンロードし、背景、ナビゲーションバー、ハイライト、文字などの
色を変更したいのですが、cssのどこを変更すれば良いのでしょうか？
回答3件
0
ベストアンサー
こんにちは。
Bootstrapのスタイルは、CSSファイルではなく、lessファイルで変更するようになっています。
lessは、CSSにプログラムの利点を取り入れてコーディングしやすくしたもので、Source code（DLリンク）の lessフォルダにまとめられています。
色や文字のサイズ、フォント、余白などのスタイルを変更したい場合は、スタイルの初期設定ファイルである variables.lessを編集してください。
たとえば、
lang
1//== Colors 2// 3//## Gray and brand colors for use across Bootstrap. 4 5@gray-base: #000; 6@gray-darker: lighten(@gray-base, 13.5%); // #222 7@gray-dark: lighten(@gray-base, 20%); // #333 8@gray: lighten(@gray-base, 33.5%); // #555 9@gray-light: lighten(@gray-base, 46.7%); // #777 10@gray-lighter: lighten(@gray-base, 93.5%); // #eee 11 12@brand-primary: darken(#428bca, 6.5%); // #337ab7 13@brand-success: #5cb85c; 14@brand-info: #5bc0de; 15@brand-warning: #f0ad4e; 16@brand-danger: #d9534f;
上記は、variables.lessの冒頭に記述されている Bootstrap カラーテーマの初期設定です。
背景色や文字の色を変更したい場合には、直後につづく背景色と文字色の初期設定を変更します。
lang
1//== Scaffolding 2// 3//## Settings for some of the most global styles. 4 5//** Background color for `<body>`. 6@body-bg: #fff; //背景色はここで変更します。 7//** Global text color on `<body>`. 8@text-color: @gray-dark;
なお、Customize and download（リンク）のページを使用することで、おなじことを Web上で行うことができます。
変更したい要素ごとに用意されたフィールドの値（参考：下図ページ部分SS）を変更した後、最下段の Compile and Downloadをクリックするだけでカスタマイズされた Bootstrapのファイルセットを入手することが可能です。
![イメージ説明]WIDTH:600
以上、ご参考いただければ幸いです。
投稿2015/02/24 01:40
編集2015/02/24 01:50
退会済みユーザー
総合スコア0
0
ええと、上手く説明出来るかどうかはわからないですが、トライしてみます！
上のテンプレートは見ていませんが、bootstrapはほとんどが複雑なソースで組まれていると思います。
そこで、私は、Firefoxのアドオン、Firebugを入れてチェックしています。
![イメージ説明]WIDTH:600
このように、チェックしたい場所にマウスを置くと（その前に、グレーのバー左から2番目にある、□に↑のアイコンをクリックしてくださいね）、どのCSSにどんな風に書き込まれているのが反映されているか確認することが出来て、とても便利です。
慣れるまでちょっと時間が掛かるかもしれませんが、やってみてください。
投稿2015/02/23 16:08
総合スコア16
0
私は、背景を変えただけですが、別のcssファイルに、
lang
1body{ 2 background-color:#000 ; 3 }
と書いて、読み込ませて対応しました。
bootstrapのcssファイルを書き換えて対応する方法は知らないので、方法があるのなら、私も是非知りたいです。
投稿2015/02/23 13:15
退会済みユーザー
総合スコア0
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2015/02/26 12:22
退会済みユーザー
2015/02/26 23:38