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でテーマを作成して、あとはフレームワークに沿った形でマークアップしていけば作業コストも減っていいかもしれませんね。

関連記事

  1. CSS Gradient Animator

    Web Service

    CSSでグラデーション背景を変化させるコード作成ジェネレーター「CSS Gradient Anima…

    CSSで変化するグラデーション背景を作成したい時に役立つジェネレーター…

  2. Web Service

    CSSで吹き出しをサクっと作ることができる便利なツール「cssarrowplease」

    CSSでとても簡単に吹き出しを作ってくれる便利なツール「cssarro…

  3. Web Service

    現在のブラウザサイズをリアルタイムで教えてくれる「What’s My Browser S…

    かなりシンプルでよさげなWebサービスがあったのでご紹介します。現在の…

  4. Google Similar Pages

    Web Service

    現在閲覧中のサイトと似ているサイトを探してくれるChrome拡張機能「Google Similar …

    前回、同様のWebサービス「SimilarSites」をご紹介したんで…

  5. Web Service

    iPhoneアプリ「Resize Photo」を使って撮った画像を好きなサイズにリサイズする

    iPhoneで撮った画像をリサイズしたい時ってありますよね。Resiz…

  6. Web Service

    Macでシンプルなワードプロセッサ「Bean」をインストールしてみた

    結構シンプルで使いやすいMacのワードプロセッサを入れてみました。とて…

コメント

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

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

最近の記事

  1. Olli
  2. 単語帳メーカー(Flashcard Maker App)
  3. 1Password 7
  4. 風に揺れる草

Facebookページ

PAGE TOP