jQuery Mobile オリジナルアイコンを組み込む

公開日：2014年10月29日
最終更新日：2014年11月9日

jQuery Mobile にはデフォルトのアイコンセットが用意されていますが、自分のサイトに適したものがない場合もあります。自分で作成したオリジナルアイコンを組み込み、デフォルトアイコンと同じように扱えるようにしてみます。

«次の特集記事» jQuery Mobile デフォルトアイコンを拡張する
«前の特集記事» jQuery Mobile ThemeRollerでカスタムテーマを作成する

jQuery Mobile 特集記事一覧

【コンテンツ】

オリジナルアイコンの作成
CSSの作成
HTMLの記述

【記事執筆時の環境】
jQuery Mobile 1.4.4/1.4.5

オリジナルアイコンの作成

自分が使い慣れた画像編集ソフトでアイコンを作成します。
私は Photoshop か illustrator をいつも使います。今回は illustrator で以下のようなアイコンを作成してみました。

RSSアイコン

　カートアイコン

アイコン色

デフォルトでは白がメイン、黒が alternativeで、２色のアイコンを用意しています。
別にどんな色でも良いのですが、背景に自動でつく影との兼ね合いもありますで、
白(#ffffff)と黒(#000000)の２つ作成します。

サイズ

アイコンサイズは 14 x 14pxです。CSSで調整すれば違うサイズで作成しても構いませんが、デフォルトアイコンと合わせておいたほうが良いでしょう。

ファイル形式

バージョン 1.4 ではアイコンファイルの形式は SVGをメインとしており、フォールバックで PNGにアクセスするようになっています。従ってファイルは SVG と PNG の２種類用意します。

ファイル名

SVGファイルは、「[アイコン名]-white.svg」と「[アイコン名]-black.svg」です。
PNGファイルは、「[アイコン名]-white.png」と「[アイコン名]-black.png」です。

CSSでファイル名を指定しますので、上記書式にしなくても既存のものとかぶらなければ動作しますが、ここではデフォルトアイコンに合わせておきます。

ファイルの格納先

作成したアイコンファイルは以下のディレクトリに格納します。
SVG：css/images/icons-svg
PNG：css/images/icons-png

CSSの作成

デフォルトのCSSを編集することもできますが、デフォルトファイルは Minified版をそのまま読み込むようにしておき、カスタマイズ部分は圧縮しない別ファイルとしておいたほうがよいでしょう。

したがってここでもオリジナルアイコン部分を記述する別ファイルを用意します。
仮に「my-icon.css」とでもしておきます。

CSSには以下のように記述します。

/* SVG icons */
.ui-icon-cart:after {
	background-image: url(images/icons-svg/cart-white.svg);
}
/* SVG Alt icons */
.ui-alt-icon.ui-icon-cart:after,
.ui-alt-icon .ui-icon-cart:after {
	background-image: url(images/icons-svg/cart-black.svg);
}
/* PNG icons */
.ui-nosvg .ui-icon-cart:after {
	background-image: url(images/icons-png/cart-white.png);
}
/* PNG Alt icons */
.ui-nosvg .ui-alt-icon.ui-icon-cart:after,
.ui-nosvg .ui-alt-icon .ui-icon-cart:after {
	background-image: url(images/icons-png/cart-black.png);
}

/* SVG icons */

.ui-icon-cart:after {

}

/* SVG Alt icons */

.ui-alt-icon.ui-icon-cart:after,

.ui-alt-icon .ui-icon-cart:after {

}

/* PNG icons */

.ui-nosvg .ui-icon-cart:after {

}

/* PNG Alt icons */

.ui-nosvg .ui-alt-icon.ui-icon-cart:after,

.ui-nosvg .ui-alt-icon .ui-icon-cart:after {

}

なおデフォルトのSVGアイコンは、data URI を使い CSSに画像の埋め込みがされています。
data URI は HTTPリクエストが発生しないというメリットはありますが、変換の手間やファイルサイズの増大、CSSの可読性の悪さなどを考慮しここでは SVGファイルをそのまま用いることにします。
data URI を使うのであれば、background-imageプロパティの urlにコードを記述します。

HTMLの記述

デフォルトの CSS読み込みコードの下に、オリジナルアイコン部分を記述した CSSファイルを読み込むコードを追加します。

<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
<link rel="stylesheet" href="css/my-icon.css">

1 2	<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css"> <link rel="stylesheet" href="css/my-icon.css">

これで jQuery Mobile の記述ルールに沿ってオリジナルアイコンを表示できます。
「data-icon="アイコン名"」あるいは ui-icon-[アイコン名]クラスでアイコンの種類を指定できます。黒のアイコンは ui-alt-iconクラスを付加します。

今回作成したオリジナルアイコンを表示した DEMOページは以下になります。

DEMOページへ »

アイコンは操作性やオリジナリティを上げるポイントとなり Webサイトの印象にも影響しますので、パッと見てメニューやリンク内容にマッチしたものを選定しましょう。ユーザーの理解を手助けすればいいのであり、凝ったアイコンを使用する必要はありません。ときどき何を表しているのかさっぱりわからないものもあります。

«次の特集記事» jQuery Mobile デフォルトアイコンを拡張する
«前の特集記事» jQuery Mobile ThemeRollerでカスタムテーマを作成する

jQuery Mobile 特集記事一覧