jQuery Mobileでサイトを作ってみた。 Vol.2

Tags: , , , , | 10分ぐらいで読めるよ！

JavaScript
Bookmark this on Yahoo Bookmark
Bookmark this on Livedoor Clip

jQuery Mobileでサイトを作ってみた。 Vol.2

こんにちは！
泣く子も黙るコーダー、ゆぅです！（別に怖い人ではないですよ）

さて、今回のテーマは「jQuery Mobileでサイトを作ってみた。Vol.2」！
（第一弾「jQuery Mobile基礎」はこちら。）
今回はがっつりカスタマイズ。オリジナルのテーマの作り方をまとめます。

jQuery Mobileのテーマ（スタイル）

jQuery Mobileにはあらかじめいくつかスタイルが定義されていて、それを組み合わせて見た目を変えていくことができますが、もっとデザインをごりごり変えたい場合があります。

jQuery Mobileのテーマ一覧

ウフルの場合はコーポレートカラーが「緑」なので、それをどうしても入れたいわけです。

あらかじめ用意されているテーマは「a～e」。それ以外のアルファベットなら問題なく使えそうですね。（もちろんcss上書きでa～eも使えないことはないですが）

オリジナルテーマ「data-theme=”u”」！

もちろん「u」は「uhuru」の「u」(笑)。（最初は「data-theme=”uhuru”」で作れないかなとも思ったのですがjQuery Mobileのほうで最初の一文字に省略されて出力されてしまうところを見つけてしまったので（どこだっけな。。。）、アルファベット一文字です。）

まず、本家のサイトからDownload＞CDN-Hosted CSS:のUncompressed: jquery-mobile-1.0b1.css（2011年7月現在最新版）をダウンロードしてください。（minのほうをDLするとどこからどこまでが何なのかがわからなくなります。。。あわわ。。。）このファイルをもとにカスタマイズ用のテーマcssを作ります。

DLしてきたCSSの名前をわかりやすい名前に変えて保存（今回のはjquery.mobile_uhuru.css）。中身で使うのは上のほうのテーマaの記述部分だけなので、他は削除。

.ui-bar-a {
    //以下略
}

とか書いてあるところの最後の一文字「a」を任意のアルファベット一文字(今回は「u」)に書き換えます。

.ui-bar-u {
    //以下略
}

あとはcssを好きなように変えていきます。

.ui-bar-u {
	border: 1px solid #c0c0c0;
	background: #FFFFFF;
	color: #038d0e;
	font-weight: bold;
	text-shadow: 0 -1px 1px #999999;
	background-image: -moz-linear-gradient(top, #FFFFFF, #e6e6e6);
	background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0, #FFFFFF),color-stop(1, #e6e6e6));
  	-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorStr='#FFFFFF', EndColorStr='#e6e6e6')";
}

ヘッダー、フッターに使われるバーのところです。
7行目からはグラデーションので設定ですね。その他、背景、ボタンをオリジナルのものに書き換えれば準備完了です。

オリジナルテーマを設定

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width,  initial-scale=1">
<link rel="stylesheet" href="http://code.jquery.com/mobile/latest/jquery.mobile.min.css" />
<link rel="stylesheet" href="css/jquery.mobile_uhuru.css" /> <!--ここに追加-->
<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>
<script type="text/javascript">
	$(document).bind("mobileinit", function(){  $.mobile.ajaxLinksEnabled = false;});
</script>
<script src="http://code.jquery.com/mobile/latest/jquery.mobile.min.js"></script>
</head>

7行目でオリジナルテーマのcssを追加しています。

読み込み順

jQuery Mobileのcss読み込み、続いて作成したオリジナルテーマのCSSを読み込み、jQuery 本体、jQuery Mobile(js)といった順ですね。
最初にオリジナルのテーマを最後に読み込むように設定したらAndroidでオリジナルテーマを読み込む処理が遅くてjQuery Mobileのデフォルトのテーマのまま出てしまったことがあったので、この順にしています。

ビフォーアフター

大枠はこれで出来たので細かいところを少々。

カスタマイズ

…で省略されるのを防ぐ

フッターや本文の見出しなど、長い文字が入ると「…」で省略されてしまうのでこちら。

.ui-body-任意のアルファベット .ui-listview h3,
.ui-body-任意のアルファベット .ui-footer .ui-title {
    overflow: visible;
    white-space: normal;
}

省略されたくない部分に上記のcssを設定してください。

h1（大見出し）を画像に(Retinaディスプレイ対応)

css3を駆使し、画像を使わなくても華やか（？）なjQuery Mobileですが、せめてロゴくらい入れたいなと思います。

まずは通常の見出しの設定を。

<div data-role="header" data-backbtn="false">
        <h1>株式会社ウフル</h1>
</div>

cssはtext-indentで外に吹き飛ばす小細工を。

.ui-header .ui-title {
	display:block;
	text-indent:-9999px; /*テキストを外に*/
	width:166px;/*画像のサイズ*/
	height:45px;/*画像のサイズ*/
	margin: 0.6em auto 0.8em;
	background: url("../images/logo.png") no-repeat center center;/*通常サイズのロゴ画像*/
}

これで通常のロゴ画像は設定完了。このままではiPhone4で見たときロゴがシャギってしまいます。

通常とRetinaディスプレイの比較。Retinaって「網膜」という意味らしいよ

Retinaディスプレイ用の設定を追加します。

@media only screen and (-webkit-min-device-pixel-ratio: 2) {
	.ui-header .ui-title {
		background: url("../images/logo_x2.png") no-repeat center center !important;
		background-size: 166px 45px;
	}
}

logo_x2.pngは通常サイズの倍の大きさ（332px×90px）の画像です。@media only screen and (-webkit-min-device-pixel-ratio: 2)で対応していたらcssが上書きされる形ですね。

ホーム画面アイコン

ホーム画面にブックマークした際に使用されるアイコン用画像の設定は以下。

<head>
<!--以下略-->
<link rel="apple-touch-icon" href="画像ファイルへのパス(png)">
</head>

角丸やら光ってる感じとかは入れなくてもiPhoneだといい感じに勝手に設定してくれます。
ただAndroidそんな素敵仕様はないので、あらかじめ付けておく必要があります。加工した画像をそのまま使うとiPhoneが二重に素敵設定を施してしまうので、

<head>
<!--以下略-->
<link rel="apple-touch-icon-precomposed" href="画像ファイルへのパス(png)">
</head>

こちらに書き換えます。

（※うちのサイトまだ作ってません。自分用にメモメモ）

リストの見出しだけ変えたい

jQuery Mobileでは素敵なリストが用意されています。デザインはデフォルトで青見出し(data-theme=”b”)銀ベース（前回グレーって書いちゃった。。。)です。

<ul data-role="listview" data-inset="true">
      <li data-role="list-divider">Contents</li>
      <li><a href="#about"><h3>uhuruについて</h3></a></li>
      <li><a href="#access"><h3>アクセス</h3></a></li>
</ul>

リスト

data-themeを変えても見出しがbのまま。。。そこを変えるにはdata-divider-theme=”u”をulに追加しなくちゃいけないようです。 

<ul data-role="listview" data-inset="true" data-divider-theme="u">
            <li data-role="list-divider">Contents</li>
<!--以下略-->
</ul>

data-divider-theme=”u”を追加すると見出し部分に.ui-bar-uが追加されます。ヘッダーフッターと同じですね。

ui-bar-uをそのまま使ったリスト

なんか微妙か（緑の見出しにしたいな）と思い「data-themeを変えても見出しがbのまま」を利用して上書き。

.ui-body-u .ui-bar-b {
	border: 1px solid #026a0a;
	background: #038d0e;
	color: #FFFFFF;
	 font-weight: bold;
    text-shadow: 0 -1px 1px #026a0a;
	background-image: -moz-linear-gradient(top, #02a411, #038b0e);
	background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0, #02a411),color-stop(1, #038b0e));
  	-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorStr='#02a411', EndColorStr='#038b0e')";
}

bのテーマのbarにオリジナル設定をごり押し。

リストの見出しテーマbだけど無理やりオリジナルテーマ

こうするとdata-divider-theme=”u”をリストを使うたびに追加しなくちゃいけない手間も省ける！
ただし、こうしちゃうと.ui-bar-b(青いやつ)を使いたくなった時、困るかもしれないので要注意！（今回はナイでしょうと横着してしまった。）

次回ももうちょっとだけ「jQuery Mobile」関連予定。

参考サイト

Page Top

関連記事

Page Top

Trackback URL

＊トラックバックされる際にはこの記事へのリンクをお願い致します。

Page Top

Leave a Reply

*は入力必須項目です。





Page Top