スポンサーサイト

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。

ツイッターブートストラップの色変更や軽量化といったカスタマイズの覚書き

2013-08-13

Twitter Bootstrap

追記(2013年8月13日):この記事を書いた7月11日から間もなくして、ツイッターブートストラップ3が登場してしまいました。。。モバイルファーストになったり、いろいろ変更点があるみたいですが、、、そういった新情報については、また後日、追記したいと思います。(滝汗;)


久々に登場の、ショコシス姉です。
しかも、妹がしっかりぐっすり眠っているドイツの真夜中を狙って、ひっそりこっそり登場。(笑)

というのも、妹の守備範囲であるレスポンシブWebデザインに関する覚書をアップしようとしているので…。(汗;)

PHP等、サーバーサイドのプログラミング言語を使ったアプリケーションの開発は大好きだけれど、デザインは苦手な姉。

妹に時間の余裕がある時には、妹に頼めば良いとは言うものの、、、ショコシスのWebコラボ以外で、姉が独自で開発しているシステムに関しては、いつもお願いするっていう訳にもいかず、、、そんな時には、Twitter Bootstrap(ツイッターブートストラップ)という、CSSやJavaScriptがセットになったフレームワークを使ったりしています。

姉の様に、サイトの機能的構築は大好きだけれど、Webデザインは苦手というプログラマーさんにオススメのフレームワークです。

が、あまりにも便利なオプションがたくさん詰め込まれている為、その中のちょこっとだけ利用したい時や、姉の様に、色の組み合わせを選ぶのが思いっきり苦手なプログラマーさんが、全体のカラースキーム(色調)をサクサクっと変更したい~っていう時には、戸惑ったりするかもしれません。

そこで、そんな時に便利な情報を、覚書として、ずらずらずら~っとまとめておきます。

余談:ショコシス姉のWebプログラマーとしての化石度(笑)
2000年からの1年間で、The Diploma of Internet Technology(ニュージーランドで)を取得した姉ですが、勉強している途中に、ある日、講師が、「新しいスーパーファーストなサーチエンジンが登場したぞ~」と言って、興奮して教えてくれたのが、なっ、なんと、Googleです。CSSという考え方も当初は無く、最後の方でようやく使うようになったものの、最初は、全て、HTMLのタグ内にフォントや色、テーブル(div等を使ったレイヤーじゃなくて、ほぼ全てがtableの時代です~♪)のデザイン指定を書き込んでいました。
HTMLもJavascriptも、テキストエディタを使ったタグ打ち!jQueryなんてなくて、初期のJavascriptだけを使って、ゲームや計算機、帳票システムとかも、手打ちコーディングしてました。
一通りHTMLプログラミングを覚えた後で使い始めたHomeSiteは、その後、Macromedia HomeSiteとなり、後にソースコード編集機能としてMacromedia Dreamweaverに組み込まれ、今ではAdobe Dreamweaverに。HomeSiteを使っていたプログラマーって、今、どのくらい残ってるんだろ~。(懐)
画像の解像度の基本は72dpi。インターネットの接続環境が整っていなかったあの頃、一つの画像を分割して、読み込み時間を短縮したり、いかに軽いサイトを作るかが使命でした。(笑)


ではでは、本題に~♪

Bootstrap
本家サイトのトップページ。最新バージョンをダウンロード出来ます。

ダウンロードボタンは、トップページのど真ん中にあって分かり易いのですが、毎回、どこに何があるんだっけ???と頭の中がハテナになる姉。各ページの内容をメモしておきま~す。(この覚書を書いている時点での情報なので、変更になっていたらごめんなさいっ。)

ページ上部のメニューの~

Get Started:
ダウンロードからの基本手順。含まれているファイルのリストや基本のHTMLテンプレート、サンプルがあります。

Scaffolding:
基本的な仕組みというか構造というかの説明。

Base CSS:
タイポグラフィ、コード(pre)、テーブル、フォーム、ボタン、アイコンセット。

Components:
ドロップダウンメニュー、ボタン、ナビゲーション、パンくずリスト、ページネーション(ページ送り)、ラベルとバッジ、タイポグラフィ、サムネイル、アラート、プログレスバー、メディア、その他。

JavaScript:
Transitions、Modal、Dropdown、Scrollspy、Tab、Tooltip、Popover、Alert、Button、Collapse、Carousel、Typeahead、Affix。

Customize:
含めたいComponentsやjQueryのプラグインのみを指定したり、変数の値を変更して、ダウンロードすることが出来ます。Bootstrapの軽量化に便利。


~本家以外の便利なサイトの数々~

----- 追記 -----
姉の運営サイトのリニューアル準備で、Bootstrapのカラースキームをカスタマイズする方法をいくつか試してみましたが、結局、姉が使ったのは、PaintStrapでした。

PaintStrap
ずっと、英語バージョンを使っていたら、日本語のオプションもあることを発見。リンク先は日本語ページです。
(※自分で作成せず、Galleryのページから、他の人がPaintStrapで既に作成した色の組み合わせをダウンロードすることも出来ます。)
まず、ステップ1.では、下記、Adobe kulerのカラースキーム(配色テーマ)又は、COLOURloversのカラースキーム(パレット)で、好みの色セットを見つけます。その好みの色セットのURL又は、URLに含まれる数字IDをコピペして、ステップ2.に進みます。ステップ2では、色の微調整をします。姉は、基本的にページ背景を白に。(色選択のオプションの右端にある>を数度クリックすると、白色が出てきます。)プレビュー画面を見ながら、好みの組み合わせになるまで調節します。好みの色の組み合わせが出来上がったら、CSSを生成する!をクリックして、次の画面から必要なCSS又は、全てのCSSを一括ダウンロードします。

Adobe kuler
ディフォルトではColor wheelが表示されると思うので、Exploreのページへ行って、Most PopularやMost Usedのリストにある色セットを使うか、Searchボックスの中に英語のキーワードを入れて好みの色セットを探します。(例:chocolateとか、blue skyとか、schoolとか)マウスオーバーして、Copy Linkをクリックすると、URL(パーマリンク)がクリップボードにコピーされるので、PaintStrapのページのステップ1へ戻って、「Adobe kulerのカラースキーム(配色テーマ)を使う」ボックスに貼り付けます。パーマリンク(リンクの書式が変わった模様)だと、動作しないみたいなので、数字の部分以外は削除して、ステップ2.へをクリックします。(Copy Linkではなく、色セットの名前をクリックして、その色セットの詳細ページを表示した後、アドレスバーに表示されるURLから、数字ID部分のみをコピペしても可。)

COLOURlovers
各種カテゴリーから選ぶか、Searchボックスに英語のキーワードを入れて検索し、好みの色セットを見つけます。気に入った色セットが見つかったら、その名前(パレット名)をクリックして、詳細ページを表示します。そのページのアドレスバーに表示されているURL(パーマリンク)から、数字の部分(ID)のみをコピーして、PaintStrapのページのステップ1へ戻って、「COLOURloversのカラースキーム(パレット)を使う」ボックスに貼り付けます。後は、上記Adobe kulerの場合と同じです。

----- 追記ここまで -----

Bootswatch
いろんなスタイルに既に変更してあるBootstrapのテンプレートをダウンロードすることが出来ます。無料版の他、有料版もあります。既に出来上がっているので、色とか自分で考えなくてすみます。(笑)ダウンロードしたCSSを入れ替えるだけでOKです。

Fbootstrapp
Facebookっぽいデザインのテンプレート。Facebookのページ内に置くアプリ等の作成にぴったり。ダウンロードは、Fbootstrappのgithub projectのページから。(リンク先ページにあるVisit the github project »をクリックすれば、飛びます。)

StyleBootstrap.info
自分で色を選んで、Bootstrapの独自テーマを作りたい時に便利なサイト。各ボックスの中の色コードを変更すると、直ぐにその色が反映されて、自分の目で確かめながらテーマを作ることが出来ます。クライアントさんから色指定等を受けた場合にも便利。

Lavish
画像から、カラースキーム(色彩)を自動的に割り出してくれる便利なサイト。Step1のボックスに、画像のURLを入れると、画像内に使われている色から、自動的に7色の色を表示してくれます。Step2で、修正を加えたい場合は修正し、Step3に表示されたコードをコピペして使用します。クライアントさんのロゴとかから、色を割り出してみると面白いかも。あっ、姉が運営している自分のサイトのロゴでもやってみよう~。

BootTheme
トップページから、START NOWをクリックして編集画面へ進み、Step1のWeb Designerで、各パーツをドラッグ&ドロップで、右側の枠内に追加していき、アプリケーションの画面構成を完成させます。その後、Theme Generatorで色などを選び、完成。。。なんだと思いますが…。使い方に慣れれば、とっても便利なんだろうなぁ~と思ったものの、化石度の高い姉は、ソースコード内へ自分でタイプしていく方が向いていると、途中で使用を断念。(←直ぐに使いこなせるようにならなかった言い訳。汗;)サイズの違うディバイスでのプレビューを確認しながらデザイン出来たりと、便利な機能もいっぱいです。また、いつか、再チャレンジ!

ColorStrap Twitter Bootstrap のカラーテーマ
いろんなカラーテーマのCSSファイルをダウンロード出来るサイト。運営者さん情報がいまひとつ不明ですが…、コンパクトに分かり易くまとめてあるサイトです。

Built With Bootstrap
Bootstrapを元にして作成されたサイトのギャラリー。テンプレートの配布等ではないものの、Bootstrapを使って、こんなデザインやあんなデザイン、こんなサイトやあんなサイトも作れるんだ~と、見ているだけで参考になります!

Beautiful Buttons for Twitter Bootstrappers
好きな色のボタンを追加することが出来ます。各項目のバーの値をインディケーターを左右に動かして変更し、気に入ったボタンが出来たところで、右に表示されたCSSコードを、コピペしてサイトのCSSに加えます。.btn-customというクラスのボタンになりますが、customは勿論、好きな名前に変えて、複数追加出来ます。

Colorpicker and Datepicker for Twitter Bootstrap
Download&docsというボタンをクリックすると、詳細説明とダウンロードボタンがあるページが表示されます。姉も、あるプロジェクトでBootstrapを使って、datepickerで躓きました。(汗)これを使えば良かったのかな~。

Twitter Bootstrapのアイコンの色をカラフルにする方法(9ensanのLifeHack)
アイコンの色を変更する方法が、分かり易く簡潔に書いてありました。将来的に、CSSで調節が可能になるまでの覚書として、リンクさせていただきま~す。

Font Awesome
上記ページで紹介されていた、色変更が可能なアイコン集。


とりあえず、以上です。

途中、他の用事で時間が空いてしまったので、、、ドイツの朝がやってきそうな時間に~~~。

さ~て、妹は、この姉の投稿にいつ気づくのでしょうか。。。(滝汗)
スポンサーサイト

PAGETOP

上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。