【Wordpress】ファビコンとアップルタッチアイコンを実装してサイトの注目度を高める
も・く・じ
ネットビジネスで重要な項目の一つにサイトの注目度と信用度があります。
だれだってうさんくさいサイトから何かを購入するという気にはならないでしょう。
もちろんそれらは、サイトに書いてある内容やサイトデザイン、執筆者の人柄によるところが大きいです。
それに加えてちょっとした見た目の変更だけでもだいぶ変わってきます。
たとえばファビコンの有り無し。
ファビコンの重要性
ファビコンというのは、下の画像を見てもらえばわかると思いますが、ブラウザのタブ部分に表示される小さなアイコンのことです。
（※ブックマークの先頭にも表示されます）
いかがでしょう。
上のブックマークのところをご覧になっても、ファビコンがあるところとないところでは目立ち度がだいぶ違ってきませんか。
ファビコンってあまりに小さいし違和感なく溶け込んでいるので、その重要性についてきちんと考えてる人は少ないと思います。
しかしよくよく考えれば、ヘッダー画像と共にファビコンも"サイトの顔"と言えます。
それに文字だけの情報よりはファビコンが付いてた方がサイトの区別がしやすいというのもあります。
さらにはファビコンがあることで、サイトの存在が強調されてより印象に残りやすくもなります。
きちんとしたサイト、安心感のおけるサイトというイメージまで抱いてもらいやすくもなります。
その結果サイトの信頼度もアップするであろうし、ひいてはクリック率も高くなる効果も（多少は）期待できます。
アップルタッチアイコン（apple-touch-icon）も同様です。
ファビコンはパソコン上での表示機能ですが、iPhoneやiPadなどのiOS機器（Android でも表示可能）で、ファビコンと同じようなアイコンを表示させるのがアップルタッチアイコンです。
過去記事でも同様の内容を発信してます。
今回は内容を簡潔化してさらに加筆したものです。
iPhoneやiPadなどでサイトを閲覧している最中、気に入ったサイトがあればそのままホーム画面に登録した経験がきっとおありでしょう。
その時サイトに何も手を付けていなければ、単純にページの内容が縮小されただけのもや～としたアイコンにしかなりません。
これは実にもったいないです。
ここであなたのサイトをしっかり印象付けておけば、その後も優先的にタップしてくれる可能性が高くなるってもんじゃないでしょうか。
（違うか）
スマホの普及率を考えたらアップルタッチアイコンは作っておいた方がいいと思いますよ。
ということで今回は、パソコン・タブレット・スマートフォンのどれで見ても自サイトのオリジナルアイコンが表示されるよう、貪欲に、そしてできるだけ簡単に実装できるよう考えていきたいと思います。
ファビコン作成の前に
ファビコンとはもともとInternet Explorer 用に考えられたもので、favicon.ico というファイルが必要です。
そのファイルの中に実際に表示させる画像が入っています。
画像は正方形です。
ファビコンを作るにはファビコンに変換するための画像を作る必要があります。
web上の画像加工サービスなら「x-icon editor」といったような無料サービスもあるので、興味がある人はご利用になってみてください。
ただしどのweb サービスも"慣れ"がかなり必要になるので、思い通りのアイコンを短時間で作るのはちょっと難しいかもしれません。
一方、画像編集アプリを使えばイメージに近いモノは仕上げやすいです。
新たにお金をかけたくない方は、GIMP（無料） などを利用してみてはいかがでしょう。
必要な画像
この画像作成でちょっと戸惑いました。
ファビコン
ファビコン用の画像を作成する際、画像サイズと作成枚数が気になるところでしょう。
たとえばブラウザのタブに表示されるファビコンのサイズは16×16（px） で、デスクトップに表示されるショートカットファビコンは32×32というサイズが多いようです。
その他24×24や48×48、96×96といったサイズもあればなお便利です。
しかしあまり多くてもしょうがないので、ここでは比較的需要の多い
16×16（タブ・ブックマーク用）
32×32（デスクトップ用？）
48×48（その他？）
これら3種類のサイズのファビコンを作ることにします。
といっても上記3つのファビコン用画像をそれぞれ個別に作るわけではありません。
1枚の大きな画像を作っておいて、それを元にwebサービスを利用して3つのファビコン用画像を自動で作り出します。
実際には2枚の画像を作ることになります。
というのは大きなサイズの画像を縮小した時16×16だけどうしても画像がつぶれて見にくくなってしまいます。
そのため16×16と他サイズ用の2枚の画像が必要になってきます。
（画像を縮小した時に何の問題もなければ1枚画像だけでも大丈夫です）
そして上記3種類のサイズの画像をまとめて1つのファビコン（favicon.ico）を作ります。
これであれば、ほぼどの状態でもファビコンが表示されるようになります。
アップルタッチアイコン
続いてアップルタッチアイコンですが、細かく言えば、
57×57（iPhone用）
72×72（iPad用）
114×114（Retina iPhone用）
144×144（Retina iPad用）
これら4種類のサイズが必要です。
画質にこだわるなら全部用意すべきでしょうが、そこまでやっても自己満足でしかないので1個の画像だけで済ませちゃいます。
画像サイズ
では画像幅はいくつにして作ればいいのでしょう。
最終的には大きな1枚画像を縮小してそれぞれのサイズの画像を作るわけですが、画像を縮小すると少なからず"画像の荒れ"が生じます。
この"画像の荒れ"を最小限に抑えるためには、できればそれぞれのサイズの偶数倍の大きさの画像を用意する必要があります。
つまり各サイズの最小公倍数の大きさで画像を作れれば、どの画像も"荒れ"を最小限に抑えることができます。
ファビコンを例に挙げれば、16×16が1枚。
32×32と48×48の最小公倍数である96×96というサイズが1枚になります。
アップルタッチアイコンの方は、57、72、114、144 と4つのサイズがあります。
これらも1枚の画像から一緒に作る予定ですが、これらのサイズとファビコンサイズの最小公倍数を出そうとしたら、かなり大きなサイズの画像で作らなくてはなりません。
そのため今回の例に限っては16×16の画像以外には、最大サイズである144×144でファビコン用とアップルタッチアイコン用の1枚画像を作ることにします。
一応、48×48と72×72は偶数倍になってますね。
この辺のサイズ決めに関しては特に決まったサイズというのはないので、それぞれやりやすいサイズで作っていただいて構いません。
ただし最大でも256×256以下の方がいいでしょう。
また画像にはあまり細かい装飾をかけない方がいいです。
縮小した時に全部潰れて逆に見にくくなってしまう場合がありますので。
ファビコン用画像の準備
下が当サイトで使っているファビコン用画像で2枚用意してあります。
（将来、変わってる場合もあります）
左が「favicon144.png」右が「favicon16.png」。
ファビコンだけならJPEGでもPNGでもGIFでも問題ありません。
ただしアップルタッチアイコンはPNG画像だけなので、今回はPNG形式で画像を書き出してあります。
PNG形式は背景を透過させる透過PNGも作れますので、四角形にこだわらないファビコンを作ることもできます。
（JPEGや透過PNG画像の違いについてはここでは割愛いたします）
背景が透過するファビコンは一つ一つのサイズの画像を作成しなければならないことやアップルタッチアイコンが透過PNGに対応してないようなので、併せてここでの説明は割愛します。
ファビコン用画像への変換
画像が用意できたら「favicon.icoを作ろう」というサイトを開きます。
各ファイルをそれぞれ選択し「favicon.ico作成」をクリックします。
すぐにサンプル画像が右に表示されますので、問題なければダウンロードをクリックして自分のパソコンに保存します。
ダウンロードファイルは「favicon.ico」という名前で保存されます。
その中にさきほどの3つのサイズの画像が入っています。
favicon.icoは適当なところへ移動してサーバーにアップロードしておきましょう。
ワードプレスへの組み込み
続いてワードプレスへのファビコン設定手順をご説明します。
ファビコンやアップルタッチアイコンを手軽に実装できる「Favicon Rotator」といったプラグインもありますが、できるだけプラグインは減らしたいので直接書く方法を覚えておきましょう。
header.phpを開きます。
<head>と</head>間に以下を書き込みます。
|
0 1 2 |
<link rel="shortcut icon" href="<?php bloginfo('template_directory'); ?>/favicon.ico" type="image/vnd.microsoft.icon" /> |
これは favicon.ico を、テーマフォルダ直下にアップロードした場合の書き方です。
もしも favicon.ico をテーマフォルダ内の「image」というフォルダの中に置いた場合は、以下のような書き方に変わります。
|
0 1 2 |
<link rel="shortcut icon" href="<?php bloginfo('template_directory'); ?>/image/favicon.ico" type="image/vnd.microsoft.icon" /> |
違いがわかりましたでしょうか。
/favicon.icoが/image/favicon.icoに変わってますね。
『<head>と</head>間と言われても広すぎてどこに書いたらいいかわからない』という方は、とりあえず「<?php wp_head(); ?>」の前あたりに書いておけば大丈夫です。
これで設定は完了です。
ブラウザでサイトを開いてみましょう。
（既に開いてある場合はF5キーを押します）
ブラウザタブやブックマークに無事ファビコンが表示されてます。
もしもうまく表示されないような時は、F5キーを押してブラウザをリフレッシュ（更新）してみましょう。
それでもダメならブラウザのキャッシュ等を一度全部クリアしてみてください。
（履歴・クッキーのクリアなどです）
それでもダメな場合は、画像をアップロードした場所と書き方が一致してないなど設定に何らかのミスが発生している可能性があります。
続いてアップルタッチアイコンの設置です。
アップルタッチアイコンの組み込み
アップルタッチアイコン用の画像は、既出のfavicon144.png画像をそのまま使います。
ただしファイル名を「apple-touch-icon.png」に変更しておきます。
そしてファビコンと同じ場所にアップロードしておきます。
ワードプレスへの設置方法はファビコンと基本は一緒です。
header.phpを開きます。
さきほど記述したファビコン用構文の後ろに以下を書き足します。
|
0 1 2 |
<link rel="apple-touch-icon" href="<?php bloginfo('template_directory'); ?>/apple-touch-icon.png" /> |
下が実際に表示された時のアイコンです。
設定構文の「rel="apple-touch-icon"」を「rel="apple-touch-icon-precomposed"」にすると上半分の光沢処理がなくなます。
もしもうまく表示されないような時は、ブラウザをリフレッシュ（更新）してみましょう。
それでもダメな時はiPhoneなら「設定」→「履歴」と「クッキーの削除」を、スマートフォンも同じように履歴とクッキーを削除してみましょう。
それでもダメな場合は、画像をアップロードした場所と書き方が一致してないなど設定に何らかのミスが発生している可能性があります。
以上です。
スポンサーリンク
2件のコメント