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

    CSSで使えるカラーネームの一覧を見やすく表示してくれる「147 Colors」

    覚えておくと便利そうだったのでメモしときます。CSSでも使える147種…

  2. Web Service

    日本にいる住所を英語の住所に簡単に変換してくれるWebサービス「JuDress」

    日本にいる住所を英語の住所に簡単に変換してくれるWebサービス「JuD…

  3. JTF日本語スタイルチェッカー

    Web Service

    日本語の文章を手軽にチェックできる「JTF日本語スタイルチェッカー」

    JTF日本語スタイルチェッカーは日本語の文章を手軽にチェックすることが…

  4. TodoistのChrome拡張機能

    Web Service

    TodoistのChrome拡張機能があったので使ってみた

    普段から使っているTodo管理サービス「Todoist」のChrome…

  5. Web Service

    文字はいらない!Webサイトを画像だけで楽しむことができるブックマークレット「Wordless We…

    おもしろいブックマークレットがあったのでご紹介します。Webサイト上に…

  6. Sticky Notes

    Web Service

    付箋にメモを書いて画面内に複数追加できるChrome拡張機能「Sticky Notes」

    とても便利なChrome拡張機能を見つけたのでご紹介します。画面内にメ…

コメント

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

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

最近の記事

  1. エチオピア
  2. 紗々 飴色和栗
  3. DCG-CA21
  4. Apple WatchでのMacロック解除を無効
  5. オータムスイートポテトフラペチーノ

アーカイブ

PAGE TOP