ブログ カスタマイズシリーズ第三弾！
いつのまにか勝手にシリーズ化 (笑)

今回は、iPhoneの safariで 「ホーム画面に追加」 と
したときに表示されるアイコンの設定をやってみました。
過去の
1. 「画像編集ソフト」 は、こちら。
2. 「faviconを設定してみた」 は、こちら。

画像ファイルを用意します。

(1) 用意する画像は、png形式です。

(2) サイズは iPhoneの世代や、iPadなどにより異なるみたいです。
　調べてみると、57 x 57px、72 x 72px、114 x 114px、144 x 144px があるようです。
　ま、仕事で 「全機種に対応させなきゃダメ」 ということなら別ですが
　あくまで趣味なの、適当で良いかと (^^;;

(3) ファイル名は、apple-touch-icon.png という名称にして保存しました。

私は前回 faviconを作成するときに使用した gifファイルを
画像変換するソフトを使用し、114x114px にリサイズし、pngとして保存しましたが
我が家の初代 iPad でもちゃんと表示されました。





ナチュブロへ、pngファイルをアップロードします。





前回と同様、 [記事投稿] を使用して、アップロードした画像を貼り付けます。
すると、↓こんな風に貼り付けられますよね。
<img src="http://xxxxx.naturum.ne.jp/usr/[user名]/apple-touch-icon.png" alt="" >

この画像の URLを使用して、以下のように 1文を作成します。
<link rel="apple-touch-icon" href="http://xxxxx.naturum.ne.jp/usr/[user名]/apple-touch-icon.png" type="image/png" />

作成したら、この 1文をコピーしておいてください。


ちなみに、「rel」属性の値ですが
”apple-touch-icon”は角丸の光沢処理あり
”apple-touch-icon-precomposed”は角丸の光沢処理なしで、そのままの画像で表示されるようです。

詳しく知りたい方は、apple-touch-icon で検索してみてください。





[テンプレート] から、使用中テンプレートの [ カスタマイズ] へ進み
そのうちの、トップページ、個別記事、アーカイブ に対して
先ほどコピーした 1文を挿入します。

挿入する箇所は、 ～ の間なら、どこでも構いません。
<link rel=" ～～～ というのが 何行か続いている箇所があると思うので
そのあたりで OKです。

トップページ、個別記事、アーカイブ へ、同じように挿入したら、[登録] します。



設定は以上です。
確認してみましょう。







safariで 「ホーム画面に追加」 を実行します。


ホーム画面に戻ると、追加されていました♪




しょうもない内容にお付き合いいただき、ありがとうございました m(_ _)m
あくまでも自己満なものですので (^^;;
興味があれば試してみてください

※コメントは質問のある方のみで m(_ _)m
　もしくは、ど～しても一言書きたいと言うならば・・・ （笑）