オリジナルカラーのテーマの作成しよう

　 実際に、オリジナルカラーのテーマを作成し、本連載の第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>&copy; 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を追加して、残りのパーツにもオリジナルカラーを適用しましょう。

ボタンの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にも一部手を加える必要がありますので、少しややこしい点もありますが、一度テーマを作成してしまえば、以降は簡単にオリジナルカラーのテーマを作成できるでしょう。ぜひ、試してみてください。