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

    Draftpadのアシスト機能を使えばEvernoteやDropboxはもちろん、するぷろ for …

    前々からDraftpadを入れてたんですが、ほとんど使っていませんでし…

  2. Web Service

    コピペチェックツールに最適!テキスト比較でどこが違うか発見できる「difff《デュフフ》」

    これはコピペチェックツールとして最適ですね。2つの文章を比較してどこが…

  3. Web Service

    PhotoshopのようなインターフェースのCSS3ジェネレーター「Layer Styles」

    Photoshopに慣れてる人なら違和感なく使いこなせそうですね。CS…

  4. Web Service

    カラーコードからRGBコードに変換(その逆も)してくれる「RGB変換」

    カラーコードからRGBコードに変換してくれるサービスを探していたら理想…

  5. Web Service

    カラフルなニュースリーダーがおもしろい!GoogleChromeの拡張機能「HitFT (Japan…

    とても個人的に面白いニュースリーダーがあったので備忘録がてらご紹介しま…

  6. Web Service

    エバノートにノートリンク機能があることを知らなかったので使ってみた

    エバノートにノートリンク機能なんてのがあるみたいですね。知らなかったで…

コメント

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

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

最近の記事

  1. EOS RP
  2. COMOLI シルクネルジャケット シルクネルドローストリングパンツ
  3. スターバックス ハシエンダ アルサシア
  4. イングリッシュマフィン

アーカイブ

PAGE TOP