+RECOMMEND
+RECOMMEND
+Ad
+OTHERS

無料ブログ作成サービス JUGEM

paperboy&co.
RSS 1.0
ATOM  0.3
<< April 2018 | 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 >>
<< 無料で使えるオールインワンコンテンツ制作アプリケーション Adobe Project ROME | main | フリー写真素材サイト「足成」 >>
iPad iPhoneでサイトをホーム画面に登録する方法と、そのアイコンの作り方。


まわりのiPhone、iPadユーザーにあまり知ってる人がいないのでエントリーしてみます。
タイトル通り、閲覧しているサイトのショートカットをホーム画面に登録する方法です。

そのあとのアイコンの作り方は、サイト運営側のお話になります。



野沢 直樹,村上 弘子
ソーテック社
¥ 1,995
(2010-06-19)

まず、サイトのホーム画面への登録のしかた。
これはとても簡単です。



ステップ1 
登録したいサイトを閲覧します。



ステップ2 そのまま、ブラウザ下部の+ボタンをクリック



ステップ3 クリックすると、
・ブックマークに追加
・ホーム画面に追加
・リンクをメールで送信 の3項目が表示されます。
ここで、ホーム画面に追加を選択するだけ。 簡単ですね。
この時サイト名の変更ができますので、必要な場合は変更しましょう。



無事ホームに追加されました。




さて、次はアイコンの作り方です。
よくPCブラウザでブックマークした場合、ファビコンがサイト名の頭に表示されます。
あれのiPhone、iPad版みたいなものです。


まずは画像を準備します。ここでポイントは、わざわざ角丸の画像を用意する必要がないこと。
角丸処理はiPhone、iPad側で行ってくれるので正方形の画像でOKです。逆にいえば、角丸で削られることを想定してデザインすると良いと想います。
画像のサイズ、書き出し形式は次のとおりです。

  • 画像形式  PNG形式
  • 画像サイズ 57pixel×57pixelまたは129pixel×129pixel
解説画像で使用したものはこんな感じです。
今回は57pixelで制作しています。



制作した画像は任意のディレクトリに格納します。

つぎにタグの記述です。内に次のタグを記述します。

<link rel="apple-touch-icon" href="画像までのパス.png">

画像までのパスの部分に先程制作したpng画像までのパスを入力します。これで設定はOKです。ファビコンとは別扱いになるので、ファビコンが必要な場合はファビコン用のタグを設定してください。

いかがでしょうか。正直どれくらいサイトをホームに設定しているユーザーがいるかわかりませんが、ちょっとしたところにこだわるのも悪くない気がします。
| iPhone/iPad | 21:13 | comments(0) | trackbacks(0) | - | - |はてなブックマーク -  iPad iPhoneでサイトをホーム画面に登録する方法と、そのアイコンの作り方。 | このエントリーをはてなブックマークに追加









http://blog.tug.lomo.jp/trackback/990232