iPhone用WebClipの導入の仕方

iPhoneのホーム画面に自分のサイトやブログのアイコンをつける。
これはカンタンに出来ます。

私も自分のブログのアイコンを作ってホーム画面に入れてみました。

作ったアイコンはコレ。





iPhoneのホームに設定するとこんな↓感じです。




















分かります？７つ目のヤツですね。

具体的なやり方は
「No Mobile,No Life」を参考にしました。

【記事抜粋】
1)Photoshopなどでスクウェアなアイコンを作成
2)アイコンサイズを57×57にリサイズし、apple-touch-icon.pngというファイル名で保存
3)作成したアイコンをサーバにアップロード
4)indexページにアイコンを設置

これで完了です。Seesaaで設置を行うには、ファイルマネージャでアイコンをアップロードし、ファイルのURLをHTML編集を使ってheadのすぐ下に下記１文を加えます。『＞』は半角。
＜link rel="apple-touch-icon" href="http://ホスト名.up.seesaa.net/image/apple-touch-icon.png"＞

このブログの場合はこうなります。
＜link rel="apple-touch-icon" href="http://nokias60.up.seesaa.net/image/apple-touch-icon.png"＞

あとは再構築を行えば完成。

アイコンをiPhoneのHOME画面に表示させるにはSafariでページを開き＋マークを押してAdd to Home Screenとするだけです。

＝＝＝＝＝＝＝＝＝

サイトにアイコンを設定したあとSafariでサイトを見て「＋」ボタンを押すと




















↑こうなりますので、あとは「ホーム画面に追加」を押すだけ！

やってみるとカンタンでしたよ！
自分のサイトのアイコンがiPhoneのホーム画面に出てくると・・・・


テンション上がります。


ぜひ自分のサイトを設定してみましょう！

【参照元：No Mobile,No Life 「iPhone用にWebClipを導入してみた」】