iPhoneでホーム画面にブックマークした時に出るアイコン、apple-touch-iconを設置しました。iPhoneやiPod touchからmBlogを見るとアイコン出るようになって、ブックマークするとソレっぽいアイコンになります。と言ってもmBlogをわざわざホーム画面にブックマークしてるのなんて俺くらいしかいないと思うので、ほぼ自分用ｗ　先日紹介したWPtouchとの兼ね合いもあってちょこちょこイジったので、備忘録も兼ねて紹介しときます。

WordPressで構築されたブログでのアイコン設置作業

apple-touch-iconの設置は、Faviconと同じようにサイトのルートディレクトリに置くだけで基本的にはオッケー。アイコンの解像度は57×57ピクセルで、フォーマットはPNG。アイコンができたら“apple-touch-icon.png”という名前で保存して、ルートにアップすれば完了します。通常のブログやウェブサイトではこの状態でホーム画面にブックマークされると、設置したアイコンが表示されるようになります。ただしWordPressで作られたブログで、かつWPtouchを使ってiPhone専用のテーマにしている場合は、上記操作では専用のアイコンとして認識されません。なので下記のような設置作業と管理画面での操作が必要となります。

1. まずはアイコンの設置作業。サーバ上の“/wordpress/wp-contents/plugin/wptouch/images/icon-pool”ディレクトリ内に、“apple-touch-icon.png”という名前でアイコンをアップロード。
2. 次にワープレの“管理画面＞設定＞WPtouch”内、“Available Icons”欄に、先ほどアップしたアイコンがあるのを確認します。
3. 確認できたら“Logo/Bookmark Page & Menu Icons”欄内の“Logo & Home Screen Bookmark Icon”プルダウンを“apple-touch-icon”にして完了。その下のDownloadとAboutってトコもついでに同様にしておきました。

というワケでmBlogはiPhone対応になりました

以上の操作を行うと、WPtouchがアクティブになっているWPブログ下でも自作のApple Touch Iconが認識されます。右のサムネールは上記手順の３のステップです。いやーなんかこれイイっすね。ただのブログなのに専用アプリみたく見えてイイ感じ。ちなみにアイコンのテカりは勝手に付くみたい。といってもテカってないアイコンも実際には存在しているので、テカらせない方法もありそうです。

iPhone用のアイコンのPSDファイル

せっかくなので俺の作ったアイコンのPSDファイルも配布しておきます。「角丸のラウンド感とか調べるのメンドくせー」な人はどうぞ。レイヤースタイルも生きてます。

自作したアイコンのPSDファイル >>