2012年06月05日 category : WordPress tags : design

WordPressにファビコンを設置する方法。iPhone同時対応！

WordPressで作ったブログにファビコンを追加する手順です。併せてiPhoneにも対応させます。

WordPressでブログを作成したらファビコン（favicon）を作成しましょう。あまり聞きなれない言葉かも知れませんがインターネットを利用していると頻繁に目にしています。

ファビコンとはWebブラウザのアドレスバーやタブ、お気に入り登録時にサイトタイル横に出ているあの小さな絵（アイコン）のことです。ファビコンは使われる場所によってサイズが変わりますが、マルチプルアイコンは一つの画像に複数のサイズを含める事ができます。

ファビコンはICO形式と呼ばれるファイル形式で作成されます。縦横のサイズは同じ正方形となり16×16、32×32、48×48、256×256などのサイズがあります。Webブラウザのアドレスバーやタブに利用されるアイコンのサイズは16×16が利用されます。

その他のサイズはデスクトップなどでショートカットとして使う場合などに使われます。16×16は小さなサイズですのであまり複雑でない画像が望ましいです。使いたい画像をPNG形式で用意してファビコン作成ソフトやファビコン作成サイトでICOファイルを作ります。

使いたい元画像は256×256で作ると良いと思います。各サイズでそれぞれ作るのが一番綺麗ですが手間もかかります。変換ソフトや変換サイトはリサイズに対応しているところが多いので、大きめのサイズで準備しておいてOKです。

作成したICOファイルをサーバのimagesフォルダにアップロードします。ファイル名は「favicon.ico」としてください。

<head></head>の間にMETAタグとLINKタグが並んでいると思いますので次の１行を追加します。

<link rel="shortcut icon" href="<?php bloginfo('template_url'); ?>/images/favicon.ico">

これで完成です：）　Webブラウザで確認してください。ファビコンが表示されていますね。

ファビコンはパソコン用となっていますが、iPhoneでもショートカットを作成できることご存知ですか？iPhoneでの手順を紹介します。iPhoneのWebブラウザSafariにて当ブログへアクセスしてみてください。（http://05step.com）

丸の箇所をタップするとメニューが開きますので「ホーム画面に追加」をタップします。するとホームにショートカットが作成されます。

これは画面をキャプチャーしてアイコンとして表示しているだけのショートカットです。便利ですがどこのサイトか分かりにくいですね。これもパソコンと同じようにオリジナルのアイコンに変更できるんです！

ICOファイルを作成した時に使った変換元のPNG画像をそのまま流用しましょう。もちろん別の画像でもいいのですがファイル形式はPNG形式とします。これもファビコンと同じようにimagesフォルダにアップロードします。名前は「favicon.png」とします。

そして03ステップ目と同様にheader.phpを編集します。
<head></head>の間にMETAタグとLINKタグが並んでいると思いますので次の１行を追加します。


<link rel="apple-touch-icon" href="<?php bloginfo('template_url'); ?>/images/favicon.png">

04ステップ目と同じようにホーム画面にショートカットを追加してみましょう。オリジナル画像のアイコンが表示されました。これはもう、１つのアプリケーションみたいです。一気に愛着が湧きます：）

iPhoneのショートカットアイコンおよびアプリは光沢が掛かったような処理がされています。オリジナルの電話アイコンやメールアプリのような処理ですね。しかし最近はこの処理がかかっていないアプリも沢山あります。
光沢を掛けたくない場合は先程の１行の代わりに以下の１行を追加してください。


<link rel="apple-touch-icon-precomposed" href="<?php bloginfo('template_url'); ?>/images/favicon.png">

光沢なしになりましたね。ファビコンやアイコンを作成することによってブログを見てくれている人もアクセスしやすくなりますし、外出先で自分のブログを確認する際もちょっと楽しくなりますね。ぜひ設置してみてください。

HOME >> WordPress > WordPressにファビコンを設置する方法。iPhone同時対応！

NEW：最新記事

<< 前の記事

>> 次の記事