先日ついにiPhone4に乗り換えたこともあり（遅）、
やっとiOSの最新版を使い始めました。
この雑感はまた今度まとめるとしますが、
Webクリップアイコンについて
iOS4.2以降でiPhoneやiPadのデバイス解像度別に
指定することができるようになっていました。
因みに、Webclipアイコンとは、
iPhoneのSafariに用意されている、
ホーム画面にアイコンを追加できる機能です。
アイコンを設定しないと、開いているページのキャプチャが
アイコン代わりに設置されます。
端末別のアイコンサイズは下記の通りです。
・iPhone 3G：57×57ピクセル
・iPhone 4：114×114ピクセル
・iPad：72×72ピクセル
上記をPNG形式で作成します。
因みに、それぞれのデバイスに合わせる必要がなく、
アイコンを1種類しか作成しない場合は
144×144ピクセルが最もおススメですよ。
大きめに作っていても、ちゃんと自動的にリサイズされます。
※尚、アップルのサイトのWebクリップアイコンは、
129×129ピクセルでした。
Webクリップアイコンの設置方法 1
アイコンを指定するには、linkタグで指定する方法と、
特定のファイル名で保存する方法の2種類があります。
■アイコン画像をlinkタグで指定
全てのデバイス共通のアイコンを指定するには、
HTMLのheadタグ内に下記を追記します。
<link rel="apple-touch-icon" href="apple-touch-icon.png" />
さらに、デバイス別にアイコンを変更するには、
「sizes」属性でサイズを指定します。iPhone 4（Retinaディスプレイ）の記入例は
下記の通りです。
<link rel="apple-touch-icon" sizes="114x114" href="apple-touch-icon-114x114.png" />
従って、3種類のサイズのアイコンを指定する場合は、次のようなコードになります。
<link rel="apple-touch-icon" href="apple-touch-icon.png" />
<!--=====iPhone 3G用Webクリップアイコン サイズ指定=====-->
<link rel="apple-touch-icon" sizes="57x57" href="apple-touch-icon-57x57.png" />
<!--=====iPad用Webクリップアイコン サイズ指定=====-->
<link rel="apple-touch-icon" sizes="72x72" href="apple-touch-icon-72x72.png" />
<!--=====iPhone 4用Webクリップアイコン サイズ指定=====-->
<link rel="apple-touch-icon" sizes="114x114" href="apple-touch-icon-114x114.png" />
Webクリップアイコンから光沢処理を削除するには
因みに、Webクリップアイコンを作ると、上半分が光っているような処理が
自動的にかかります。
これを削除する場合は、
上記ソースの「rel」属性の値を「apple-touch-icon」にすると「光沢処理あり」、
「apple-touch-icon-precomposed」にすると「光沢処理なし」になります。
■例
<!--=====iPhone 4用Webクリップアイコン サイズ指定 光沢処理無し=====-->
<link rel="apple-touch-icon-precomposed" sizes="114x114" href="apple-touch-icon-114x114.png" />
Webクリップアイコンの設置方法 2
■アイコン画像を特定のファイル名で保存する
全てのデバイス共通で、1つのアイコンを指定するには、
アイコン画像を「apple-touch-icon.png」というファイル名で、
Webサーバーのルートディレクトリに保存します。
http://サイト名/apple-touch-icon.png
という感じです。
デバイス別のサイズ違いアイコンは、
「apple-touch-icon」の後ろにサイズを記したファイル名にします。
・iPhone 3G：apple-touch-icon-57x57.png
・iPad：apple-touch-icon-72x72.png
・iPhone 4：apple-touch-icon-114x114.png
因みにこちらの方法で、光沢処理を削除するには、
ファイル名の末尾に「-precomposed」を付けます。
|
