気に入ったサイトをブックマークしたときに、ウェブクリップアイコンが設定されているとさらに好感が持てます。
今はスマホでのネットサーフィンが当たり前になっているので、スマホユーザー向けのユーザビリティー向上はよく考える必要があると思います。
というわけで、このサイトもウェブクリップアイコンを作ってみました。設定も簡単に出来るので、参考にしてみてください。
ウェブクリップアイコンの設置手順
さっそくウェブクリップアイコンの設置手順を紹介します。
１．ウェブクリップアイコンの作成
ウェブクリップアイコンのサイズはこちらとなります。
- iPhone、iPod touch 114×114
- iPad 144×144
デバイスによって表示サイズが少し変わるようです。大きい画像は自動的に縮小されるので、一番大きい144×144で作成していきます。
画像の形式はpngに設定しましょう。
手元にいい写真がなかったので、とりあえずシンプルな感じにしておきました。
２．ウェブクリップアイコンの設定
まずは先ほど作成した画像をサーバーにupしましょう。
（WordPressの場合「メディア」→「新規追加」→「ファイルを選択」）
次にhtmlのhead内に以下の記述をします。
<link rel="apple-touch-icon" href="ウェブクリップアイコン画像のパス">
先ほどupした画像のパスに変更するだけで、あとはそのままコピペしてください。
またWordPressの方は子テーマを作ってから、headに関するPHPファイルに記述することをお勧めします。
ちなみにこのサイトはsimplicityを使っています。同じ方はsimplicity子テーマのheader-insert.php内に記述すればOKです。
（「外観」→「テーマの編集」→「header-insert.php」）
これで設定完了です。超簡単に出来ました。
サイトをホーム画面に追加するとこんな感じに表示されます。
文字が小さいと、こんな感じで少し見にくくなるので注意してください。
最後に
今回は、少しずつサイトの体裁を整えていく一環として、ウェブクリップアイコンを作りました。
できればスマホアプリのアイコンのように、おしゃれなデザインにしたかったですが、良いアイデアが思いつかなかったので適当な感じになりました…。
似たようなものでファビコンもまだ作っていないので、近いうちにやりたいと思います。
