ホーム画面に追加

ホーム画面に追加

iPhone 3G、iPod touchのSafariで、ページを開いてる時に「」ボタンを押して、ブックマークを追加ホームアイコンが表示され、ホームアイコンを選択した時に、トップ画面上にアイコン形式で登録させるためのアイコンを「Webクリップブックマークアイコン」と呼びます。

これは、iPhone Human Interface Guidelinesに沿った形で、アップルの「Webクリップブックマークアイコンを作成する」に説明があります。


Webクリップブックマークアイコン

Webクリップブックマークアイコン

設定は簡単で、webサイトのルートディレクトリにapple-touch-icon.pngと名付けたPNG画像を配置するだけです。後は、iPhone 3G、iPod touchが自動的に拾ってくれます。

ブログで、テンプレートが反映されてしまい、うまく表示されない場合は、それぞれのテンプレートのindexに対して、 <head>エレメントの中に<link rel="apple-touch-icon" href="/XXX.png"/>の様に<link>エレメントを入れて下さい。(/XXX.png はアイコンを置いたパス情報を記述)

また、この記述を使う事で、ページ単位でアイコンを切り替える事もできます。

ブックマークアイコンのサイズは、57x57ピクセルで表示されますので、元データのサイズを57x57ピクセルにすることをアップルは推奨していますが、このサイズに納めなければダメというわけではありません。

実際、Appleや、Y!SoftBankは129x129ピクセルのアイコンを使って、それを縮尺表示させることで、高品質なアイコンを表示させています。

反射と角丸は自動的に処理されるので、アイコンデータに予め加工を施す必要はありませんが、アップルのホームアイコンを登録するとわかりますが、アイコン上部の1ピクセルが白く飛んでしまいますので、上1ピクセルは、黒く塗りつぶしておくと良いと思います。


PR

Category

Calendar

          1 2
3 4 5 6 7 8 9
10 11 12 13 14 15 16
17 18 19 20 21 22 23
24 25 26 27 28 29 30

PR

Profile

danbo

MACお宝鑑定団

会長

danbo

日本語でのMac,iPhone,iPad,iPod,TwitterなどApple関連の情報サイト。MACお宝鑑定団のBlog。Macに捉われず、様々な情報を掲載しています。

問い合わせ先
広告出稿について
カンパ・チップ のお願い
プライバシーポリシー

Link

RSSを取得する