貴方の大切なブログ。ちゃんとiPhoneアプリ風のアイコンにしていますか？

Webづくり

僕はiPhoneアプリを思わずアイコンだけでダウンロードしそうになることがあります。
ちゃんと中身を見ろという話なのですが、アイコンが画面に並んでるのを見るだけでニヤニヤするくらい、あの角丸の正方形のデザインが好きです。

 

この考えに共感してくれる方がいらっしゃるならば、貴方のブログをiPhoneアプリのアイコン風にホーム画面に表示させる設定を是非とも実施しましょう。

自分のブログにオリジナルアイコンを設定しよう！

iPhoneはお気に入りのWebページをホーム画面に保存できる

そもそも、僕が何の話をしているのかをまずスクリーンショットで解説します。

 

iPhoneには、お気に入りのWebページを保存する際、ブックマークに追加するほかに「ホーム画面に追加」という選択肢があります。

 

 

これを選択すると、通常はこのようにそのページ全体を縮小スクリーンショットしたような状態で角丸のアイコン化され、ホーム画面に追加されます。

 

 

これを、自分で準備した画像を使ってオリジナルのアイコンにしましょうというお話です。

まず画像を準備します

アイコンにしたい画像を準備しましょう。
サイズは64×64ピクセル以下の正方形であれば良いです。
僕はGIMPを使って作りましたが、探してみたら簡単に57×57ピクセルの画像を作ってくれるサービスがありました。

 

iPhone-like icon maker

最近はいろんなジェネレータがあって本当に便利ですね。
これでさくっと準備してしまいましょう。

ファイル名を変更します

何気にここが一番大事です。
準備したjpgないしpngファイル名を「apple-touch-icon」にしましょう。

 

apple-touch-icon.jpg
apple-touch-icon.png

 

こういうことです。

「あ、これがホーム画面用のアイコンですね＾＾」

なんと、この名前にさえしておけばiOSがこのように認識してくれるそうです。すごいですね。

ファイルをアップロードします

ここからはブログ環境により作業が分岐します。

 

1.レンタルサーバ環境

 

FTPでファイルをルートフォルダに保存します。
つまり、一番上の階層にアップするということです。

 

2.ブログサービス環境

 

FC2ブログやLivedoorブログ等ではまずファイルをアップロードし、格納先のURLをメモしておきましょう。
その後、テンプレートの編集画面から<head>の後に以下のコードを書き加えます。

 

<link rel=”apple-touch-icon” href=”格納先のURL” />

最後に確認してニヤニヤしましょう

ご自分のiPhoneで貴方のサイトを開きましょう。
「ホーム画面に追加」をタッチ。

 

一瞬今までと同じスクリーンショット状態が出ますが、ホワ～ンと設定したアイコンに変わるはずです。

 

 

これで貴方のサイトはホーム画面に追加されるとオリジナルアイコンで表示されます。
ほんのちょっとだけiPhoneアプリ開発者になれた気分ですね。

ピックアップ記事

関連記事一覧

  1. この記事へのコメントはありません。