iPhoneやiPadでサイトをホーム画面に追加したときに出すアイコンの作成方法

この記事を読むのに必要な時間:01分38秒

iPhone、iPad、iPod touchのウェブブラウザ「Safari」には、Webクリップと言って、閲覧中のサイトのショートカットのためのアイコンをホーム画面に追加することができます。

iPhoneなどのSafariで表示されるアイコンとはこれ。

iPhone、iPad、iPod touchのSafariで表示されるアイコン
ホームにアイコンを追加する方法
iPhoneでは簡単にホームにアイコンを追加できます。
僕も頻繁に閲覧するサイトでよくやります。

まず、下のメニューの真ん中の「四角から矢印が飛び出ているマーク」をタップします。

「四角から矢印が飛び出ているマーク」をタップ
すると、メール送信、TwitterやFacebookで投稿などができる画面になります。ここの「ホーム画面に追加」を選択します。

ホーム画面に追加
任意でタイトルをつけることができます。(デフォルトでは、そのページのタイトルタグが表示されます。)
タイトルを決めたら「追加」をタップ。

Webくリップは、任意でタイトルをつけることができる。
簡単にアイコンが追加されました。

ホームにアイコンが追加された。
アイコンの作成方法
しかし、このアイコンは何も設定していないと、閲覧中のサイトのスクリーンショットが表示されてしまいます。
そこで、本題のアイコン作成方法です。

デフォルトではアイコンは、閲覧中のサイトのスクリーンショットが表示される。
アイコンのサイズ
アイコンのサイズは、正方形なら勝手にリサイズされます。
サイズの大きいiPadのことも考慮して、150✕150ピクセルくらいで作成しておけばいいかなと思います。

アイコンの保存形式
保存形式は、png、gif、jpg、bmpのいずれも使用可能です。

ちなみにこのWebクリップのアイコン画像は、角丸&つや出し加工が施されています。
僕は、今までこれが面倒そうで手を出さなかったのですが、なんとこれ勝手に処理してくれるんです。ラッキー。

角丸&つや出し加工は勝手に処理してくれる。
Webサイト側の設定
<head>内に、以下の記述を追加するだけです。
<link rel="apple-touch-icon" href="http://www.example.com/アイコン.png"/>
※URL(http://www.example.com/image/アイコン.png)は適切なものに変更してください。

ちなみに、つや出し加工を施したくない場合は、こちらでOK。
つや出しはありなし選べますが、角丸はとれません。
<link rel="apple-touch-icon-precomposed" href="http://www.example.com/アイコン.png"/>
※URL(http://www.example.com/image/アイコン.png)は適切なものに変更してください。

WordPress(ワードプレス)の設定方法
自分のブログでしか試していないので、他にも方法はあるかもしれませんが、ここでは僕の方法を載せておきます。

アイコンは、「メディア」→「新規追加」でアップロードします。

WordPress(ワードプレス)で画像をアップロードする方法 その1
「ファイルのURL」これが画像を表示させるために必要なURLになります。

WordPress(ワードプレス)で画像をアップロードする方法 その2
そして、WordPress(ワードプレス)の管理画面から「外観」→「テーマ編集」→「ヘッダー(header.php)」

WordPress(ワードプレス)でheader.phpに記述を追加する方法 その1
WordPress(ワードプレス)でheader.phpに記述を追加する方法 その2
WordPress(ワードプレス)でheader.phpに記述を追加する方法 その3
ここの<head>内に、以下の記述を追加しました。
<link rel="apple-touch-icon" href="http://www.example.com/image/アイコン.png" />
※URL(http://www.example.com/image/アイコン.png)を先ほどの「ファイルのURL」に変更してください。


SafariでWebクリップされる可能性って結構あると思います。
簡単に設定できるので、お客さまに「おっ」と思ってもらえるだけでもやる価値はあると思います。

今日は以上です。
ありがとうございました!


This entry was posted in iPhone, Webサイト制作 and tagged , . Bookmark the permalink.

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

*

次のHTML タグと属性が使えます: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>