アクセス数: | 今日: | 昨日:   記事数:996

HOMESITE MAPBOOKMARKTAG CLOUD

【iPhone】ホーム画面に追加した時のアイコンを作成する方法

『【iPhone】ホーム画面に追加した時のアイコンを作成する方法』をはてなブックマーク

iPhoneiPhoneのSafariでWEBサイトを見て、Safariの中のブックマークに入れれるのは当然の事ですが、ホーム画面にも他のアプリに並べてアイコンを置く事が出来ます。
通常であればサイトのスクリーンショットがアイコンとして追加されるんですが、ファビコンのように任意でアイコン画像を追加出来るようです。

画像をアップして、HTMLの<head>内に一行追加するだけで簡単に出来ます。
画像は57×57(ピクセル)が望ましいようです。
角丸や光沢は自動にやってくれるので、自分は真四角に画像を作ればよいだけです。

後は、HTML内にコードを書くだけです。

<html>
<head>
<link rel="apple-touch-icon" href="画像のアドレス">
</head>
<body>
~~~
</body>
</html>
ちなみに、『jpg』、『png』のどちらでもいけました。
ファイル名も任意のようです。

画像とHTMLファイルをアップロードしたら、iPhoneでサイトを表示します。
ブックマークボタンをタップして、『ホーム画面に追加』をタップします。
iPhone

名前を入力して、『追加』をタップ。
この時点で既にアイコン化されています。
iPhone

すると、ホーム画面に見事アイコン化されて置かれています。
左のアイコンは、画像を指定していなかった場合のスクリーンショットされたアイコンです。
iPhone

『MyWebClip』等にも、ちゃんとアイコン化されます。
iPhone


SourceForge.JP Magazine
iPhone対応Webサイト構築入門(前編)
iPhone対応Webサイト構築入門(後編)

Trackback URL

リンク先が18禁サイトの場合は削除しています。
当ブログにリンクが貼られていない場合は削除しています。

コメントを書く

必須です。

必須です。(公開されません)
GRAVATARに登録していると、アイコンが表示されます。

リンク先が18禁サイトの場合は削除しています。

以下のタグが利用出来ます。
<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Additional comments powered by BackType