WPlogs

WordPressを中心にWeb関連の情報発信。PHP、CakePHP、HTML5、SEOなど。 ※旧名称「SEO人」、旧URL「http://seo.net-luck.com/」

*

WordPressテーマ「STINGER3」のファビコン、アイコン画像をカスタマイズ

      2015/06/01

STINGER3

出典:http://stinger3.com/

当ブログは、検索エンジン最適化(SEO)に強いと言われているWordPressテーマ「STINGER3」を使用しています。

今回は、その「STINGER3」のファビコン、iPhone/iPad用アイコンの画像を変更したいと思います。

なお、今回のバージョンは以下です。

  • WordPress 3.9.1
  • STINGER3_ver20140327

スポンサード リンク

ファビコンの変更

そもそも「ファビコン」(Favicon.ico)とは、ウェブサイトのシンボルマークとなるアイコンのことであり、ブラウザのタブやブックマークに表示される16×16pxの画像である。

そのサイト独自のアイコンを作成・使用することで、ユーザーが他サイトと見分けやすくなり、他サイトとの差別化を図ることができる。

「STINGER3」のデフォルトのファビコン画像はこちら。

ファビコン

このファビコン画像を指定している場所は、「header.php」ファイルの以下の記述。

デフォルトでは、テーマサブディレクトリ「images」内の「rogo.ico」ファイルが指定されているので、自分で作成したファビコン画像をアップロードし、このファイルを置き換えるのが手っ取り早いと思います。

ファビコン画像(Favicon.ico)作成には、Favicon Generatorが簡単に作成できて良い。

当ブログの場合は、以下のようなファビコン画像を作成し、アップロードしました。

ファビコン

iPhone/iPad用アイコンの変更

続いて、iPhone/iPad用アイコンについて。

iPhone/iPadでは、ホーム画面上にSafariで閲覧したサイトのショートカットを追加できるのだが、その際にホーム画面上に追加される画像を用意しておかないと、少し見た目が寂しい感じになってしまう。

ホーム画面上の画像は以下のようなものです。

iPhone/iPad用アイコン

出典:http://www.symmetric.co.jp/blog/wp-content/uploads/2010/06/01.PNG

「STINGER3」のデフォルトのiPhone/iPad用アイコンはこちら。

iPhone/iPad用アイコン

iPhone/iPad用アイコン画像を指定している場所は、「header.php」ファイルの以下の記述。

iPhone/iPad用アイコン画像を指定するHTMLの書式は以下。

ホーム画面にアイコンを追加する際に、自動で入るテカリ・影を入れないようにできる。

なお、ホーム画面のアイコンは角丸になっているが、それは自動でやってくれるので、わざわざ角丸の画像を用意する必要はない。

また、アイコン画像の大きさは150x150pxぐらいの正方形がよいみたいです。

こちらもファビコン画像と同様に、テーマサブディレクトリ「images」内の「apple-touch-icon-precomposed.png」ファイルを、自分で作成したアイコン画像に置き換えるのが手っ取り早いと思います。

当ブログの場合は、以下のようなファビコン画像を作成し、アップロードしました。

iPhone/iPad用アイコン

これで、ユーザーが当ブログと別サイトを見分けやすくなりましたね。

以上です。

参考サイト

iPhoneでサイトをホーム画面に追加した時のアイコンはどうやって指定するの? | 株式会社シンメトリック公式ブログ |
研究室/iPhone、iPod touch、iPad用Webクリップ用アイコンの作り方 – iをありがとう

 - STINGER3