iPod Touch (iPhone)のホーム画面用アイコンを作成する

 ぼくのブログと掲示板はスマートフォン(iPhone、iPod Touch、Androidなど)にも対応しているので、ぜひスマホでもチェックしてみてください☆

 iPod Touchからこのブログにアクセスすると、以下のような画面がロードされます。小さな画面でも文字が読みやすいように最適化されて表示されます。

 PC用のホームページをスマートフォンに対応させるのって大変かな?と思ってましたが、jQuery Mobileというライブラリを使うとそれほど時間をかけずに作成することができました。

 こちらを参照。

★★★

 iPod touchにWebclipという機能があります。これはiPod Touchのホーム画面上にWebサイトのショートカットを置けるというものです。

 このショートカットのアイコンですが、特に何も設定していない場合には、ブログ画面のスクリーンショットが使われてしまいます。これだと見た目がイマイチなので、自分でアイコンを作り、それを表示することができないのだろうかとやり方を調べてみました。

 やり方は実はとても簡単で、自分で作ったアイコンをサーバにアップロードして、HTMLファイルのbody内に以下のような指定をしてあげると、アイコンが無事にホーム画面に表示されるようになります。

 拡張子を見るとわかりますが、アイコンはpngファイルにする必要があります。

 画像のサイズですが、iPhone 4では114px×114px、iPadでは72px×72pxだそうです。これらより少し大きめのサイズ(ぼくは256px×256pxにしました)の画像を作ってアップします。

 ぼくが実際に作成してアップロードしたpngファイルは以下のような画像です。PowerPointで適当なサイズの画像を作った後、Photoshop Elementsでサイズを変更して、png形式にして保存しました。

 角丸やリサイズ、光沢をつけたりといった処理は、iPod Touchの方で自動的に行なってくれます。さすがAppleですね。

スポンサーリンク
レクタングル(大)広告
レクタングル(大)広告

シェアする

フォローする

スポンサーリンク
レクタングル(大)広告