Web Service

jQuery Mobileで簡単に自分のオリジナルテーマカラーを作成できるThemeRollerの使い方

jQuery Mobileにはテーマがいくつかあり、そのテーマを変えることで簡単にカラーデザインを変更しちゃったりすることができます。で、これを簡単にオリジナルのテーマにしたい場合はjQuery Mobileの公式サイトにあるThemeRollerというツールを使うことで手軽に作成できます。以下、簡単な使い方です。

[ads_center]

使い方

以下のURLからアクセスできます。

アクセスすると、「Welcome to ThemeRoller for jQuery Mobile」とでるので、「Get Rolling」をクリックしてスタートします。

A、B、Cというテーマがあります。とりあえずAのテーマを変更していこうかと思います。ちなみにテーマをもっと増やしたい場合は左メニューにあるタブパネルの + をクリックすると追加できます。

ThemeRoller テーマ追加

テーマの各部品を簡単に分類すると以下の項目になります。

Swatch

  • Header/Footer Bar
  • Content Body
  • Button: Normal
  • Button: Hover
  • Button: Pressed

この各パーツのカラーを変更していくんですが、2通りのやり方があります。

  1. 上部のカラーピッカーからドラッグ&ドロップする
  2. 左メニューのパーツ部分を選択してカラーコードを入力する

ということで、まずはドラッグ&ドロップから試してみます。

ドラッグ&ドロップ

例えば、ヘッダーを変更したい場合は上部のカラーピッカーからヘッダー部分へ好きな色を持っていきます。

テーマカラー変更

で、いくつかドラッグ&ドロップしていくとこんな感じになりました。

テーマカラー ドラッグ&ドロップ変更後

左メニュー

次に左メニューからカラーコードを指定して変更してみます。まずはAを変更する場合、左メニューのパネルAを選択します。

変更したいテーマを選択

そして、変更したい項目をクリックするとカラーコードを入力できるので好きな色を入力していきます。この時、右にあるプレビューからクリックした場所を自動で左メニューへ反映させたい場合は、画面上部にある「Inspector」をOffからOnに変更すると選びやすくなります。

InspectorをOnに変更

これで、例えばプレビュー画面のヘッダー部分をクリックすると左メニューのヘッダー部分が選択された状態になります。

テーマプレビューをクリック

あとは各部分に好きな色を指定していけばテーマが出来上がっていきます。

左メニューからテーマ作成

とりあえずこんな感じで適当に作ってみました。

作成したテーマをダウンロードする

テーマを作成したら、左上にある「Download Theme」をクリックして、自分のテーマ名を入力して「Download Zip」をクリックするとダウンロードできます。

テーマをダウンロード

ダウンロードしたフォルダの中にindex.htmlファイルがあるので開いてみます。すると、こんな感じでサンプルっぽい画面が表示されます。

テーマサンプル

で、この中にhead内に挿入するコードがあるのでこれを参考にして入れてみるとこんな感じでちゃんと先程作ったテーマが反映されるようになります。

テーマ確認

ということで、ThemeRollerを使えばとても簡単にjQuery Mobileでオリジナルテーマカラーが作成できます。テーマカラーを変更するだけでも、結構オリジナル感がでるんじゃないかなと思います。レイアウトはデフォルトのままでいいから色だけ変更したいって人はThemeRollerでテーマを作成して、あとはフレームワークに沿った形でマークアップしていけば作業コストも減っていいかもしれませんね。

jQuery illuminateを使えばボタンに光を加え点滅させたりして注目させることができる前のページ

かっこいいボタンやフォーム、かわいいリボンなんかが作れるCSSジェネレーター「Live Tools」がすごく便利次のページ

関連記事

  1. Web Service

    使い捨てメールアドレスが欲しい時に便利!2秒でフリーメールを取得することができる「Super Mai…

    使い捨てアドが欲しい時にとても便利ですね。たった2秒でフリーメールを取…

  2. Web Service

    iPhoneスクリーンショットで上部のステータスバーを削減してくれるMacアプリ「Status Ba…

    便利そうなアプリを発見したのでご紹介。主にブロガー向けツールかなと思い…

  3. Web Service

    Webページを綺麗に読みやすくしてくれてエバノートにも保存できるChrome拡張機能「Clearly…

    Chromeで閲覧中のWebページやブログ記事を綺麗に読みやすくしてく…

  4. Load Info - gif generator

    Web Service

    ローディング中に表示させるアニメーションGIFを作成できるジェネレーター「 Load Info &#…

    ローディング中に表示させるアニメーションGIFを手軽に作成することがで…

  5. Rounded corner generator

    Web Service

    CSS3の角丸を直感的な操作で作成できるジェネレーター「Rounded corner generat…

    CSS3を使って角丸を作成したい時に役立つジェネレーター「Rounde…

  6. Web Service

    夜フクロウで複数のTwitterアカウントを使うためのアカウント追加方法

    Twitterクライアントで人気の高い夜フクロウを使い始めました。メイ…

コメント

  1. この記事へのコメントはありません。

  1. この記事へのトラックバックはありません。

最近の記事

  1. 東京都現代美術館
  2. スーリア バターチキン
  3. そそそ 明太クリームそうめん
  4. すしざんまい
  5. 蒼龍唐玉堂 特製牛バラ担々麺

アーカイブ

PAGE TOP