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. Web Service

    キャッチコピーや文章作成に便利!類語を教えてくれる「文章リライトツール」

    ブログを書いたりキャッチコピーをつくったり文章作成するひとにとって役立…

  2. Web Service

    ChromeからワンクリックでDropboxにアクセスできる拡張機能

    ChromeからDropboxにワンクリックでアクセスできる拡張機能「…

  3. Web Service

    自由なサイズやカラー指定でダミー画像を生成できる「PLACEHOLD.IT」

    PLACEHOLD.ITはWeb製作に役立つダミー画像を生成してくれる…

  4. タイマーループ

    Web Service

    複数のタイマーを設定して組み合わせることができるGoogle Chrome拡張機能「タイマーループ」…

    ブラウザの拡張機能で便利なタイマーを探していたんですが、とてもよさげな…

  5. プレーンテキストでペースト

    Web Service

    Evernoteのペースト時にリッチテキストではなくプレーンテキスト(スタイルなし)にする方法

    意外と活用するシチュエーションが多いのでメモがてらご紹介します。Eve…

  6. Web Service

    レスポンシブ制作に役立つiPhone・iPad・Macの表示確認ツール「Respondr」

    レスポンシブWebデザインを制作する上で役立つ表示確認ツール「Resp…

コメント

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

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

最近の記事

  1. ペーストしてスタイルを合わせる
  2. Hermèsオレンジスポーツバンド
  3. GoPro HERO8 Black

アーカイブ

PAGE TOP