画像ファイルを用意します。
(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
もしくは、ど～しても一言書きたいと言うならば・・・ （笑）
あなたにおススメの記事