読者です 読者をやめる 読者になる 読者になる

イロイロひとりごと。

ブログのこと、普段の生活のことをつぶやいています

<はてなブログ>iPhoneでサイトをお気に入り・ホーム画面に追加したときのアップルタッチアイコンを設定

はてなブログ サイトデザイン・設定

タイトル長くなっちゃいましたが、意味が伝わってないですよね(笑)

iPhoneから気に入ったサイトをお気に入り(ブックマーク)したときに、変なアイコンになってしまうってことに、昨日初めて気が付きました(´・ω・`)

motoavenger.hatenablog.com

いや~全然気が付かなかった。お気に入りに入れる機能をあまり使っていなかったので。

スマホ表示がはてなブログのデフォルト設定であればアイコンが表示されるらしいのですが、レスポンシブデザインの設定にしていると、この頭文字のアイコンが表示されてしまうらしいのです。

 

その後いろいろ調べてみたら設定すればちゃんとアイコンが表示されるとわかり、さっそくやってみましたのでやり方を解説しますね(*´∀`*)

 

アップルタッチアイコンを設定しよう

iPhoneをやiPadでSafariからお気に入り登録したり、ホーム画面に登録したい場合は「アップルタッチアイコン」を設定しなければいけないんだとか。

まず「アップルタッチアイコン」え、何それおいしいの?状態でした(笑)

ファビコンは設定していたので普通に表示されてると思っていたのですが、どうやら「アップルタッチアイコン」という指定がないと、お気に入り登録する場合は頭文字アイコンに、ホーム画面に追加する場合はスクリーンショットになっちゃう模様。

 

ちなみにこのブログをお気に入り登録しようとしたら、こんな感じで頭文字の「イ」が表示されました。

f:id:setuyakuhappylife:20160413105619p:plain

 

メインブログもやってみましたが、同じでお気入り画面には頭文字アイコンが!(´・ω・`)

f:id:setuyakuhappylife:20160413105737p:plain

 

これをブログ用のアイコンを作って表示させます。

 

アイコンを用意

まずはアイコン用の画像を用意しましょう。

PNG形式の画像で、サイズは256×256にしました。

いろんなサイズで用意すると書いてあるサイトもありましたが、大きければ自動的に縮小されるということで、以前ファビコン用に作ったのをそのまま利用しました(*´ω`*)

JPEG形式になっている場合はペイントなんかでもPNG形式で保存できますので変えておきましょう。

ファイル名はなんでも大丈夫です。

他のサイトで、ファイル名を「apple-touch-icon.png」とするとありますが、はてなのFotolifeの場合アップロードすると任意の名前(数字)になっちゃうので意味が無いです。

サーバ(Fotolife)に画像をアップする

はてなブログの場合はFotolifeに画像を入れておけばOK。

Fotolifeから直接アップロードもできますが、やりやすい方法でお教えしますね。

 

まず、ブログで新規に「記事を書く」ページに行きます。

いつも記事に画像を入れる時のように本文に画像を貼り付けます。

ちなみにフォルダからドラッグ&ドロップでできますよ(*´∀`*)

f:id:setuyakuhappylife:20160413111705p:plain

そうすると自動的にFotolifeのほうに画像がアップロードされます。

これで画像をサーバ上に置くことができました!

 

画像を呼び出すリンクHTMLをhead要素に入れる

最後に画像を呼び出す呪文を唱えますよ~。

 

先ほどブログ記事に貼り付けた画像のコードをHTML編集画面で確認してみてください。

f:id:setuyakuhappylife:20160413120504p:plain

この黄色い部分が画像のURLになります。

 

このコードに画像URLを入れます。

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

 

このコードをダッシュボード>設定>詳細設定>検索エンジン最適化の「headに要素を追加」に入れます。

f:id:setuyakuhappylife:20160413121454p:plain

一番下の「変更する」を押したら完了です!

おつかれさまでした(*´∀`*)

 

アップルタッチアイコンが設定でききたか確認

さて、うまくできていればお気に入りに入れた時にアイコンが表示されるハズです。

iPhoneやiPadから確認してみてください。

キャッシュが残っているとうまく表示できないことがあるようなので、iPhoneの設定>Safariから「履歴とWEBサイトデータを消去」すると表示されるようになります。(消去するとイロイロ消えてまずい人はやらないでね)

 

お気に入りに入れてみます♪

f:id:setuyakuhappylife:20160413121908p:plain

んん????変わってるよ!変わってる(*´艸`*)

わかりにくいアイコンでごめんなさい(笑)そもそも頭文字のアイコンじゃないかw

 

ではビフォーアフターです。

f:id:setuyakuhappylife:20160413122454p:plain

ちゃんと設定したアイコンに変わりました(*´∀`*)

 

次は、ホーム画面に追加

 

f:id:setuyakuhappylife:20160413122545p:plain

こちらもスクリーンショットからアイコンに変わりました!

iPhone6で変更できたのを確認しましたが、iPadminiからはホーム画面にはスクリーンショットになってしまっています。キャッシュのせいかもしれませんが、わかりません。

もしこれで変更できなかったら教えてください。

 

まとめ

「アップルタッチアイコン」なんて別で設定が必要なんて全然知りませんでした。

 

始めはうまくいかなくて、何回かやってやっとできました(*´ω`*)

やること自体は難しくないので、はてなブログでレスポンシブデザインにしている方はぜひやってみてください!

 

ですのー (id:motoavenger)さん、どうでしょうか?

もしうまくできなかったらご連絡くださいね!

 

ファビコン設定はコチラを参考にしてください。

happylife-tsubuyaki.hatenablog.com