Webやアプリのデザイントレンドを紹介。たまに雑談。

Browse By

[SITEINFO] iPhone用のブックマークアイコン、apple-touch-icon.pngを設置しました

  • Pocket
  • このエントリーをはてなブックマークに追加

apple-touch-icon.png

iPhoneでホーム画面にブックマークした時に出るアイコン、apple-touch-iconを設置しました。iPhoneやiPod touchからmBlogを見るとアイコン出るようになって、ブックマークするとソレっぽいアイコンになります。と言ってもmBlogをわざわざホーム画面にブックマークしてるのなんて俺くらいしかいないと思うので、ほぼ自分用w 先日紹介した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が認識されます。右のサムネールは上記手順の3のステップです。いやーなんかこれイイっすね。ただのブログなのに専用アプリみたく見えてイイ感じ。ちなみにアイコンのテカりは勝手に付くみたい。といってもテカってないアイコンも実際には存在しているので、テカらせない方法もありそうです。

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

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

2 thoughts on “[SITEINFO] iPhone用のブックマークアイコン、apple-touch-icon.pngを設置しました”

  1. Pingback: [PHOTOSHOP] DESIGN THE ITUNES ICON FOR THE IPHONE AND IPOD TOUCH - iPhoneでのiTunes Music Storeアイコンの | ウェブデザイン, CSS, Javascript, Flash, 海外のウェブサービスなどを紹介 | mBlog
  2. Trackback: [PHOTOSHOP] DESIGN THE ITUNES ICON FOR THE IPHONE AND IPOD TOUCH - iPhoneでのiTunes Music Storeアイコンの | ウェブデザイン, CSS, Javascript, Flash, 海外のウェブサービスなどを紹介 | mBlog
  3. Pingback: iPhone対応にしてみた : : Rynn's Web
  4. Trackback: iPhone対応にしてみた : : Rynn's Web

コメントを残す

メールアドレスが公開されることはありません。

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください