Touch Iconを設置
2008/09/09 TuesdayiPhoneでは、よく訪問するウェブサイトを、普通にSafariのブックマークに登録することもできますが、アイコン化してホーム画面に置いておくこともできます（Safariの画面下にある+のボタンをタップして、メニューから「ホーム画面に追加」を選びます）。
その際には、サーバー上のタッチアイコンという画像ファイルが使われるのですが、当ワードプレッサでもそのアイコンを用意しました。(^_^)
左上のがWordpressaのアイコン
タッチアイコンは、57×57ピクセルの正方形のpng形式画像です。
角を丸くするのと、グラスシェイドの効果はiPhoneの側が自動的に行ってくれます。
ぼくの感覚としては、iPhoneに表示されたときにかなり薄い色合いになる気がしたので、アイコンの制作時にはかなり濃い目の色にしました。
ウェブサイトのルートと同じ場所に置けば利用できるようになりますが、別の場所に置くには、<head>タグ内に<link>タグを書いて場所を指定します。テーマとしてひとまとめにしたり、ページごとに別のタッチアイコンを使い分けたりするには、後の方法で行う必要があるでしょう。
ワードプレッサでは、テーマのフォルダ内のimagesフォルダにwpicon.pngというファイルを置き、header.phpに以下の一文を加えました。
<link rel="apple-touch-icon" href="<?php bloginfo('stylesheet_directory'); ?>/images/wpicon.png" />
bloginfo()でテーマのディレクトリーを取得するのがポイントですね。
faviconと同じような仕組みですが、特別なツールがなくても作れるし、それなりの大きさがあってきれいなので、作りがいもある感じです。
コメントを書く
登録ユーザーはログインしてコメントをつけることができます。