ウェブクリップ

iPhoneでは、ホーム画面にウェブクリップを置いて、すばらくサイトにアクセスすることができます。私の場合は、2番目のホーム画面をウェブクリップ専用にしてしまいました。

iPhoneに対応したサイトでは、ウェブクリップ用のアイコンも用意されているところがあります。そこで、自分のブログ用のアイコンを作ろうと思いました。

参考にさせていただいたのは、Modern Syntaxさんの「iPhoneとiPod TouchのWebclipのアイコンの作り方」という記事です。
また、アイコンの元ネタは、jotlet blogの「iPhone style icon psd kit」という記事に掲載されている、Photoshopのテンプレートを使わせてもらいました。 

このように、複数のレイヤーから構成されており、必要に応じてレイヤーの表示を切り替えることで、いろんなパターンのアイコンが作れるようになっています。 

• まずバックグラウンドを黒にして、矢印のアイコンを非表示にします。
• その上にJ'sというテキストを入れ、ドロップシャドウをかけてできあがりです。
• できあがったアイコンを、57*57ピクセルで切り抜いたものを、apple-touch-icon.pngというファイル名で、サイトのルートにアップすれば準備OKです。

iPhoneでJ's Garageを表示させて、画面下の+アイコンをクリック。

• ホーム画面に追加をクリック。
• サイト名を適当に短く編集し、追加をクリック。

これでできあがりです。