スマホに最適化しているなら、出来れば対応しておきたいapple-touch-iconの設定方法です。
apple-touch-iconとは、iPhoneの画面に表示されているアイコンのことです。
これ ↓↓↓ のことです。
このアップルタッチアイコンは、ブログやサイトなどで設定しておけば、誰でも表示させることができるようになります。このブログも、最近ではスマホでも良く見られるようになってきましたので、きちんと設定しておこうと思い、作業しました。
apple-touch-icon設定手順
1. まずはアイコンを準備
アイコンはRetina対応機種のことを考えて、大きさを114×114ピクセルで作成。
ファイル形式はPNGにします。
ファイル名は style-logo_aptouch.png としました。
上のアイコンはこのブログのロゴである吹き出しのカタチのままで作成しました。
こういう丸いアイコンをアップしたらどうなるのか….という実験込みでやりましたので、あなたは四角いアイコンで作成してください。
2. サーバへアップロード
アイコンが出来上がったら、サーバの一番上の階層にアップロードします。トップページがあるところにアップロードです。
3. HTMLにタグを挿入
次はブログ・ホームページのhead要素内に専用タグを挿入します。
<link rel=”apple-touch-icon” href=”ファイル名.png” />
ファイル名の部分は先ほど作成したアイコン名にしてください。
私はファイル名を style-logo_aptouch.png にしたので、タグは以下のようになりました。
<link href=”style-logo_aptouch.png” rel=”apple-touch-icon” />
head要素内へコピペされたら、ファイルを保存してサーバへアップロードしてください。
4. 完了！
設定はこれで完了です。
画像の加工が出てきたり、FTPでのファイルアップロードやすこしHTMLの編集が必要ですが、それほど複雑な作業ではないと思いますので、ガンバってみてください。
iPhoneのホーム画面に設定してみる
では、ちゃんと表示されているか確認のため、ホーム画面に表示させてみます。
Safariでapple-touch-iconを設定したブログ・ホームページを表示させる。
そして、ここをクリック。
すると….
真ん中に先ほど作ったアイコンが表示されてます！！
表示されているアイコンをタップすると、下のような画面になります。
名前も文字制限はありますが、自分が好きなように変更できます。
すると、ホーム画面にアイコンが表示されるようになります。
まとめ
このapple-touch-iconは、かっこいい！っていうことだけじゃなく、1タップでそのサイトへアクセスできるようになりますので、ブログやホームページに再訪問を促すためにも、是非、対応しておきたいものです。
スマホページを作られたなら、このアップルタッチアイコンの対応もお忘れなく！！
丸いアイコンを設定しましたけど、見事に角丸四角の光沢アイコンに変換されてますね。