Webクリップとは
iPhoneのウェブブラウザ「Safari」のブックマーク機能のひとつで、ホーム画面にウェブサイトへのショートカットを置くことができます。これをタップすると、Webページやページ内の特定部分に素早くアクセスすることができます。
iPhoneでWebクリップを作成すると、通常は表示中のページを縮小した画像がボタンとして作成されますが、Webクリップ機能に対応したアイコンを設置しているサイトの場合は、そのアイコンがホーム画面に登録されます。
アイコン画像の作成
１：57 x 57 pixelで画像を作成します。
２：画像はPNG形式で保存します。
iPhone上でアイコンへの変換時に、ハイライト、テカリ、シャドウが自動的に入ります。角も丸く削られ、統一されたボタンのデザインにされます。
注意点として、一番上の1pixelの列は、自動的にハイライトが入り、完全に白く飛んでしまいます。そのため、枠のあるデザインだと上辺が細く見えてしまう場合があります。
KURASHINO＊KOBOでは上のようなアイコンを作成しました。
画像をアップロード
HPのお勧め方法
サーバのroot（ルート）ディレクトリ（一番上のindex.htmlなどと同じ階層）に、ファイル名を「apple-touch-icon.png」としてアップロードします。
それ意外にやる事はありません。画像が存在していれば、iPhoneが自動的に認識してアイコンを生成します。
サイト全体で、同じWebクリップアイコンが適用されます。
Blogのお勧め方法
HTMLの<head>をカスタマイズできれば、Webクリップを設置できます。
画像をアップロード後、ウェブページの<head>～</head>内に、<link rel="apple-touch-icon" href="任意の名前.png"/>の一行を追加します。
画像の場所、名前は任意に設定できます。また、場所を相対パスで指定するなら「images/xxxxx.png」絶対パスで指定するなら「http://www.～」と書きます。
記述してあるページにのみ、Webクリップアイコンが使われます。ですから一つのドメインの中で、コーナー毎にアイコンを使い分けられます。
iPhoneで登録
１：Safariで、任意のWebサイトを開く
２：画面下の「＋」ボタンをタップ
３：「ホーム画面に追加」をタップ
うまくいっていれば、製作したアイコン画像が表示されます。簡単に出来ますので是非お試しください。
おまけ（サイト幅の指定）
iPhoneでWebサイトを開くと、自動的に980px幅のサイトとして最適な拡大率に調整表示されますが、980pxよりも幅の狭いサイトは縮小されてしまいます。Bindの標準幅は825pxなので、両脇に黒い帯が表示されてしまいます。
そこで、<meta name="viewport" content="width=825" />を「ページ設定」の「スクリプト入力」に入力すれば、余白が無く表示されます。表示後にダブルタップやピンチ操作で、拡大率を変更することも可能です。
全ページに入力しなければならないので、ページ数の多い方は大変かもしれません。