オリジナルカラーのテーマの作成しよう
実際に、オリジナルカラーのテーマを作成し、本連載の第2回で作成した会社案内サイトに適用してみましょう。
第2回で作成した会社案内サイト（テーマ「b」を適用）
独自のカラーテーマを適用したサイト
最初に、HTML上でdeta-theme属性を指定します。値はデフォルトで定義されている「a」〜「e」以外なら何でも構いませんが、今回は「f」を指定します。jQuery Mobile ベータ2以降は、ページ要素だけでなく、ヘッダー要素やフッター要素にも個別にdeta-theme属性を指定する必要がありますので注意してください。
data-role属性「listview」が指定されたリスト内の見出し項目（data-role属性「list-divider」を指定したli要素）は、デフォルトでは「b」のテーマが適用されます。data-dividertheme属性を利用して、見出しに対してもテーマ「f」が適用されるように設定しておきましょう（関連記事）。
テーマ「f」を適用するための設定が終わったHTMLは、以下のようになります（以下はトップページのみ掲載）。
■サンプル1[HTML]
<div data-role="page" id="index" data-theme="f">
<div data-role="header" data-theme="f">
<h1>to-R</h1>
</div>
<div data-role="content">
<ul data-role="listview" data-inset="true" data-dividertheme="f">
<li data-role="list-divider">Menu</li>
<li><a href="#about">
<h3>to-Rについて</h3>
</a></li>
<li><a href="#seminar">
<h3>セミナー情報</h3>
</a></li>
<li><a href="#access">
<h3>アクセス</h3>
</a></li>
<li><a href="#contact">
<h3>お問い合わせ</h3>
</a></li>
</ul>
</div>
<div data-role="footer" data-theme="f">
<h4>© 2011 to-R</h4>
</div>
</div>
この段階ではHTMLに対して共通CSSのみが適用されています。テーマCSSが適用されていない（テーマ「f」が定義されていない）ので、以下のようにカラーが設定される前の状態で表示されます。
共通CSSのみが適用されたjQuery Mobileサイト
独自テーマ「f」は、既存のテーマ「a」～「e」のCSSを丸ごとコピーして、必要な部分を修正することでも作成できますが、今回は最低限、必要なポイントに絞って作成します。
次のような基本のカラーテーマを作成します。
■サンプル2[CSS]
.ui-bar-f {
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);
}
ソースコードは少し複雑ですが、既存のテーマ「a」のCSSから以下の部分だけをコピーして、セレクター名をテーマ「f」用に修正し、背景に設定しているグラデーションのRGB値だけを変更したものです。
■テーマ「a」のCSS
.ui-bar-a {
border: 1px solid #2A2A2A;
background: #111111;
color: #ffffff;
font-weight: bold;
text-shadow: 0 -1px 1px #000000;
background-image: -webkit-gradient(linear, left top, left bottom, from(#3c3c3c), to(#111));
background-image: -webkit-linear-gradient(top, #3c3c3c , #111 );
background-image: -moz-linear-gradient(top, #3c3c3c , #111 );
background-image: -ms-linear-gradient(top, #3c3c3c , #111 );
background-image: -o-linear-gradient(top, #3c3c3c , #111 );
background-image: linear-gradient(top, #3c3c3c , #111 );
}
サンプル2のCSSを追加するだけで、テーマ「f」を指定したサイト内のほとんどのカラーが、指定したオリジナルカラーに変更されます。
独自カラーが適用されたjQuery Mobileサイト
ただ、この状態ではサイト内のいくつかのパーツに、オリジナルカラーがまだ適用されていません。たとえば、ボタンのテキストは共通CSSのデフォルトの設定のままです。
ボタンの文字にオリジナルカラーがまだ適用されていない
そこで、CSSを追加して、残りのパーツにもオリジナルカラーを適用しましょう。
