方法は、まず57×57ピクセル（以上でも可っぽい）の画像を作成します。その際にiPhone風に画像を加工する必要はありません。Webクリップとして登録する際に、iPhone/iPod touchが自動的に加工してくれるので、あらかじめiPhone風に加工しておくと、かえって仕上がりが汚くなります。
そして、その画像をPNG形式で保存します。ファイル名は、特別な事情がない限り「apple-touch-icon.png」としておいた方が無難です。
アイコン画像が用意できたら、ウェブサーバーへアップロードします。ルートディレクトリに置いて（/apple-touch-icon.png）おけば、「ホーム画面に追加」する際に、iPhone/iPod touchがアイコン画像を自動的に見つけてくれます。
しかし、このブログがお世話になっているBloggerでは、ルートへアップロードできないので、そういう場合はHTMLのヘッダにlinkタグを追加します。
まず、空のブログ記事を作成し、その編集画面から作成したアイコン画像をアップロードします。すると本文記入エリアにHTMLコードが挿入されるので、その記事は下書きとして保存しておきます。
そして、BloggerのテンプレートHTMLの編集画面を開き、<head>〜</head>の間に、「<link rel="apple-touch-icon" href="アップロードした画像ファイルのURL（img src）" />」と記入します。あとは編集したテンプレートを保存すれば完了です。これで、iPhone/iPod touchでブログのブックマークを「ホーム画面に追加」すると、アップロードしたアイコン画像がiPhone風になって、ホーム画面に並びます。
さらに詳しい情報は、アップルのWeb Apps Dev Center（要登録）をご覧ください。
0 件のコメント:
コメントを投稿