タスクマザー

------------------------

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 日本語リファレンス