029

2014.01.06

とっても簡単!スマホのホーム画面用アイコンを表示させるには!

このエントリーをはてなブックマークに追加

サイトの運営・更新をクライアント様のHTML知識がある担当者様が行っているケースは少なくありません。そんなお客様からスマホのホーム画面用アイコンの設置方法を教えて!と質問がありましたので、このブログにメモっときます(◎◎さ~ん!ここをご覧くださいねぇ笑)。ども、クライアント様のお悩み相談室こと、WEB&グラフィックデザイナーのヒロ@札幌です。

 

ウェブクリップ3

 

ウェブクリップ2本題に入りましょう!ホーム画面にアイコンを置く機能をウェブクリップと言います。なのでそのアイコンのことを「ウェブクリップアイコン」と言ったりもします。スマホでよく見る、あのアイコンです。例えばiPhoneのsafariでブックマークする際に右図のAから「ホーム画面に追加」という機能が出てきます。この時、通常なら※画像1のようにブックマークされ、味気ない感じです。でも、ウェブクリップアイコンを設定しているサイトだと※画像2のようになり、ちょっとオシャレだし、次にアクセスする際に見つけやすいですね。簡単なので覚えておきましょう。

1. 画像を用意
ウェブクリップ4あらかじめ用意しておいた写真やデザインした絵を、photoshopなどの画像加工ソフトを開いて144 × 144pxのサイズの中に配置します。Loopsの場合はコレです。iPhoneやiPod touchでは114 x 114pxに、iPadは144 x 144pxにリサイズされて表示されます。なので大きめのiPadサイズに合わせて作っておくとよいです。保存の際は、任意の名前(例:clip-icon.png)をつけてPNG形式で保存します。

 

2. 画像を設置
作ったアイコンを、FTPでWEBサーバーにアップロードしておきましょう。続いて、アップロード先のルートを確認しておきます。(例えば「http://sample.com/images/clip-icon.png」)。

次に、WEBページの元データを開いて<head>?</head>内に、

<link rel=”apple-touch-icon” href=”http://sample.com/images/clip-icon.png”/>の一行を追加して保存します(href=” “内がアイコンのルートなので、アップロードした際のルートを記入してください)。そして、このデータを更新します。以上です!とっても簡単、ぜひお試しください。

 

ちなみにアイコンの光沢を以下で指定できます。
光沢有り<link rel=”apple-touch-icon” href=”http://ドメイン/???/画像名” />
光沢無し<link rel=”apple-touch-icon-precomposed” href=”http://ドメイン/???/画像名” />

  • アーカイブ

このエントリーをはてなブックマークに追加