このThemeRoller、jQuery Mobileが提供しているデザインテーマを簡単にカスタマイズできるツール。
英語のヘルプしかないが、直感的に操作できるのですぐに利用することが可能だ。
使い方などは、いろいろなページで紹介されているので、そちらを参考にしてもらうことにして、正式版になった時点での要件を報告。
ヘッダーの部分のコードがjQuery Mobile1.0に対応
------------------------
1: <link rel="stylesheet" href="themes/*****.min.css" />
2: <link rel="stylesheet" href="http://code.jquery.com/mobile/1.0/
jquery.mobile.structure-1.0.min.css" />
3: <script src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
4: <script src="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.js"></script>
------------------------
これで、正式版1.0でのデザインに対応できる。
注意点は、1.0のCSSコードは、「jquery.mobile-1.0.css」もしくは「jquery.mobile-1.0.min.css」であるが、
ThemeRollerで設定したCSSは、「jquery.mobile.structure-1.0.css」もしくは「jquery.mobile.structure-1.0.min.css」と、ファイル名が異なる。
正式版コードに上記コード、1行目(オリジナルCSSファイル)を追加しただけでは、デザインは適用されない。
CSSファイル名を変更するか、上書きしよう。
ちなみに全世代のコードは1.0R2用以下
------------------------
1: <link rel="stylesheet" href="themes/*****.min.css" />
2: <link rel="stylesheet" href="http://code.jquery.com/mobile/1.0rc2/
jquery.mobile.structure-1.0rc2.min.css" />
3: <script src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
4: <script src="http://code.jquery.com/mobile/1.0rc2/jquery.mobile-1.0rc2.min.js"></script>
------------------------
「ThemeRoller」で作成したデザインをダウンロードして、ヘッダー部分に新コードを適応すれば基本的にはすぐにデザインが反映される。

「A」にデザインカラーを設定(今回はピンクバージョン)
今回はAのみの設定であったが、B、Cなどにバリエーションを増やしたい場合には、複数設定できる。
設定が完了したら、CSS名を決めてファイルをダウンロード(ZIPファイル)できる。
ダウンロードしたZIPファイルを解凍すると、cssと画像が入った「Threme」ファイルとサンプル用のindex.htmlが配布される。
index.htmlがサンプルHTMLになるので、すべてのファイルをアップロードしてindex.htmlをブラウザで表示して、デザインが適用されていることを確認しよう。
サンプルのindex.htmlで表示されるデザイン↓

これが確認できたら、HTMLのhead部、jQuery Mobileのコード3行を上記4行に入れ替えて(1行目は適宜パス設定変更)デザイン適用となる。
変更前はデフォルトテーマ、「data-theme="c"」を設定していたので、一旦この部分を外すか、「data-theme="a"」を設定することで新しいデザインに置き換わる。
右側がデザイン変更したスマートフォン用トップページ。

トップページだけ適応させたので、内部ページはまだ、デザインがデフォルト設定のままのものもある。
順次対応していく予定。もう少しカラーのデザインの見直しが必要(^^;
レビューサイトは、MovableTypeでCMS構築しよう:スマートフォン用
参考サイト:
正式版に対応してないことを教えてくれていたページ↓
【注意】jQueryMobileのThemeRollerで出力されるコードは未だにRC2な件 #jquery #mobile : 愛知県名古屋市のホームページ制作ならSPOT(スポット)
ThemeRollerの使い方がわかりやすく紹介されている。↓
jQuery Mobileのデザインを簡単に作れる「ThemeRoller」徹底解説:小粋空間
このサイトは jQuery Mobile を学ぶ過程で作った日本語リファレンスを提供してくれてる。
※ただし、現段階では「テーマローラーの概要」の項のコード挿入の項3行目は違っているので注意。
ThemeRollerが提示するコードを使おう。
jQuery Mobile 1.0 日本語リファレンス