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のものをつかうので、注意しましょう。
<!DOCTYPE html> <html> <head> <title>jQuery Mobile page</title> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="css/themes/my-custom-theme.css" /> <link rel="stylesheet" href="http://code.jquery.com/mobile/1.0.1/jquery.mobile.structure-1.0.1.min.css" /> <script src="http://code.jquery.com/jquery-1.6.4.min.js"></script> <script src="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.js"></script> </head>
コピペして使わせてもらいます。
んで、作ったテーマを使った デモはこんな感じ。
テーマの編集の仕方
左上のメニューから、【import】 を押します。
「import Theme」 のダイヤログボックスが現れます。
ここに、themerollerで過去に作成したCSSデータをコピペします。
貼りつけたら、【Import】のボタンを押します。
無事にインポートされたら、ここから編集し、また左上の【Download Theme】を押して、データをダウンロードして使うことができます。
非常に手軽にテーマが作れるだけでなく、CSS3固有の要素であるグラデーションやシャドウなども、ごく自然につくることができます。
コメント