開発コストを削減「ラボ開発」って?
開発コストを削減「ラボ開発」って?
2012.09.04

スマホサイト対策!ウェブクリップアイコンの設定を忘れずに

サリー

ウェブクリップアイコンの作成について

デフォルトでは、表示しているページのスクリーンショットがそのまま縮小されてアイコンとして使用されます。

<img class="size-full wp-image-7310" title="LIGのサイトはデフォルトだとこうなります" src="https://liginc.co.jp/wp-content/blogs.dir/3/files/2012/09/IMG_0072.png" alt="LIGのサイトはデフォルトだとこうなります" width="360" />[/caption]

せっかくなので、これをオリジナルの画像に設定してみましょう。

表示されるアイコンのサイズはデバイスによってさまざまです。
<table style="border-collapse: collapse; border: #000 1px solid;" width="655">
<tbody>
<tr>
<td style="border: #000 1px solid; padding: 5px 20px;">iPhone</td>
<td style="border: #000 1px solid; padding: 5px 20px;">114×114(57×57)</td>
</tr>
<tr>
<td style="border: #000 1px solid; padding: 5px 20px;">iPod touch</td>
<td style="border: #000 1px solid; padding: 5px 20px;">114×114(57×57)</td>
</tr>
<tr>
<td style="border: #000 1px solid; padding: 5px 20px;">iPad</td>
<td style="border: #000 1px solid; padding: 5px 20px;">144×144(72×72)</td>
</tr>
</tbody>
</table>
<small>※カッコ書きはRetina非対応の旧サイズの場合</small>

大きめのサイズで作っておけば、それが縮小されて使われるので、<strong>144×144</strong>以上の正方形で作っておけば問題ないです。

フォーマットは<strong>PNG形式</strong>にします。

<pre>[code]<img class="size-full wp-image-7314" title="LIGサイト用にこんな画像を用意。サイズは144×144" src="https://liginc.co.jp/wp-content/blogs.dir/3/files/2012/09/apple-touch-icon.png" alt="LIGサイト用にこんな画像を用意。サイズは144×144" width="144" height="144" />[/caption]
<h2>ウェブクリップアイコンの設定方法</h2>
ウェブクリップアイコンは、光沢のアリ・ナシを選ぶ事が出来ます(Androidは非対応)。

アイコンの画像ファイルに任意のファイル名をつけて任意の場所にアップ後、headに次の一行を追加します。

(「サイトのURL」「webclip.png」は任意のものに書き換えて下さい)

<strong>光沢アリ</strong>

<pre>[code]<link rel="apple-touch-icon" href="http://サイトのURL/webclip.png" />

光沢ナシ

<link rel="apple-touch-icon-precomposed" href="http://サイトのURL/webclip.png" />

Androidに対応させなくていいならもっと簡単です。

rootディレクトリに

光沢アリの場合「apple-touch-icon.png

光沢ナシの場合「apple-touch-icon-precomposed.png

という名前でアップしておけば、勝手に拾って使ってくれます。

iPhone/iPod touch/iPadだけならこれでOK。

設定後のアイコン。左が光沢アリ、右が光沢ナシ[/caption]

以上で設定完了です!

サイトのスマホ対策として覚えておきたいですね。

  • 1
  • 2