ボタンのCSSを変更する
ボタンのテキストカラーは、次のようなCSSを追加することで変更できます。hover時のスタイルを「.ui-btn-hover-f」に、down時のスタイルを「.ui-btn-down-f」に、active時のスタイルを「.ui-btn-active」に指定できます。これらのスタイルはボタンだけでなく、フォームやリストをタップしたときなどにも利用されます。
■サンプル3[CSS]
.ui-btn-up-f {
text-decoration: none;
border: 1px solid #669999;
background: #709f9f;
color: #ffffff;
font-weight: bold;
text-shadow: 0 -1px 1px #669999;
background-image: -webkit-gradient(linear, left top, left bottom, from(#b4cece), to(#709f9f));
background-image: -webkit-linear-gradient(top, #b4cece, #709f9f);
background-image: -moz-linear-gradient(top, #b4cece, #709f9f);
background-image: -ms-linear-gradient(top, #b4cece, #709f9f);
background-image: -o-linear-gradient(top, #b4cece, #709f9f);
background-image: linear-gradient(top, #b4cece, #709f9f);
}
.ui-btn-hover-f ,
.ui-btn-down-f ,
.ui-body-f .ui-btn-active {
text-decoration: none;
border: 1px solid #669999;
background: #709f9f;
color: #ffffff;
font-weight: bold;
text-shadow: 0 -1px 1px #669999;
background-image: -webkit-gradient(linear, left top, left bottom, from(#709f9f), to(#5B8888));
background-image: -webkit-linear-gradient(top, #709f9f, #5B8888);
background-image: -moz-linear-gradient(top, #709f9f, #5B8888);
background-image: -ms-linear-gradient(top, #709f9f, #5B8888);
background-image: -o-linear-gradient(top, #709f9f, #5B8888);
background-image: linear-gradient(top, #709f9f, #5B8888);
}
注意したいのは、「.ui-btn-active」が、共通CSSで定義されているスタイルだということです。共通CSSを上書きすると、他のテーマを利用するときに影響してしまう可能性があります。他のテーマへの干渉を防ぐために、共通CSSでは冒頭に「.ui-body-f」といった親要素を指定するセレクターを追加し、テーマ「f」の場合にのみ適用されるようにしましょう。
これでほぼ整いましたが、チェックボックスやラジオボタンがチェックされたときのスタイルにはまだオリジナルカラーが適用されていません。
チェックボックスのチェックにまだオリジナルカラーのテーマが適用されていない
チェックボックスやラジオボタンのチェックは「.ui-icon-checkbox-on」「.ui-checkbox-on .ui-icon」「.ui-radio-on .ui-icon」といった共通CSSで定義されていますので、次のようなスタイルを追加しておきましょう。
■サンプル4[CSS]
.ui-body-f .ui-icon-checkbox-on,
.ui-body-f .ui-checkbox-on .ui-icon,
.ui-body-f .ui-radio-on .ui-icon {
background-color: #709f9f;
}
以上でオリジナルカラーのテーマを作成できました。jQuery MobileではテーマCSSの仕組みを利用することで、既存のデザインをベースにしたオリジナルのテーマを作成できます。
共通CSSにも一部手を加える必要がありますので、少しややこしい点もありますが、一度テーマを作成してしまえば、以降は簡単にオリジナルカラーのテーマを作成できるでしょう。ぜひ、試してみてください。
著者：西畑一馬（にしはた かずま）
to-R代表、Webクリエイター。PHPによるシステム開発や、CMSを利用したWebサイト制作、SEO対策などのマーケティング、コンサルティング、Webクリエイター向けの講座などを業務で行なっている。また、ブログto-RではJavaScriptやSEO対策、CSS、Movable TypeなどのWeb制作にかかわるさまざまな情報を発信している。
主な著書に「Web制作の現場で使う jQueryデザイン入門」（アスキー・メディアワークス刊）がある。
