United Unlimited - ユナイテッド アンリミテッド -

iPhone & iPad

周辺機器

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

twitter
RSS

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

2009年 03月 30日(月曜日) 23:59, posted by Ren

なんとなく、最近クリエイティブ活動したい気持ちもしたりして、まずは小さなところから。(^o^;

iPhoneやiPod Touchのブラウザ Safariには、普通にブラウザでブックマークする以外に、ウェブクリップという機能がありまして、クリップするとホーム画面(アイコンがたくさん並んでる画面)にウェブサイトへのショートカットを置くことができます。

ブラウザを立ち上げてブックマークを開いて・・・という手間を省略してホームから一気にサイトへ飛べる(Safariで開いてくれる)ので、よく行くサイトをクリップしておくと非常に便利♪

で、クリップすると、サイトのキャプチャからアイコンが作られるのですが、任意にiPhoneアプリのようなアイコンを作って設置しておくこともできます。

今日はそれを作ってみたので、作り方をメモめも。

作り方は至って簡単!
普通のPCブラウザで言うところのfavicon(ブラウザのアドレスバーに表示されるアイコン)より簡単♪

ただし、PNG形式のファイルを書き出せるグラフィックソフトが必要(フリーソフトでできるだろうけど)。私は一応IT業界人(w)としてPhotoshopを使っているのでPhotoshopで作りました。

(1)
縦横57x57ピクセルサイズのキャンパスにロゴとか置いてアイコンを作ります。

この際、既存iPhoneにあるように角を丸くしたり、影を付ける必要はありません。テカりも付けなくて良いです。
57x57pxサイズの四角いのっぺり画像を作成するだけ。
これがらくちん♪

(2)
作った画像を
apple-touch-icon.png
というファイル名で保存。

(3)
FTPソフト等を使って(2)の画像をサーバへアップ。
サイトのトップページ(index.html等)と同階層に置く。

これだけです!v(^o^

画像を他の階層に置きたい場合は、HTMLのhead内に下記のように所在を明示すれば大丈夫なようです(未確認)。

いろいろサイトを読んでみると、(たぶんサーバの設定の問題なんだろうけど)画像をアップするだけだとダメな場合があるみたい。
その場合は上記HTMLタグを書けば良いそうです。


先日iPhone用サイトも作ったし、これでバッチリ!?

いじってたら、そろそろサイトのデザインも変えたくなってきたなぁ。。
横幅をもう少し広くして、今度は白っぽくしようかな。
考えよ〜っと♪

トラックバック

http://unitedunlimited.net/mt/mt-tb.cgi/1224

コメント

サブカテゴリー
最近のコメント
月間アーカイブ
2018年4月
Sun Mon Tue Wed Thu Fri Sat
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
Profile : sacocha
ウェブ業界で17年程、起業12年目のWebディレクターです。
Apple製品好き。ガジェット好き。

MacやiPhoneに関する情報、気になるITニュースなどを紹介しています。

■愛用品♪
iMac 27inch (2017)
MacBook Pro (2013)
Apple iPhone
Apple iPad
Apple Watch
Xperia XZ Premium
OLYMPUS OM-D E-M5

■他サイト
⇒さこ茶屋
気まぐれに撮ったご飯写真。(^o^

Follow me on Twitter
twitter

iPhone用 United Unlimited.
ケータイ用 United Unlimited.
タグクラウド
ページの先頭へ戻る