Tag Archives: アイコン

Gizmon iCAをいまさら買ってみたのです

Saturday 20 April 2013

もはや、いかにジャストじゃないタイミングで記事を書くか、みたいな感じになってきている当ブログですが、iPhoneのケースがまたまた割れてしまい、新しいのを買いました。
といっても、1ヶ月前の話なんですが…。 Continue reading

Touch Iconを設置

Tuesday 9 September 2008

iPhoneでは、よく訪問するウェブサイトを、普通にSafariのブックマークに登録することもできますが、アイコン化してホーム画面に置いておくこともできます(Safariの画面下にある+のボタンをタップして、メニューから「ホーム画面に追加」を選びます)。
その際には、サーバー上のタッチアイコンという画像ファイルが使われるのですが、当ワードプレッサでもそのアイコンを用意しました。(^_^)

左上のがWordpressaのアイコン

左上のが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と同じような仕組みですが、特別なツールがなくても作れるし、それなりの大きさがあってきれいなので、作りがいもある感じです。