Fireworks CS6
Fireworks CS6にはjQuery Mobileのテーマを簡単に作成する機能があります。
テーマの作成
作成されるテーマはjQuery Mobile 1.0をベースとしたものですのでそれ以上のバージョンを利用する場合は注意してください。
Fireworksで適当な画面を開き、コマンドから「jQuery Mobileのテーマ」→「新規テーマを作成」を選択します。そうするとjQuery Mobileのテーマ編集画面が開きます。
テーマ編集画面ではページとして「グローバルアセットのスタイル」があり、これを編集するとアイコンや共通スタイルの変更が可能です。
また、ページ「a」「b」「c」「d」「e」には各テーマファイルの画象があります。これらのグラーデーションやボーダーを変更することで、各テーマを変更することができます。後ほど書きだす際にこれらのCSSも一緒に書き出されてしまうので不要なページは削除しておきましょう。
説明ページには説明がかかれていますので、一読しておくとよいでしょう。
テーマを作成したら確認です。
テーマの確認
コマンドから「jQuery Mobileのテーマ」→「テーマをブラウザーでプレビュー」を選択します。そうすると作成したjQuery Mobileのテーマがブラウザーで開きます。
ブラウザプレビュー画面
最新のブラウザーですとグラデーションの向きがおかしいので注意してください。これは書きだされるテーマが古いCSSのlinear-gradient()に対応しているためです。最終的に書き出されたCSSを以下のように変更することで直ります。
background-image:linear-gradient(-90deg,rgb(51,51,51) 0%,rgb(90,90,90) 94%);↓
background-image:linear-gradient(-90deg,rgb(51,51,51) 0%,rgb(90,90,90) 94%);テーマの書き出し
確認できたら最後は書き出しです。
コマンドから「jQuery Mobileのテーマ」→「テーマの書き出し」を選択します。テーマの名前を聞かれるので作成したテーマの名前を入力しましょう。CSSファイルと画象が書き出されます。
作成したテーマはlink要素でjQuery Mobileに読み込むことで利用できるようになります。
登録日 : 2013年09月10日 最終更新日 : 2016年12月19日