iPhone用ウェブクリップアイコンの作り方

なんとなく、最近クリエイティブ活動したい気持ちもしたりして、まずは小さなところから。(^o^;
iPhoneやiPod Touchのブラウザ Safariには、普通にブラウザでブックマークする以外に、ウェブクリップという機能がありまして、クリップするとホーム画面(アイコンがたくさん並んでる画面)にウェブサイトへのショートカットを置くことができます。
ブラウザを立ち上げてブックマークを開いて・・・という手間を省略してホームから一気にサイトへ飛べる(Safariで開いてくれる)ので、よく行くサイトをクリップしておくと非常に便利♪
で、クリップすると、サイトのキャプチャからアイコンが作られるのですが、任意にiPhoneアプリのようなアイコンを作って設置しておくこともできます。
今日はそれを作ってみたので、作り方をメモめも。


作り方は至って簡単!
普通のPCブラウザで言うところのfavicon(ブラウザのアドレスバーに表示されるアイコン)より簡単♪
ただし、PNG形式のファイルを書き出せるグラフィックソフトが必要(フリーソフトでできるだろうけど)。私は一応IT業界人(w)としてPhotoshopを使っているのでPhotoshopで作りました。
(1)
縦横57×57ピクセルサイズのキャンパスにロゴとか置いてアイコンを作ります。
この際、既存iPhoneにあるように角を丸くしたり、影を付ける必要はありません。テカりも付けなくて良いです。
57x57pxサイズの四角いのっぺり画像を作成するだけ。
これがらくちん♪
(2)
作った画像を
apple-touch-icon.png
というファイル名で保存。
(3)
FTPソフト等を使って(2)の画像をサーバへアップ。
サイトのトップページ(index.html等)と同階層に置く。
これだけです!v(^o^
画像を他の階層に置きたい場合は、HTMLのhead内に下記のように所在を明示すれば大丈夫なようです(未確認)。 いろいろサイトを読んでみると、(たぶんサーバの設定の問題なんだろうけど)画像をアップするだけだとダメな場合があるみたい。
その場合は上記HTMLタグを書けば良いそうです。
先日iPhone用サイトも作ったし、これでバッチリ!?
いじってたら、そろそろサイトのデザインも変えたくなってきたなぁ。。
横幅をもう少し広くして、今度は白っぽくしようかな。
考えよ〜っと♪

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です