data-thema属性で変更できるテーマは、jQuery Mobile 1.4の場合は「a」（白ベース）と「b」（黒ベース）の2種類のみです。
data-theme=”a”またはdata-theme=”b”
ThemaRollerの使い方
ThemaRollerを使用して独自テーマを作成することができます。各パーツの配色などが簡単に行えます。
ThemaRollerのページ
ページが開くときにPOPアップが表示されたらGet Rollingをクリックしてください。
左サイドのGlobalタブで全般の設定を行います。
Font Familyでフォントの設定
Corner Radiiでグループ化している矩形の角丸設定、ボタンの角丸設定
Icon diskを付けるかどうか、またdiskの色と透明度の設定
Box Shadow Box Shadowの設定
A,B,Cのタブを選んだ状態でそれぞれAパターン、Bパターン、Cパターンの配色の設定ができます。
上部のInspector onにするとそれぞれの部位を選択すると左サイドの対象メニューが選択されます。
通常はこの方法をとるとよいでしょう。
配色は上部のパレットの色を対象の部位にドラッグして着けていきます。
テーマの作成が完了したらダウンロードして使用します。
上部のDownloadをクリックするとDownload Themeが表示されます。
オレンジ色のリンク要素をコピーして使用しますので、コピーしておきます。
<link rel="stylesheet" href="css/themes/テーマ名.min.css" /> <link rel="stylesheet" href="css/themes/jquery.mobile.icons.min.css" /> <link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile.structure-1.4.5.min.css" />
次にTheme Name欄にテーマの名前を入力してDownload Zipをクリックしてダウンロードします。
zipフォルダを展開してできたthemesフォルダをcssフォルダに入れて
href=”css/themes/テーマ名.min.css
のパスに適合するようにします。また、テーマ名.min.cssはテーマ名.minになっているはずです。
非圧縮のテーマ名.cssは不要です。
link要素の記述はjquery.mobile.structure-1.4.5.min.css”のリンクの上に書きます。jquery.mobile.structure-1.4.5.min.cssのリンクはThemaRollerを使用する前のjquery.mobile-1.4.5.min.cssがjquery.mobile.structure-1.4.5.min.cssと変わっていますので注意してください。
また、jquery.mobile.icons.min.cssのリンクはオレンジ色の欄のものをそのまま記載します。
テーマ用のCSSリンクはテーマ名.min.cssを使用
パスはファイル名と階層をよく考えて設定すること。
jquery.mobile-1.4.5.min.cssのリンクの上に記述すること
うまくいかない場合
うまく適用されないトラブルが多いです。
テーマが適用されない場合は階層とリンクとファイル名が正しいかチェックしてください。
記入例をそのままコピペしてもうまくいかないのは、テーマ名がcssのファイル名になっていないためです。冷静にファイル名とパスをチェックしてください。
また、jquery.mobile.structure-1.4.5.min.cssのリンクを忘れている場合も多いです。これが正しくないとThemaRollerで作成したテーマが反映されませんので注意してください。ファイル名に「structure」が入っているかどうかよく確認してみましょう。
コメントを投稿するにはログインしてください。