2011年4月20日水曜日

iPhoneでのホーム画面用アイコン

iPhoneなどのiOS端末では、ブックマークをホーム画面に追加するとアイコンとして表示することができます。
通常はWEBページの縮小アイコンになるんですが、ルートディレクトリに"apple-touch-icon.png"という名前のpngファイルを格納すれば独自のアイコンに出来ます。


ただし、bloggerでは当然のようにルートにファイルなんぞ置けません。
ちょっと調べてみると以下の方法で実現できました。

1) 画像の準備
  apple-touch-icon.pngの名前のpngファイルを用意しておく<補足参照>
2) 適当なサーバにアップする
  僕はDropBoxのpublicフォルダに上げてみました
3) bloggerのhtmlを以下のように編集
 - [デザイン]、[HTMLの編集]を選択
 - <head>タグ内に以下のように追加
   例)
    <head>
     <link href='http://アップしたパス/apple-touch-icon.png' rel='apple-touch-icon'/>
 4) iPhoneなどでホーム画面にブックマークを追加

<補足>
pngファイルのサイズは割と適当なサイズでいけそうですが、色んなiOS端末で綺麗に見えるようにしようとすると、114x114dotあたりが良いようです。
# 114dotがオススメな根拠
  3GS以前のアイコンサイズ :57x57dot
  iPhone4のアイコンサイズ :114x114dot
  iPadのアイコンサイズ    :72x72dot
# 本当はサイズも指定して複数のファイルを用意することも出来るようですが、自動で縮小してくれるので114dotのみでも問題なさそうです。

0 件のコメント:

コメントを投稿