jQuery Mobile のテーマ作成

jQuery Mobile のテーマ作成

wordpress で スマホ向けテーマをつくろうとして
思い出した jQuery Mobile

そして今回の参考サイトは
WordPress のテーマを jQuery Mobile でスマートフォン対応に

まず Theme Roller だけど
テーマローラーの概要(jQuery Mobile 1.0.1 日本語リファレンス)
をみようとしたけど
バージョンが古くなっているためか
見ることができないので
Theme Roller を調べることに

Theme Roller については
jQuery Mobileのテーマを設定(&ThemeRollerによる自作テーマ作成)するには?

を参考にさせていただきました

このTheme Roller は
ThemeRoller for jQuery Mobile

これの略称みたい

これを使うことでテーマの作成ができます

サイトにアクセスすると
最初にダイアログがでてくるので、
Get Rolling をクリックします

theme

次に、Global タブの中のメニューで
全体のレイアウトを作成していきます

theme2

設定できる項目は

Font Family はフォント

Corner Radiiあボタンなどの角丸

Icon はアイコン
Box Shadow はボックスの影効果
となっています

ちなみに、ゼロからつくるのではなく
jQuery Mobile のデフォルトテーマからつくるのなら

Import をクリックして
Import Default Theme をクリック

theme3

これでコードがインポートされるので
Import をクリックします

theme4

すると、適用したテーマが表示されます
AとBでの違いもわかります

theme5

テーマの作成が終わったらダウンロードします

Download をクリックすると
テーマの名前を入力するためのダイアログがでます

Theme Name にテーマの名前を入力します
今回は smart にしてみます

そして Download Zip をクリックすれば
ダウンロードできます

theme6

なお、Theme Name を入力しないとダウンロードできません

ダウンロードしたファイルは zip で圧縮されているので
解凍して、
その中にある themes フォルダを使います

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です