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

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

«次の特集記事»
«前の特集記事»

【コンテンツ】

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

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

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

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

RSSアイコン

 カートアイコン

アイコン色

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

サイズ

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

ファイル形式

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

ファイル名

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

HTMLの記述

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

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

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

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

«次の特集記事»
«前の特集記事»

スポンサーリンク

jQuery Mobile 特集記事

基本的な使い方

ウィジェットの設置

フォームの設置

イベント・動作設定

カスタマイズ

使い方の応用

スポンサーリンク

ページの先頭へ