jQuery mobileのテーマを初期化してデザインをカスタマイズ

jQuery mobileをベースに組んであるウェブサイトで
デフォルトのテーマとは全く違うデザインにする場合の方法

jQuery mobile には、初期設定でA~Eの5種類のテーマが入っています。
一般的に、このテーマの色やグラデーションなどの装飾を取り外したいところには
装飾を無効にする data-role=”none”  や
特定のテーマを部分指定する data-theme=”[a-z]” で、
初期設定では存在しないf以降を指定する方法がしられています。

ただ、この方法でも
角丸やドロップシャドウなど全テーマ共通のスタイルが残っており
これらをリセットするスタイルを被せてから任意のスタイルを設定する事もあります。

そこで、もう根本的にオリジナルのデザインにする場合のもう一つの方法を紹介します。

デフォルトテーマなしの jquery.mobile.structure-x.x.x.css を選ぶ

jQuery mobileの基本構造で組み込むcssには
A~Eの初期テーマありのものと、装飾ぬきでレイアウトのみ再現してくれるもの2種類があります。

「with Default theme」がついているものが、デフォルトテーマ込のCSSで
「without a theme」のほうが、テーマ抜きのCSSです。

jquery-mobile-orisinal-theme1

テーマの設定項目を把握しやすいようオリジナルテーマを作成

装飾を設定できるclassをかんたんに把握するため
jQuery mobile のテーマをカスタマイズできる公式サービスThemeRollerを使って任意のスタイルに近いテーマをつくります。

jquery-mobile-orisinal-theme2

これで、jQuery mobile のjavascriptでどんなclassが割り付けられているのかひと通り把握できます。
作成できたらダウンロードし jquery.mobile.structure-x.x.x.css の次に読み込むようにします。

<br />
/* A<br />
-----------------------------------------------------------------------------------------------------------*/</p>
<p>.ui-bar-a {<br />
	border: 1px solid 		#b3b3b3 /*{a-bar-border}*/;<br />
	background: 			#eeeeee /*{a-bar-background-color}*/;<br />
	color: 					#3e3e3e /*{a-bar-color}*/;<br />
	font-weight: bold;<br />
	text-shadow: 0 /*{a-bar-shadow-x}*/ 1px /*{a-bar-shadow-y}*/ 0 /*{a-bar-shadow-radius}*/ 	#ffffff /*{a-bar-shadow-color}*/;<br />
	background-image: -webkit-gradient(linear, left top, left bottom, from( #f0f0f0 /*{a-bar-background-start}*/), to( #dddddd /*{a-bar-background-end}*/)); /* Saf4+, Chrome */<br />
	background-image: -webkit-linear-gradient( #f0f0f0 /*{a-bar-background-start}*/, #dddddd /*{a-bar-background-end}*/); /* Chrome 10+, Saf5.1+ */<br />
	background-image:    -moz-linear-gradient( #f0f0f0 /*{a-bar-background-start}*/, #dddddd /*{a-bar-background-end}*/); /* FF3.6 */<br />
	background-image:     -ms-linear-gradient( #f0f0f0 /*{a-bar-background-start}*/, #dddddd /*{a-bar-background-end}*/); /* IE10 */<br />
	background-image:      -o-linear-gradient( #f0f0f0 /*{a-bar-background-start}*/, #dddddd /*{a-bar-background-end}*/); /* Opera 11.10+ */<br />
	background-image:         linear-gradient( #f0f0f0 /*{a-bar-background-start}*/, #dddddd /*{a-bar-background-end}*/);<br />
}<br />
.ui-bar-a .ui-link-inherit {<br />
	color: 	#3e3e3e /*{a-bar-color}*/;<br />
}</p>
<p>.ui-bar-a a.ui-link {<br />
	color: #7cc4e7 /*{a-bar-link-color}*/;<br />
	font-weight: bold;<br />
}<br />

ThemeRollerでは設定しきれなかった部分
例えば、枠線の設定を上下左右で別々にできないなどの細かい設定を任意のものに書き換えるか別のCSSで上書き指定すれば
かなり自由にjQuery mobileのデザインをカスタマイズすることができます。

関連記事