Jquery mobile のテーマを変更する

Jquery mobile のテーマって、標準では、A~Eまで5種類が用意されています。
もうこれはこれで、充分なのですが、どうしてもテイストの違うテーマがほしい時があります。
こんな時テーマローラー使うと、かなり思い通りのテーマを作成することができます。

テーマローラーを起動します。URLは、 http://jquerymobile.com/themeroller/

テーマの作り方

なになに？A～Zまで26個までのテーマが作れますよ。少なくともABCの3個のテーマは作っておくことを推奨するとのこと。画面うえのスウォッチパネルからドラッグで色を持ってこれるよ。
なるほど、わかりました。

【Get Rolling】を押します。

出て来ました。最初から3つ同じテーマが用意されていますので、これを変更して使えばいいという感じですね。

サイトメニューにそれぞれ、【Global】【A】【B】【C】と【+】が用意されています。この+を押すとDが追加されるという機能になっています。

各、テーマには[Delete]リンクがありますので、これを押すと削除も簡単に出来てしまいます。

ということで、この値をいじりまわして、自分の思い通りのテーマを作ることができます。

こんな感じにしてみました。
jquery mobile と基本的には同じはずなので、テーマAが指定なしデフォルトになると思われます。
もちろん明示的に指定もできますが、何も指定がないとAが適用されるはずです。
また、同様にテーマAの中にテーマBの部品を入れたりできるので、バリエーションを考えて、複数用意しておくというのがいいのかなと思います。

納得の行くものができたら、左上の【Download Theme】を押します。

テーマ名を決めて、Thema Name に入力して【Download Zip】を押すと、作ったテーマがダウンロードされます。

しかも、ヘッダーはこんなふうに書きなさいよと、親切に教えてくれてます。CSSファイルは、普通のjquery mobileのものではなく、jquery.mobile.structureのものをつかうので、注意しましょう。

コピペして使わせてもらいます。

んで、作ったテーマを使った デモはこんな感じ。

テーマの編集の仕方

左上のメニューから、【import】 を押します。

「import Theme」 のダイヤログボックスが現れます。
ここに、themerollerで過去に作成したCSSデータをコピペします。

貼りつけたら、【Import】のボタンを押します。

無事にインポートされたら、ここから編集し、また左上の【Download Theme】を押して、データをダウンロードして使うことができます。

非常に手軽にテーマが作れるだけでなく、CSS3固有の要素であるグラデーションやシャドウなども、ごく自然につくることができます。