こんにちは、ポプシクリップ。です。
今日はちょっとしたWEBサイトのお話を。
少し前から、このサイトでも「ウェブクリップアイコン」を設定しています。
気付いていた方はいますか？
これは何かというと、スマートフォン画面向けのブックマークアイコンのことです。
これを設定すると、何気にイイ感じ、イケてるサイトに見える気がします。
設定していないと、スマホでお気に入りのホームページをスマホの画面にブックマーク登録したときに、その画面のキャプチャ（スクリーンショット）が小さいアイコンの中にぐしゃっと表示されるので、見た目かなりゲンなりしてしまうんです。
バンドやミュージシャンのオフィシャルサイトってイメージが大切。自分のファンがオフィシャルサイトをブックマークしてくれたときに、変なアイコンで登録されるのも、なんだか嫌じゃないですか？ファンは細かいところまで見ているものです。そんなバンドマンのホームページ制作者の方で、まだ設定していない方がいたらぜひ試してみてください。
まずはウェブクリップアイコンをスマホの画面に設定する方法から。
下記はiPhoneの場合です。iOS8.2です。
iPhoneでSafariブラウザを使った場合、画面中央の下にある「共有ボタン」を押すと、下の写真にあるような画面が表示されます。
表示されたら画面下側にある「ホーム画面に追加」というアイコンをタップしてください。
画面右上の「追加」をタップすると、iPhoneの画面上に「ウェブクリップアイコン」が表示されます。下記のように無事に登録できました。
Androidのスマートフォンをお使いの場合、はじめにお使いのブラウザでサイトをブックマークしてください。その次にホーム画面上の何もないところで長押しすると「ホーム画面に追加」というメニューが表示されます。そこで「ショートカット」を選び、「ブックマーク」の中にあるお好きなサイトを選ぶと、スマートフォン画面上にアイコンが登録されます。
続いて上記ウェブクリップアイコンの設定方法です。
１．アイコンにしたい画像を作る
縦144ドット、横144ドットの正方形サイズの画像を作ってください。
ファイル形式は「PNG」で作りましょう。
２．アイコン画像を設定したいホームページの任意の場所にアップロードしてください。ファイル名はお好きな名前で大丈夫です。
３．下記をヘッダーに記述します。
アイコンを「光沢アリ」とする場合
--------------------------------------
<link rel="apple-touch-icon" href="アイコン画像をアップロードしたURL/ファイル名.png" />
アイコンを「光沢ナシ」とする場合
--------------------------------------
<link rel="apple-touch-icon-precomposed" href="アイコン画像をアップロードしたURL/ファイル名.png" />
以上で設定は完了です。
なおiPhoneだとアイコン画像を制作する際に四隅ギリギリまでデザインをしてしまうと一部が欠けて（丸くカットされて）表示されるので気を付けましょう。
・・・とまあこんなことを書いておきながら、ポプシクリップ。はまだスマホ最適化ができていないんですけどね（＾＾；
ちょっとしたことですが、ぜひ試してみてください。
