CSSカスタマイズ

前回、テーマローラーを使って自分好みのテーマを設定しデザインを変更する方法をご紹介しましたが、
今回は、jQueryMobile用CSSをカスタマイズ(外部CSSで上書き)などして、独自のスマホサイトに仕上げる方法をご紹介します。
細かいところまでいろいろデザイン変更できるので試しにやってみてください。

※詳しい説明などは他サイト・書籍を見てください。

 

ページデザイン変更(jQM1.2)



画像1

画像2

画像3

 

【HTMLソース】


						<!DOCTYPE html>
						<html>
							<head>
								<meta charset="utf-8">
								<title>sample</title>
								<meta name="viewport" content="width=device-width, initial-scale=1">
								<link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css" />
								<link rel="stylesheet" href="custom.css" />
								<script src="http://code.jquery.com/jquery-1.8.3.js"></script>
								<script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script>
							</head>
							<body>
								<!---home--------------------->
								<div id="home" data-role="page">
									<div data-role="header">
										<h1>勝手にスマホサイトまとめ</h1>
									</div>
									<div data-role="content">
										<p><strong>スマホサイト種別</strong></p>
										<ul data-role="listview" data-inset="true">
											<li><a href="#">ファッション・アパレル</a></li>
											<li><a href="#">IT・通信・EC・ネット関連</a></li>
											<li><a href="#">飲料・食料品</a></li>
											<li><a href="#">不動産・建設・建材 / 新車・中古車・バイク関連 など</a></li>
										</ul>
										<p><strong>ボタン</strong></p>
										<a href="#page2" data-role="button" data-icon="star">page2へ</a>
									</div>
									<div data-role="footer">
										<h1>sumaho site matome</h1>
									</div>
								</div>

								<!---page2-------------------->
								<div id="page2" data-role="page">
									<div data-role="header">
										<a href="#home" data-role="button" data-icon="home" data-iconpos="notext">home</a>
										<h1>page2</h1>
									</div>
									<div data-role="content">
										<p>このサイトは主に「かっこいい(パンクロックな)スマホサイトを勝手に集めてまとめたサイト」です。</p>
										<p>あと、jQueryMobile使ったスマホサイト作成方法のご紹介もしてます。</p>
										<p>スマホサイトデザインの参考としてご活用くださいませ。</p>
										<a href="#dialog1" data-role="button" data-rel="dialog" data-icon="info">dialog</a>
										<p>jQueryMobileを使ったスマホサイト作成方法についてもご紹介してます。</p>
										<p>基本的なページ作成方法・コンポーネント・イベント処理・テーマローラー使い方・jQueryプラグインのご紹介…など。</p>
										<p>詳細については各ページを見て下さい。逆に掲載すべき内容などございましたらご連絡くださいませ。</p>
									</div>
								</div>

								<!---ダイアログ---------->
								<div id="dialog1" data-role="dialog">
									<div data-role="header">
										<h1>ダイアログ</h1>
									</div>
									<div data-role="content">
										<p>ダイアログのテストです。</p>
									</div>
								</div>
							</body>
						</html>
					

【custom.cssに記述する内容】


						/*--ページ--*/
						.ui-page{
							background:#ffffff;
						}
						/*--ヘッダー--*/
						.ui-header{
							background: linear-gradient(#efefef, #446083);
							background: -moz-linear-gradient(#efefef, #446083);
							background: -webkit-linear-gradient(#efefef, #446083);
						}
						/*--フッター--*/
						.ui-footer{
							background: linear-gradient(#efefef, #446083);
							background: -moz-linear-gradient(#efefef, #446083);
							background: -webkit-linear-gradient(#efefef, #446083);
						}
						/*--タイトル(ヘッダー、フッターとかの)--*/
						.ui-title{
							color:#ffffff;
							text-shadow:none;
						}
						/*--フッタータイトルのみ--*/
						.ui-footer .ui-title{
							color:#ffffff;
							text-shadow:none;
							font-size:13px;
						}
						/*--コンテンツ--*/
						.ui-content{
							color:#4c566c;
							text-shadow:none;
							background:url(images/c_bg.gif);
						}


						/*---表示文字数を増やす(全文字表示---
						(ヘッダー,フッター,ボタン,リスト見出し,リンクリスト,リスト詳細部分)---*/
						.ui-header .ui-title,
						.ui-footer .ui-title,
						.ui-btn-inner,
						.ui-li-heading,
						.ui-li .ui-btn-text a.ui-link-inherit,
						.ui-li-desc
						{ 
							overflow: visible;
							white-space: normal;
						}

						/* ヘッダータイトルの外側余白なし*/
						.ui-header .ui-title
						{
							margin-left:0%;
							margin-right:0%;
						}
					

※custom.cssをhead内のjQueryMobile用CSSの後に読み込ませておいてください。
※上記のhtml、cssを適用させたものが画像1、2、3になります。

 

いつも通りjQueryMobileの各ファイルをCDNでhead内に読み込ませます。
そしてcustom.cssでjQueryMobile用CSSを部分的に上書きする感じでカスタマイズしていきます。
(ガチでいくならCDNではなくjQueryMobile用CSSファイルをダウンロードして、中を書き換えて使った方がいいかもしれません)

今回は「ページ、ヘッダー、フッター、コンテンツ、表示文字数」についての デザイン変更方法についてご紹介していきます。

 

(1)ヘッダー、フッター、コンテンツ
「.ui-header」「.ui-footer」「.ui-content」が指定されているので、
この部分の内容を上書きすることでデザイン変更できます。
custom.cssではヘッダー・フッターの背景にグラデーションを、コンテンツ背景には画像を設定し、
またコンテンツ内の文字の色変更・シャドウ無しにしてみました。

(2)ヘッダー、フッターのタイトル
「.ui-title」が指定されているのでこの部分の内容を上書きでデザイン変更できます。
custom.cssでは文字の色変更・シャドウ無しにしつつ、「.ui-footer .ui-title」で
フッタータイトルのみフォントサイズ変更するようにしてみました。

(3)表示文字数
デフォルト設定のままだと数文字しか表示されません。
ヘッダータイトルなどが「勝手にスマホ...」みたいな感じで省略されてしまいます。
なのでcustom.cssでは、ヘッダー・フッター・リスト見出しなどの文字数が多い場合は
折り返して全文字表示するように上書きしています。
またヘッダータイトルのみ外側余白を無くし、なるべく1行で表示されるように調整しました。

※ただし、ヘッダーにボタンを設置する場合は余白を無くしすぎない方がいいかもです。
デフォルトでは、ヘッダータイトルに「margin: .6em 30% .8em;」という感じで左右30%の余白が設定されています。
custom.cssではこの左右余白をなくしました。

このcssを適用させたものが画像1、2、3になります。
そしてこのやり方だと全ページ(ダイアログも)統一されたデザインになります。
今回はとりあえずiPhoneのメールとか設定画面っぽい感じにしてみましたが、
ページごと・部分ごとにデザイン変えるなどいろいろ試してみてください。
次回はボタン・リストビューのCSS上書きのご紹介になります。

 


 

 

リストビュー・ボタンのデザイン変更(jQM1.2)

前回の「ページデザイン変更」の続きで、今回はリストビュー・ボタン部分についてのCSS上書きとなります。



画像4

画像5

画像6

 

【HTML変更(2箇所)】


						<!---変更箇所1:homeのリストビュー部分-------->
						<ul data-role="listview" data-inset="true">
							<li><a href="#"><img src="images/li01.png">
								<h3>ファッション・アパレル</h3>
								<p>その他 ファッション通販サイト</p></a>
							</li>
							<li><a href="#"><img src="images/li01.png">
								<h3>IT・通信・EC・ネット関連</h3>
								<p>その他 webサイト制作・アプリ開発、ポータルサイトなど</p></a>
							</li>
							<li><a href="#"><img src="images/li01.png">
								<h3>飲料・食料品</h3>
								<p>その他 飲料・食料品、飲食店など</p></a>
							</li>
						</ul>

						<!---変更箇所2:page2のhomeに戻るボタン部分------->
						<a href="#home" data-role="button">home</a>
					

※前回のHTMLコード内の2箇所を上記の内容に変更してください。
※リストのサムネイル部分で使用する画像(li01.png)は何かテキトーなものを用意してください。

 

【CSS追加分】


						/*---リスト・ボタンの影を消す----*/
						.ui-shadow{
							box-shadow:none;
						}

						/*---ボタンコーナーの角丸---*/
						.ui-btn-corner-all{
							border-radius:5px;
						}

						/*---ボタンサイズ---*/
						.ui-btn-inner{
							padding:5px 20px;
						}


						/*---リスト・ボタン背景色---*/

						.ui-btn-up-c,
						.ui-btn-hover-c,
						.ui-btn-down-c{
							background:#ffffff;
						}

						/*---リスト・ボタンのタップ時---*/
						.ui-btn-active{
							background:#7193be;
							text-shadow:none;
						}


						/*---ヘッダー内ボタン装飾---*/
						.ui-header .ui-btn-up-a,
						.ui-header .ui-btn-hover-a,
						.ui-header .ui-btn-down-a{
							background:#446083;
						}

						.ui-header .ui-btn-active{
							border:1px solid #7193be;
							background:#7193be;
						}


						/*---arrow-r アイコン(リスト右端部分)---*/
						.ui-icon-arrow-r{
							background: transparent url(images/icons-18-black.png) no-repeat -108px 50%;
							box-shadow:none;
						}
						/*---star アイコン(page2へボタン部分)---*/
						.ui-icon-star{
							background: #446083 url(images/icons-18-white.png) no-repeat -468px 50%;
							box-shadow:none;
						}
						/*---info アイコン(dialogボタン部分)---*/
						.ui-icon-info{
							background: #446083 url(images/icons-18-white.png) no-repeat -540px 50%;
							box-shadow:none;
						}


						/*---リストビュー サムネイル画像部分----*/
						.ui-li-thumb{
							padding:15px 10px 0px 10px;
							max-width:60px;
							max-height:60px;
						}


						/*---リストビュー 見出し・説明文エリア部分-----*/
						.ui-li-has-thumb .ui-btn-inner a.ui-link-inherit{
							padding-left:60px;
							min-height:70px;
						}

						.ui-li-heading{
							font-size:15px;
						}

						.ui-li-desc{
							color:#1955d8;
						}
					

※前回の「custom.css」に上記CSSの内容を追加してください。

 

前回の「ページデザイン変更」の続きで、今回はリストビュー・ボタン部分についてのCSS上書きとなります。

ボタンアイコンについては、jQueryMobileダウンロード時に「images」フォルダに入っている
icons-18-black.png」「icons-18-white.png」を使用しますので
下記よりダウンロードして用意しておいて下さい。

http://jquerymobile.com/download/
※ページ内の「Zip File: jquery.mobile-バージョン.zip (JavaScript, CSS, and images)」をダウンロード。
jQueryMobile関連のファイル一式になります。

 

(1)影・コーナー角丸・サイズ・背景・タップ時について

  • リスト・ボタンの影:「.ui-shadow」
  • ボタンコーナー角丸:「.ui-btn-corner-all」
  • ボタンサイズ:「.ui-btn-inner」
  • リスト・ボタン背景色:「.ui-btn-up-c, .ui-btn-hover-c, .ui-btn-down-c」
  • リスト・ボタンのタップ時:「.ui-btn-active」

それぞれ上記のクラスが指定されているので、この部分の内容を上書きすることでデザイン変更できます。

custom.cssでは「影:無し」「角丸:角の丸みを調整してより四角っぽく」「サイズ:内側余白を調整して細い感じに」
「背景:白色」「タップ時:背景色変更、文字の影無し」にしてみました。

ヘッダー内のボタンには「.ui-header」を追加してデザイン変更を適用させます。
またデフォルトではヘッダー内はテーマ「c」ではなく「a」が指定されているため、ヘッダー内のボタン背景色は
「.ui-btn-up-a, .ui-btn-hover-a, .ui-btn-down-a」を使います。

 

(2)ボタンアイコンについて

今回使用しているアイコンは、
homeのリストビュー右端にある「arrow-r」、homeのpage2へボタンの「star」、page2のdialogボタンの「info」の3つです。

  • arrow-r:「.ui-icon-arrow-r」、background-positionは「-108px 50%」
  • star:「.ui-icon-star」、background-positionは「-468px 50%」
  • info:「.ui-icon-info」、background-positionは「-540px 50%」

それぞれ上記のクラスが指定されているので、この部分の内容を上書きすることでデザイン変更できます。

またアイコン画像(「icons-18-black.png」「icons-18-white.png」)は、
1枚の画像の中に全部のアイコンが入ってますので、使いたい画像のところ(位置)を表示させるように
background-position部分で調整します。

 

一応その他のボタンアイコンの指定クラス、ポジションは下記の通りです。
ボタンアイコンについてはこちらもご確認ください。


						/*---jQueryMobile1.2.0用---*/

						.ui-icon-plus {
							background-position: 	-0 50%;
						}
						.ui-icon-minus {
							background-position: 	-36px 50%;
						}
						.ui-icon-delete {
							background-position: 	-72px 50%;
						}
						.ui-icon-arrow-r {
							background-position: 	-108px 50%;
						}
						.ui-icon-arrow-l {
							background-position: 	-144px 50%;
						}
						.ui-icon-arrow-u {
							background-position: 	-180px 50%;
						}
						.ui-icon-arrow-d {
							background-position: 	-216px 50%;
						}
						.ui-icon-check {
							background-position: 	-252px 50%;
						}
						.ui-icon-gear {
							background-position: 	-288px 50%;
						}
						.ui-icon-refresh {
							background-position: 	-324px 50%;
						}
						.ui-icon-forward {
							background-position: 	-360px 50%;
						}
						.ui-icon-back {
							background-position: 	-396px 50%;
						}
						.ui-icon-grid {
							background-position: 	-432px 50%;
						}
						.ui-icon-star {
							background-position: 	-468px 50%;
						}
						.ui-icon-alert {
							background-position: 	-504px 50%;
						}
						.ui-icon-info {
							background-position: 	-540px 50%;
						}
						.ui-icon-home {
							background-position: 	-576px 50%;
						}
						.ui-icon-search,
						.ui-icon-searchfield:after {
							background-position: 	-612px 50%;
						}
						.ui-icon-checkbox-off {
							background-position: 	-684px 50%;
						}
						.ui-icon-checkbox-on {
							background-position: 	-648px 50%;
						}
						.ui-icon-radio-off {
							background-position: 	-756px 50%;
						}
						.ui-icon-radio-on {
							background-position: 	-720px 50%;
						}
					

(3)リストビュー サムネイル画像、見出し・説明文エリアについて

  • サムネイル:「.ui-li-thumb」
  • 見出し・説明文エリア:「.ui-li-has-thumb .ui-btn-inner a.ui-link-inherit」
  • 見出し:「.ui-li-heading」
  • 説明文:「.ui-li-desc」

それぞれ上記のクラスが指定されているので、この部分の内容を上書きすることでデザイン変更できます。

custom.cssでは「サムネイル:画像が幅60px縦60pxになるように調整(デフォルトは80×80px)、内側余白調整」
「見出し・説明文エリア:左側余白とリスト1個分の最小高さ調整」「見出し:フォントサイズ調整」
「説明文:文字色を変更」にしてみました。


このCSSを適用させたものが画像4、5、6になります。
CSSの内容を変えたりして自分好みのデザインを作ってみてください。
またjQueryMobile用CSS(jquery.mobile-バージョン.css)の中を見ると
指定クラス、その内容などが書いてありますので、それみながら調整したり変えた方がいいかもです。