テーマローラー

「30分でスマホサイト作成」ページでも軽くご紹介しましたが、jQueryMobileでは「data-theme」という属性をタグに追加するだけで簡単に色を変えることができます。 最初に用意されているテーマはa~e(黒・青・グレー・白・黄色)の5つですが、「これだけじゃ足りねー」という人のために、 「テーマローラーを使って独自の新しいテーマを作る方法」をご紹介します。

 

新規テーマ作成方法

(1)まず、テーマローラーのサイトへいきます。
http://jquerymobile.com/themeroller

(2)「Welcome to ThemeRoller for jQuery Mobile」というメッセージが出ますので、 「Get Rolling」ボタンを押してください。

(3)上部にある「Import」ボタンをクリックします。
バージョンは最新のもの(現在は1.2.0)を選択し、次に右上の「Import Default Theme」をクリック。 CSSのコードが表示されたのを確認して「Import」ボタンを押します。


画像1

(4)画像1のような画面になります。このようにインポートすることで最初から設定されているa~eのテーマを使いつつ、 新たなテーマも使えるようになります。新たなテーマはfから追加されていきます。
Eの横の「Add swatch...」をクリックしてください。


画像2

(5)画像2の①のように「F」が追加されます。Fに関するテーマを作成してくので②部分のFをクリック。 表示された③部分でヘッダー・フッターバーやコンテンツ、ボタンの色など設定していきます。
ちなみにBackground項目にある「+」を押すと背景色をグラデーションにできます。
あと、Globalのところで全体の共通設定を行うことができます。


画像3

(6)そしてテキトーに設定してみたのが画像3のFです。
セックスピストルズというか初期パンクな配色にしてみました。いくつも作ることができるので、G、H、I、…と新規テーマを作ってみてください。

(7)作成後、上部ある「Download」をクリックします。 「Theme Name」に好きなcssファイル名(例として今回はpunkにします)を入力し、「Download Zip」ボタンを押します。
最後にZipファイルをダウンロードしてください。

ダウンロードした中から使うファイルはthemesフォルダの中にある 「punk.css」「images」の2つです。


 

 

読み込みファイル設定方法

まず、head内にダウンロードしたcssファイルなどを下記のように読み込ませてください。

 


						<head>
							<meta charset="utf-8">
							<title>sample</title>
							<meta name="viewport" content="width=device-width, initial-scale=1">
							<link rel="stylesheet" href="css/punk.css" />
							<link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile.structure-1.2.0.min.css" />
							<script src="http://code.jquery.com/jquery-1.8.3.min.js"></script>
							<script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script>
						</head>
					

 

いつもどおりCDNでjQueryとjQueryMobileのJavaScriptファイルを読み込ませます。
またCSS部分で1点注意ですが、いつもどおりjQueryMobile用CSSを読み込ませるのではなく、
新規で作った「punk.css」と構造部分が記述された「jquery.mobile.structure-1.2.0.min.css」の2つを読み込ませるようにします。

「jquery.mobile.structure-1.2.0.min.css」ファイル(現在、1.2.0が最新)はjQueryMobileサイトよりダウンロード、またはjQuery CDNより最新のものを探して使ってください。

※各ファイル最新バージョンを読み込ませてください。
※ダウンロードした新規テーマの「punk.css」と「images」は同じ階層においてください。
CDNはこちらから。またCDNではなく、普通にファイルをダウンロードして読み込ませてもオッケーです。

あとは、新規で作ったテーマ「F」を「data-theme="f"」の形でヘッダーやコンテンツ内に追加して使ってみてください。

 


画像4

画像5

 

【画像4のHTMLソースコード】

						<!DOCTYPE html>
						<html>
							<head>
								<meta charset="utf-8">
								<title>sample</title>
								<meta name="viewport" content="width=device-width, initial-scale=1">
								<link rel="stylesheet" href="css/punk.css" />
								<link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile.structure-1.2.0.min.css" />
								<script src="http://code.jquery.com/jquery-1.8.3.min.js"></script>
								<script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script>
							</head>
							<body>
								<!----画像4-------------->
								<div id="home" data-role="page" data-theme="f">
									<div data-role="header" data-theme="f">
										<h1>sample</h1>
									</div>
									<div data-role="content">
										<p>テーマFだけを使いました。</p>
										<ul data-role="listview">
											<li><a href="#">menu1</a></li>
											<li><a href="#">menu1</a></li>
											<li><a href="#">menu1</a></li>
											<li><a href="#">menu1</a></li>
										</ul>
										<p>&nbsp;</p>
									</div>
									<div data-role="footer" data-theme="f">
										<div data-role="navbar" data-iconpos="top">
											<ul>
												<li><a href="#" data-icon="info">nav1</a></li>
												<li><a href="#" data-icon="star">nav2</a></li>
												<li><a href="#" data-icon="alert">nav3</a></li>
											</ul>
										</div>
										<h3>(c)sample</h3>
									</div>
								</div>
							</body>
						</html>
					

 

新たに作成したテーマFを使ったものが画像4です…
パンクというか、ヤバいですね。

あと画像5のように最初から設定されているa~eのテーマと併用して使うこともできます。
好きなように独自のテーマを作ってみてください。

 

-----------------------------

【2013/2/8追記】

テーマローラーのグローバル設定部分でアイコンを黒に変えたはずなのになぜか白いアイコンのまま(フッターのボタンアイコンとかリストビューの矢印アイコン)になってしまいます。
作成した「punk.css」ファイルの中の「/* Structure */」より下にある「/* HD/"retina" sprite」のところの
「background-image: url(images/icons-36-white.png);」を「background-image: url(images/icons-36-black.png);」
にしたところ、ちゃんとアイコンが黒色になりました。