アップルタッチアイコンの設定

Googleがはじめたモバイル フレンドリー
ますますスマホ用サイトの必要性が高まってきました

さて、あなたのお店のサイトを”お気に入り”から探してもらうのではなく
スマホのデスクトップにアイコンを設定するやり方をご紹介します
ちなみにiPhone向けです

アップルタッチアイコンの設定

iPhoneで集まるラボのサイト(https://www.atsumaru-labo.com/)を
開いて①をクリックします
icon設定1

②「ホーム画面に追加」をクリックします
icon設定2

③「追加」をクリックします
icon設定3

④アプリのようにデスクトップにアイコンが表示されました。
アイコンをクリックすればサイトが開きます!
icon設定4
便利なのでぜひ使ってみてください

アップルタッチアイコンの作成

おそらく、「どうやって設定すればいいの?」
そういうお声が多いと思うので設定の仕方も紹介しますね

まず正方形の画像をご用意ください
私の場合はラボ君ですね↓
laboicon

私たちはフォトショップという魔法のソフトを使っているので
サイズなどの調整も簡単なのですが

皆さんは、適正なサイズにする段階で壁にぶつかると思います
便利なサイトがあるので適正サイズにしてみましょう

アップルタッチアイコン画像サイズ作成サイト→ http://iconifier.net/
使い方は簡単です

icon設定5

選択ボタンをクリックしてあなたが作成した画像を選択してください

その下の「iconify」をクリックすれば
下記のように適正サイズ8種類が自動で作成されます

 

これをダウンロードしてWordPressやJimdoの
メディアライブラリにアップロードしましょう!

 

ホームページにアップルタッチアイコンを設定

「これをどのようにホームページに反映させればいいの?」
またまた壁にぶつかりますよね

 

WordPressとJimdoの設定の仕方を紹介します

基本はアップロードした画像のURLを下記の部分に変更するだけ

<link rel=”apple-touch-icon” href=”画像のURL” />

これでコードができました

 

[Jimdoの場合] [設定]の[ヘッダー部分を編集]に先程のコードを入力するだけです

icon設定jimdo

 

[WordPressの場合] headに先程ののコードを記入してください
プラグインを使用して設定することも可能です

業者に依頼している方は
直接ご相談してみてください

長くなりましたが参考になれば幸いです

関連記事

  1. ホームページの更新を代行します

  2. ホームページが更新できない時は?